css布局

定义

布局就是把页面分成一块一块，按左中右、上中下等排列。

布局分类

固定宽度布局:一般宽度为960/1000/1024px。多为pc端使用。
不固定宽度布局:主要靠文档流的原理来布局,页面本来就是自适应的例如内联元素会自动充满一行然后才换行，块级元素的自动填充页面。不需要css页面本来就是自适应的，多为移动端使用。
响应式布局:在pc上固定宽度，手机上不固定宽度的混合布局

布局方式

float布局
flex布局
grid布局

float布局

float布局专门为ie设置不需要做响应式的固定宽度布局。
给子元素加上float样式，会使子元素脱离文档流。浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列,文字环绕。
如果一个父元素里有多个浮动子元素排成一行那么最后一个float元素不设置宽度，可以变得更美观
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。需要以下方法来擦除浮动。

给父元素一个clearfix类
.clearfix:after { content: "."; display: block; clear: both;}付元素闭合浮动

一个偶数像素和一个计数像素的高度不可能上下居中对齐，具体对齐要计算相应像素来加外边距

常见布局

两栏布局
三栏布局
四栏布局
平均布局

关于line-height

line-height可以写在块元素内，该值可以影响块元素的行内元素

      <ul class=" nav" style=" line-height: 32px;">
        <li>首页</li>
        <li>课程</li>
        <li>优惠</li>
        <li>关于</li>
      </ul>

此时块级元素会影响到li中的文字的高度

关于border-box

border-box是应用比较广泛的盒模型，它的width会加上boeder的宽度，因此计算内部子元素的width是记得减去border的宽度。也可以把父元素的border改成outline这样不会占用width。

居中

在上面讲了左右两小块元素的高度居中对齐用了手动计算margin，现在对于一大个block元素可以用margin-left: auto; margin-right: auto;在页面上左右居中对齐，但这种方法前提是你要设置好块级元素的宽度，否则它的宽度就会铺满其父级元素。

代码规范

尽量不要写多余代码因为可能覆盖其他代码，拿什么为例margin:0 auto没有上面两行代码好用

平均布局

固定宽度布局，假定宽度为800px，需要4块平均布局，那么4x+3y=800，x是borerbox宽度，y是margin

但是由于最后一块也有margin-right会使四块总宽大于800px，导致最后一块掉下来

可以采取负margin方法

给布局加一个新div图层
然后给新dic一个负的margin

情况为元素没有设置浮动且没有设置定位或者 position 为 static。

负margin

关于负margin详情阅读
关于为什么right，bottom和top，left设置负margin时不一样，我理解这与文档流有关系，正常流动时从上到下，从左到右，所以设置bottom和right为负margin时会影响正常文档流之后的元素，但设置top和left时只会影响到自己。这就可以理解inline元素负bottom会失效，block元素负right会失效

父元素的负margin：由于父元素始终会影响到子元素的位置，所以给父元素加负margin都会使子元素往对应方向移动。可以想想加正margin什么方向移动，负margin反方向移动

css的float布局