CSS基本布局技术

 
 CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。 

 
 正常布局流（normal flow） 

 
 正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。 

 
 HTML元素完全按照源码中出现的先后次序显示 

 
 块级（block）元素：显示在前一个元素的下方 

 
 内联（inline）元素：像段落中的单词一样，显示在前一个元素的旁边（右侧），超出父级元素的宽度后，就像段落一样自动换行。 

 
 CSS布局技术会覆盖默认的布局，用css建立布局，会把部分相应的元素移出正常布局流。 

The display property

 
 所有正常布局流中的元素都有一个display属性值，所谓块级元素其实就是它的display默认值是block 

 
 标准值：block,inline,inline-block(行内块，把块级标签放到行内) 

 
 两个重要display属性值（常用于多列布局）： 

 
 flex 

  //Todo 

 
 grid 

  //Todo 

 
 浮动（float） 

 
 　　把元素移出正常布局流，并吸附到父元素的左边或右边，正常布局中的位于该元素之下的内容会自动排布在浮动元素周围。 

 
 　　浮动元素会创建BFC，这个元素内容占多大地方，这个块就有多大。 

 
 float属性 
 有四个可选值： 

none：不浮动，所有元素的默认值。

left：左侧浮动

right：右侧浮动

inherit：继承父级元素的float属性值

 
 使用float实现多列浮动布局： 

 
 　　margin:0 auto  

 
 　　上下间距0，左右自动居中 

 
 设置列宽度： 

 
 　　%，创建流式布局（liquid layout），响应式，根据窗口自动等比调整 

 
 　　　　ps.了解媒体查询 

 
 　　px，创建固定宽度布局（fixed-width-layout） 

 
 浮动顺序问题： 

 
 　　两个同级子元素同时靠右浮动，代码顺序靠前的元素，在最右边。 

 
 清除浮动解决父级塌陷： 

  （把上面已经浮起来的元素拉回地面） 

 
 　　应用clear属性的元素意味着，在此处停止浮动，会使该元素回归正常布局流，从新的行开始显示。 

 
 　　left，right，both属性值，分别停止左，右，左右的浮动 

 
 　　停止浮动元素与浮动元素之间是紧贴着的，且无法直接用margin来获得间距，是因为浮动元素在正常流之外，不在一个高度上，外边距也就没意义了。 

 
 　　可以引入一个专门用来清除浮动的div元素，来帮助后续的页面布局。我们约定它的类名为clearfix。 

 
 　　　　 
 < 
 div 
 class 
 = 
 " 
 clearfix 
 " 
 > 
 </ 
 div 
 > 

 
 　　更好的方法是，用 
 伪元素来清除浮动 

 
 　　　　伪元素，是一个非自闭元素的子元素，不存在于html中，不会被js检测到，其中 

 
 　　　　：before，相当于排在最前面的子元素； 

 
 　　　　：after，相当于排在最后的子元素。 

 
 　　　　给之后要清除浮动的元素加上clearfix这个类名，然后在css中，写如下代码： 

 
  .clearfix:after{
content:"";
display:block;
clear:both;
} 
 

 
 在父级使用overflow属性，设置为hidden，auto（默认visible 
 ），可能产生副作用，或使用display的一个新属性值：flow-root，没有副作用 

 
 给  
 <div> 
 display: flow-root 
  属性后， 
 <div> 
  中的所有内容都会参与BFC，浮动的内容不会从底部溢出。 

 
 　　　宽度问题： 

 
 多列浮动元素的宽度在设置盒子样式之后，可能不会如我们所愿的并排显示，设置Box-sizing: border-Box，使盒子的宽度取值（width属性）为 content + padding + border，而不是默认的content宽度。 

 
 定位（position） 

  默认值：static 

 
 相对定位（Relative positioning）: 
 相对定位通常用来对布局进行微调，相对于元素在正常文档流中的位置来移动它，仍然占据正常文档流中的位置。 

 
 相对于原位置 

 
 定位属性： 
 top,bottom,left,right 

 
 绝对定位（Absolute positioning）: 
 将元素从正常布局流中移除，相当于放到另一个图层中，可以相对于body元素的边缘固定，或相对于最近的被非静态定位的父元素来固定。我们称这个被参照的元素为"包含块"（the containing block）。 

 
 外边距仍会影响定位的元素，body默认margin为8px，p标签默认上边距为16px。。。 

 
 固定定位（Fixed positioning）: 
 与绝对定位类似，但是相对于浏览器视窗来固定位置的。 

ps.relative定位可以和float同时设置，但absolute、fixed不能和float同时设置，虽然都是脱离正常流，但float是浮动流，绝对和固定position是定位流。

 
 粘性定位（sticky）：pass 

 
 Z-index 

 
 不设置z-index的默认层叠顺序： 

 
 CSS表格（ 
 display: table-caption 
 ） 

 
 弹性盒子（flex） 

 
 网格布局（grid layout） 