CSS 常见布局技巧大全与适配方案

2020/11/5 8:03:45

编程Tag： css3 前端工具 Html/CSS

本文主要是介绍CSS 常见布局技巧大全与适配方案，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.单列布局

1.1 水平居中

父元素 text-align:center;子元素：inline-block;

  • 优点：兼容性好；

  • 不足：需要同时设置子元素和父元素

<divclass="parent"><divclass="child"></div></div>


.parent{width: 500px;height: 200px;background: red;text-align: center;}.child{display: inline-block;width: 300px;height: 100px;background: blue;}

子元素 margin:0 auto;

  • 优点：兼容性好

  • 缺点：需要指定宽度

<divclass="parent"><divclass="child"></div></div>


.parent{width: 500px;height: 400px;background: red;}.child{margin: 0 auto;width: 300px;height: 100px;background: blue;}

父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半

  • 优点：兼容性好

  • 缺点：需要知道子元素的宽度

<div class="parent">
  <div class="child"></div></div>


 .parent {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 400px;
  background: red;}.child {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  height: 100px;
  background: blue;}

父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);

  • 优点：不需要知道子元素的宽度

  • 缺点：兼容性差 （新时代的你们，现在新的浏览器支持了，放心用了）

<divclass="parent"><divclass="child"></div></div>


.parent {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 400px;
  background: red;}.child {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 300px;
  height: 100px;
  background: blue;}

弹性盒子：父元素：display:flex;justify-content:center;

  • 优点：简单

  • 缺点：兼容性差 （新时代的你们，现在新的浏览器支持了，放心用了）

<divclass="parent"><divclass="child"></div></div>


.parent {
  display: flex;
  justify-content: center;
  width: 500px;
  height: 400px;
  background: red;}.child {
  width: 300px;
  height: 100px;
  background: blue;}

1.2 垂直居中

vertical-align:center;

<divclass="parent"><divclass="child"></div></div>


.parent {
  width: 500px;
  height: 400px;
  background: red;
  display: table-cell;
  vertical-align: middle;}.child {
  width: 300px;
  height: 100px;
  background: blue;}

line-height

<divclass="parent"><divclass="child"></div></div>


.parent {
  width: 500px;
  height: 400px;
  background: red;
  line-height: 400px;}.child {
  width: 300px;
  height: 100px;
  background: blue;
  display: inline-block;
  vertical-align: middle;}

父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);

<divclass="parent"><divclass="child"></div></div>


.parent {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 400px;
  background: red;}.child {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 300px;
  height: 100px;
  background: blue;}

父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;

<divclass="parent"><divclass="child"></div></div>


.parent {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 400px;
  background: red;}.child {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -50px;
  width: 300px;
  height: 100px;
  background: blue;}

父元素：display:flex;align-items:center;

<divclass="parent"><divclass="child"></div></div>


.parent {
  width: 500px;
  height: 400px;
  background: red;
  display: flex;
  align-items: center;}.child {
  width: 300px;
  height: 100px;
  background: blue;}

1.3 水平垂直居中

父元素：display:table-cell;vertical-align:middle;text-align:center;子元素；display:inline-block;

<divclass="parent"><divclass="child"></div></div>


.parent {
  width: 500px;
  height: 400px;
  background: red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;}.child {
  width: 300px;
  height: 100px;
  background: blue;
  display: inline-block;}

父元素：position:relative;子元素：position:absolute?50%;left:50%;margin-left:宽度的一半；margin-top:高度的一半；或者 transform:translate(-50%,-50%);

<divclass="parent"><divclass="child"></div></div>


.parent {
  width: 500px;
  height: 400px;
  background: red;
  position: relative;
  left: 0;
  right: 0;}.child {
  width: 300px;
  height: 100px;
  background: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);}

父元素{display:flex;justify-content:center;align-items:center;}

<divclass="parent"><divclass="child"></div></div>


.parent {
  width: 500px;
  height: 400px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;}.child {
  width: 300px;
  height: 100px;
  background: blue;}

2.多列布局

2.1 左侧定宽，右侧自适应

left{float:left;width:100px;} .right{margin-left:100px;}

<div class="left">left</div><div class="right">right</div>


* {
  margin: 0;
  padding: 0;}.left {
  height: 400px;
  width: 300px;
  background: red;
  float: left;}.right {
  height: 400px;
  margin-left: 300px;
  background: blue;}
<div class="parent">
  <div class="left">
    left  </div>
  <div class="right-fix">
    <div class="right">
      right    </div>
  </div></div>


* {
  margin: 0;
  padding: 0;}.left {
  width: 300px;
  height: 400px;
  float: left;
  background: red;}.right-fix {
  width: 100%;
  margin-left: -300px;
  float: right;}.right {
  margin-left: 300px;
  height: 400px;
  background: blue;}

.left{width:宽度值;float:left;} .right{overflow:hidden;}

<divclass="parent"><divclass="left">   
  left   
</div><divclass="right">   
  right   
</div></div>


/*设置overflow:hidden;创建BFC。根据BFC特性，BFC不会与float box 重叠。*/* {
  margin: 0;
  padding: 0;}.left {
  width: 300px;
  height: 400px;
  float: left;
  background: red;}.right {
  height: 400px;
  background: blue;
  overflow: hidden;}

table 实现

<div class="parent">
  <div class="left">
    left  </div>
  <div class="right">
    right  </div></div>


* {
  margin: 0;
  padding: 0;}.parent {
  display: table;
  table-layout: fixed;
  width: 100%;}.left {
  width: 300px;
  height: 400px;
  background: red;
  display: table-cell;}.right {
  height: 400px;
  background: blue;
  display: table-cell;}

flex 实现

<div class="parent">
  <div class="left">
    left  </div>
  <div class="right">
    right  </div></div>


* {
  margin: 0;
  padding: 0;}.parent {
  display: flex;
  width: 100%;}.left {
  width: 300px;
  height: 400px;
  background: red;}.right {
  height: 400px;
  background: blue;
  flex: 1;}

2.2 右侧定宽左侧自适应

float margin 实现

<div class="parent">
  <div class="left">
    left  </div>
  <div class="right">
    right  </div></div>


* {
  margin: 0;
  padding: 0;}.left {
  width: 100%;
  height: 400px;
  background: red;
  float: left;
  margin-right: -300px;}.right {
  height: 400px;
  background: blue;
  width: 300px;
  float: right;}

table 实现

<div class="parent">
  <div class="left">
    left  </div>
  <div class="right">
    right  </div></div>


* {
  margin: 0;
  padding: 0;}.parent {
  width: 100%;
  display: table;
  table-layout: fixed;}.left {
  width: 100%;
  height: 400px;
  background: red;
  display: table-cell;}.right {
  height: 400px;
  background: blue;
  width: 300px;
  display: table-cell;}

flex 实现

<div class="parent">
  <div class="left">
    left  </div>
  <div class="right">
    right  </div></div>


* {
  margin: 0;
  padding: 0;}.parent {
  width: 100%;
  display: flex;}.left {
  flex: 1;
  background: red;
  display: table-cell;}.right {
  height: 400px;
  background: blue;
  width: 300px;}

2.3 左边两列定宽，右侧自适应

float margin 实现

<div class="parent">
  <div class="left">
    left  </div>
  <div class="center">
    center  </div>
  <div class="right">
    right  </div></div>


* {
  margin: 0;
  padding: 0;}.parent {
  width: 100%;}.left,.center {
  background: red;
  float: left;
  width: 300px;
  height: 400px;}.center {
  background: yellow;}.right {
  height: 400px;
  background: blue;
  margin-left: 600px;}

float overflow 实现

<div class="parent">
  <div class="left">
    left  </div>
  <div class="center">
    center  </div>
  <div class="right">
    right  </div></div>


* {
  margin: 0;
  padding: 0;}.parent {
  width: 100%;}.left,.center {
  background: red;
  float: left;
  width: 300px;
  height: 400px;}.center {
  background: yellow;}.right {
  height: 400px;
  background: blue;
  overflow: hidden;}

table 实现

<div class="parent">
  <div class="left">
    left  </div>
  <div class="center">
    center  </div>
  <div class="right">
    right  </div></div>


*{

margin: 0;

padding: 0;

}

.parent{

width: 100%;

display: table;

table-layout: fixed;

}

.left,

.center{

background: red;

display: table-cell;

width: 300px;

height: 400px;

}

.center{

background: yellow;

}.right{

height: 400px;

background: blue;

display: table-cell;

}




这篇关于CSS 常见布局技巧大全与适配方案的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程