常用布局总结

mingde 发布于2019-08-30 15:44 / 1353人阅读

摘要：，块级格式化上下文创建的情况浮动元素绝对定位元素行内块元素表格的单元格，表格的标题特性不为的元素弹性盒布局规则内部的会在垂直方向，一个接一个地放置。

一、两列布局 1.1 左列定宽，右列自适应

1）利用float + margin实现（方法1）

HTML代码：


  左列定宽
  右列自适应

CSS代码：

.left {
  width: 600px;
  height: 400px;
  background-color: pink;
  float: left;
}
.right {
  height: 400px;
  background-color: skyblue;
  margin-left: 600px;
}

2）利用float + margin实现（方法2）

HTML代码：


  左列定宽
  
    右列自适应

CSS代码：

.left {
  width: 100px;
  height: 400px;
  background-color: #33cccc;
  float: left;
}
.right-fix {
  margin-left: -100px;
  width: 100%;
  float: right;
}
.right {
  margin-left: 100px;
  height: 400px;
  background-color: #876ed7;
}

3）利用float + overflow实现

HTML代码：


   左列定宽
   右列自适应

CSS代码：

.left {
  width: 100px;
  height: 400px;
  background-color: #d25fd2;
  float: left;
}
.right {
  height: 400px;
  background-color: #d235d2;
  overflow: hidden;
}

解析: div.right设置overflow: hidden形成BFC，不与div.left的float box重叠，宽度达到自适应。
BFC（block formatting context，块级格式化上下文）

创建BFC的情况：
1、浮动元素（float: left | right）；
2、绝对定位元素（position: absolute | fixed）；
3、行内块元素（display: inline-block）；
4、表格的单元格（display: table-cells，td、th）；
5、表格的标题（display: table-captions | table-caption）；
6、"overflow" 特性不为visible 的元素；
7、弹性盒 (display: flex | inline-flex)；

BFC布局规则：
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3、每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（#）
4、BFC的区域不会与float box重叠。（#）
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之亦然。
6、计算BFC的高度时，浮动元素也参与计算（清除浮动）。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此，本例中当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。

1）和3）的异同：
相同点：两者的 div.left 都采用float浮动
不同点：
1）的 div.right 使用 margin-left 改变宽度。
3）的 div.right 使用 overflow: hidden 自身形成BFC自适应宽度，不需要关注 div.left 的定宽。

4）利用table实现

HTML代码：


   左列定宽
   右列自适应

CSS代码：

.two-col-4 {
  width: 100%;
  height: 400px;
  display: table;
}
.left, .right {
  display: table-cell; /* 利用单元格自动分配宽度 */
}
.left {
  width: 100px;
  background-color: #ff9040;
}
.right {
  background-color: #ffb273;
}
.right div{
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 30px;
}

缺点：display: table-cell形成BFC，造成margin collapse。属于同一个BFC的两个相邻Box的margin会发生重叠。

5）使用position实现

HTNML代码：


  左列定宽
  右列自适应

CSS代码：

.two-col-5 {
  position: relative;
}
.left {
  width: 100px;
  height: 400px;
  background-color: #f7fe00;
  position: absolute;
  top: 0;
  left: 0;
}
.right {
  height: 400px;
  background-color: #52e93a;
  position: absolute;
  top: 0;
  left: 100px;
  right: 0;
}

6）使用flex实现

HTML代码：


   左列定宽
   右列自适应

CSS代码：

.two-col-6 {
  width: 100%;
  height: 400px;
  display: flex;
}
.left {
  width: 100px;
  background-color: #39e639;
}
.right {
  flex: 1;
  background-color: #67e667;
}

解析：flex 是 flex-grow、flex-shrink 和 flex-basis 的简写。
flex-grow：用来“瓜分”父项的“剩余空间”
flex-shrink： 设置子项的缩小比例，默认为1，即如果父项空间不足，该项目将缩小。
flex-basis：用于设置子项的占用空间。如果设置了值，则子项占用的空间为设置的值；如果没设置或者为auto，那子项的空间为width/height 的值。

1.2 右侧定宽，左侧自适应

1）使用float + overflow 实现

HTML代码：


   右列定宽
 
   左列自适应

CSS代码：

.left {
  height: 400px;
  background-color: pink;
  overflow: hidden; /* BFC */
}
.right {
  width: 100px;
  height: 400px;
  background-color: skyblue;
  float: right;
}

1.3 一列不定，一列自适应

1）使用float + overflow实现

HTML代码：


  左列不定宽
  右列自适应

CSS代码：

.left {
  height: 400px;
  background-color: #ff9040;
  float: left; /* 只设浮动，不设宽度 */
}
.right {
  height: 400px;
  background-color: #ffb273;
  overflow: hidden; /* 触发BFC */
}

2）使用flex实现

HTML代码：


  左列不定宽
  右列自适应

CSS代码：

.two-col-lr-2 {
  display: flex;
}
.left { /* 不设宽度 */
 height: 400px;
 background-color: #f63e62;
}
.right {
 height: 400px;
 background-color: #f66f89;
 flex: 1; /* 均分父项剩余部分 */
}

二、三列布局 2.1 两列定宽，一列自适应

1）使用float + margin实现

HTML代码：


   左列定宽
   中间定宽
   右列自适应

CSS代码：

.tri-col-1 {
  min-width: 300px;
}
.left {
  width: 100px;
  height: 400px;
  background-color: #ed002f;
  float: left;
}
.center {
  width: 200px;
  height: 400px;
  background-color: #f63e62;
  float: left;
}
.right {
  margin-left: 300px;
  height: 400px;
  background-color: #f66f89;
}

2）使用float + overflow实现

HTML代码：


   左列定宽
   中间定宽
   右列自适应

CSS代码：

.tri-col-2 {
  min-width: 300px;
}
.left {
  width: 100px;
  height: 400px;
  background-color: #ff7400;
  float: left;
}
.center {
  width: 200px;
  height: 400px;
  background-color: #ff9640;
  float: left;
}
.right {
  height: 400px;
  background-color: #ffb273;
  overflow: hidden; /* 触发BFC */
}

3）使用table实现

HTML代码：


  左列定宽
  中间定宽
  右列自适应

CSS代码：

.tri-col-3 {
  width: 100%;
  height: 400px;
  display: table;
}
.left {
  width: 100px;
  background-color: #ffc900;
  display: table-cell;
}
.center {
  width: 200px;
  background-color: #ffd640;
  display: table-cell;
}
.right {
  background-color: #ffe173;
  display: table-cell;
}

4）使用flex实现

HTML代码：


   左列定宽
   中间定宽
   右列自适应

CSS代码：

.tri-col-4 {
  height: 400px;
  display: flex;
}
.left {
  width: 100px;
  background-color: #00cc00;
}
.center {
  width: 200px;
  background-color: #39e639;
}
.right {
  background-color: #67e667;
  flex: 1; /* 均分父项剩余部分达到自适应 */
}

2.2 两侧定宽，中间自适应

1）使用flex实现

HTML代码：


   左列定宽
   中间自适应
   右列定宽

CSS代码：

.tri-col-lr-1 {
  height: 400px;
  display: flex;
}
.left{
  width: 100px;
  background-color: #bc008d;
}
.center {
  flex: 1; /*均分父项剩余的部分*/
  background-color: #dd37b4;
}
.right {
  width: 200px;
  background-color: #dd64bf;
}

2）使用position实现

HTML代码：


   左列定宽
   中间自适应
   右列定宽

CSS代码：

.tri-col-lr-2 {
  position: relative;
}
.left {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #00af64;
}
.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 400px;
  background-color: #37dc74;
}
.right {
  width: 200px;
  height: 400px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #63dc90;
}

三、多列等宽布局

1）利用table实现

HTML代码：

CSS代码：

.multi-col-1 {
  width: 100%;
  height: 400px;
  display: table;
}
.col {
  display: table-cell; /* 无需关注列数，单元格自动平分 */
}
.col:nth-child(odd) {
  background: pink;
}
.col:nth-child(even) {
  background: lightgreen;
}

2）利用flex实现

HTML代码：

CSS代码：

.multi-col-2 {
  height: 400px;
  display: flex;
}
.col {
  flex: 1; /* 无需关注列数，自动平分 */
}
.col:nth-child(odd) {
  background: lightcoral;
}
.col:nth-child(even) {
  background: yellow;
}

四、九宫格布局

1）使用table实现

HTML代码：

CSS代码：

.squ-1 {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: table;
}
.row {
  display: table-row;
}
.item {
  display: table-cell;
  border: 1px solid red;
}

2）使用flex实现

HTML代码：

CSS代码：

.squ-2 {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  flex: 1;
}
.item {
  flex: 1;
  border: 1px solid skyblue;
}

云服务器 GPU云服务器 android常用布局年终总结网络总结方法总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116093.html

静态页面布局总结（新手）

摘要：学习一个月了，对和页面的静态布局进行一次总结总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么对于静态的页面的布局就不会有太大的问题再说布局之前先说一下元素的显示模式分类。学习HTML一个月了，对HTML和Css页面的静态布局进行一次总结总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么对于静态的页面...

MasonEast 2019-08-02 12:11 评论0 收藏0
静态页面布局总结（新手）

摘要：学习一个月了，对和页面的静态布局进行一次总结总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么对于静态的页面的布局就不会有太大的问题再说布局之前先说一下元素的显示模式分类。学习HTML一个月了，对HTML和Css页面的静态布局进行一次总结总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么对于静态的页面...

sushi 2019-08-29 17:30 评论0 收藏0
CSS常用布局

摘要：头部主要内容左边栏右边栏尾部显示为头部主要内容左边栏右边栏尾部圣杯布局和双飞翼布局的原理这篇文章讲解得比较清楚，我就不再赘述。 ====== 样例代码不能显示，请看原文https://magicly.me/css-layout/ ====== 布局是CSS中一个很重要的部分，甚至我觉得是最重要也是最难的部分，其他诸如字体大小、颜色等等都是很容易的。最近总结一下使用过的CSS常...

aaron 2019-08-29 12:59 评论0 收藏0
CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

includecmath 2019-08-29 12:17 评论0 收藏0