广州蓝景分享 — CSS 常见布局技巧大全与适配方案

广州蓝景IT培训
488 阅读5分钟

相信绝大部分人在自学前端时都会遇到以下几点问题，该内容主要讲的是CSS，想要了解更多前端知识，可以在评论区留言，小蓝为大家一一解答，废话不多说 咱们来进入主题。

1.单列布局

1.1 水平居中

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

  • 优点：兼容性好；

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

    <divclass="parent"> <divclass="child">

    .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">

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

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

  • 优点：兼容性好

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

    .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">

    .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">

    .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;

.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的内容以外，大家还想要了解前端开发的什么内容呢？可以在评论区留言告诉我哦，也可以关注“广州蓝景”微信公众号，里面有咱们的“前端电子书”还有技术交流群。希望能帮助到大家在自学前端的路上顺畅无阻。

avatar
文章
阅读
粉丝
相关推荐
最强大的 CSS 布局 —— Grid 布局
177k阅读
 · 
2.5k点赞
如何用 CSS 中写出超级美丽的阴影效果
1.2m阅读
 · 
1.2k点赞
灵活运用CSS开发技巧
179k阅读
 · 
5.1k点赞
几种常见的CSS布局
41k阅读
 · 
560点赞
广州蓝景分享—浏览器的渲染原理
758阅读
 · 
3点赞
CSS 常用技巧
31k阅读
 · 
797点赞
干货!各种常见布局实现+知名网站实例分析
184k阅读
 · 
3.4k点赞
我写CSS的常用套路
83k阅读
 · 
2.8k点赞
CSS知识点及技巧整理
53k阅读
 · 
1.2k点赞
你未必知道的49个CSS知识点
170k阅读
 · 
4.9k点赞

友情链接：