前端布局之传统布局

一、传统布局的相关CSS属性（红色为默认属性）

1、display: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit

每个元素都有一个默认的display属性，但我们可以随时重写他。

元素分为块级元素和内联(内联级)元素，

（1）块级元素的display默认为block, 样式为新开一行并尽量撑满容器，能够设置尺寸如宽度和高度

（2）内联元素的display 默认为 inline, 样式为嵌入在行内，不换行也不能设置尺寸

（3）一些特殊元素的display 默认为none如script，样式为在不删除元素的情况下隐藏元素并脱离文档流

（注：display:none 隐藏元素时不会占据原来的空间，区别于visibility:hidden ,后者没有脱离文档流是占据空间的）

（4） 一些特殊元素的display 默认为list-item如 <li>标签，

（4） 一些特殊元素的display 默认为table如<table> 标签，

（未完……）

2.1、float: none / left / right / inherit（未完……）

（1）默认属性值为none， 即不浮动

（2）设置为left 是向左浮动

（3）设置为right 是向右浮动

（4）设置为inherit 是继承父元素的浮动属性

float能够使元素脱离文档流，但不脱离文本流，能够实现文字浮动在图片周围，这只因为设置float的元素在其容器内的高度为0，当设置float的元素高度大于其容器会溢出。

2.2、clear: left / right /both （清除浮动）（未完……）

（1）left为清除左浮动

（2）right为清除右浮动

（3）both为清除全部浮动

清除浮动的方法：

（1）当浮动元素的高度大于其容器而溢出时，在其容器上设置overflow: auto 来解决元素溢出容器塌陷的问题。（为满足IE6，设置成  overflow: auto; 和zoom: 1;）

 

3、position: static / relative / absolute / fixed / sticky(css3新增)

（1）position属性默认值为static，除了默认的static之外，设置其他任意一个属性值都标记为 “positioned”，此外还要设置top/bottom/left/right 其中某一个或几个属性（如设置top和left）才能实现效果，否则不会变化。

（2）设置relative 属性值，效果为：元素相对改变前的其本身的位置进行偏移，偏移量由top/bottom/left/right决定，且其他元素不会因为他的改变而改变（改变前的其本身的位置还会保留）。

（3）设置 absolute属性值，效果为：元素相对最近的“positioned”祖先元素进行偏移，若没有最近的“positioned”元素，则相对body进行偏移。其他元素的位置会被该元素影响（改变前的其本身的位置不保留）。

（4）设置 fixed 属性值，效果为：元素相对视窗进行定位，即脱离文档流不受其他元素影响，偏移量由top/bottom/left/right决定，且改变前的其本身的位置不会保留，其他元素会占据其原有的位置。（注：水平或竖直的偏移量若不设置则默认原来的位置）据说fixed对移动浏览器不友好，解决办法：http://bradfrost.com/blog/post/fixed-position/

（5）sticky是CSS3新增的属性值，使用top/bottom/left/right设置目标区域，若在目标区域则相当于relative，滑动到目标区域以外则相当于fixed，不脱离文档流，（改变前的其本身的位置还会保留）

属性值 relative / absolute / fixed造成了元素的层叠，此时可以设置z-index改变层叠顺序（只有positioned属性值可以）

4、margin: 0 auto（未完……）

块级元素默认尽量撑满容器，设置width可以调节他的宽度，此时设置该元素的左右外边距 margin为auto时，

若元素宽度小于容器宽度，则两边间距均匀平分，元素在容器内水平居中；

若元素宽度大于容器宽度，则会出现水平滚动条来容纳页面。此时将width换成max-width即可解决。

5、box-sizing: content-box / border-box / padding-box

详情见盒模型

 

二、盒模型

页面的尺寸计算如下：

默认页面的宽度 = width + padding + border-width + margin, 即width不包含padding和boder-width

可以通过设置box-sizing属性来改变宽度计算，box-sizing: content-box /  border-box / padding-box

（1）默认属性值为content-box，默认页面的宽度 = width + padding + border-width + margin, 即width不包含padding和boder-width

（2）border-box  页面宽度 = width + margin  即width包含padding和border-width 

（3）padding-box  页面宽度 =  width + border-width + margin  即width包含padding 不包含border-width （注: padding-box 只有Firefox 中实现了，但在Firefox50中删除了，一般最好不要用）

由于该属性比较新，为了兼容，最好设置成以下：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

三、居中问题

1.水平居中

（1）行内元素  text-align:  center

（2）块级元素   margin ：0  auto

（3）对该元素 display :  inline-block   对其父元素  text-align : center

   优点：兼容性好

   缺点：子元素的文本也居中，可在子元素设置 text-align:left 还原

（4）对该元素 margin ：0 auto   对其子元素  display : table 

   优点：只设置了其子元素

   缺点：不兼容ie6、ie7，把子元素<div>换成<table>

（5）对其父元素设置 display : relative   对该元素设置 position:absolute，left:50%，transform:translateX(-50%)

   优点：对其他元素没有影响

   缺点：transform是CSS3的内容，兼容性不太好，要加前缀

（6）对其父设置display ：flex   对该元素设置 justify-content ：center 

   优点：只设置其父

   缺点：flex布局低版本（ie6,7,8）不支持

2.垂直居中

（1）已知高度的文本  line-height :  height 

（未完）

三、传统布局类型

1.单栏布局

2.两栏布局

2.1  float + margin（左定宽，右自适应）

（1）float:left + margin-left  （margin把浮动的位置空出来）

（2）position:absolute + margin-left 

（3）float:left ，margin-right  +  float:left ，负margin

该方法同双飞翼，使用左浮动和左栏的右边距先铺满父元素，然后讲右栏设置负的margin放在左margin的位置

（4）float + BFC 

3.三栏布局

（1）position:absolute + position:absolute +position:absolute

注意：其父元素position：relative

（2）position:absolute + margin +position:absolute

注意：其父元素position：relative

（3）float:left + margin + float:right

注意div顺序为左float，右float，中margin ，若左中右，则右float会被挤到下一行，并且其父元素要清除浮动防止高度塌陷

（4）圣杯布局和双飞翼布局（三个float:left）

一个讲解简洁清楚的文章：https://www.jianshu.com/p/81ef7e7094e8

其中的margin-left:-100% 中，100%是相对父元素的，向左移动100%个父元素，同类margin-left：-150px是向左移动150px

（5）inline-block布局

注意事项：

• vertical-align属性会影响到inline-block元素，你可能会把他的值设置为top

• 需要设置每一列的宽度（如两列布局设置两列宽度为35%和65%）

• 若HTML源代码中元素之间有空格，那么列与列之间会产生空隙

（6）table

其父元素设置display:table ，三栏设置display:table-cell

（7）flex

其父元素设置display:flex

（8）grid

 

1.静态布局

2.自适应布局

3.流式布局

百分比宽度的浮动布局

4.响应式布局

5.弹性布局