css布局的学习笔记

一、布局方式
1.标准文档流
特点：从上到下从左到右的方式输出文档流，由块级标签和行级标签组成。
块级元素：从左到右撑满页面，独占一行，触碰页面边缘，自动换行。
 包括div、ul、li、dl、dt、p
行级元素：在同一行显示，不改变html文档结构
 包括span、strong、img、input（大部分表单标签）
2.浮动
3.绝对定位




二、盒子模型
1、构成：边框（border）外边距（margin）内边距（padding）内容（content），前三个是盒子模型的属性。
2、设置特点：按照上右下左的方向分别赋值，可以设置四个值（上右下左），三个值（上 左右 下 ），两个（上下 左右）
3、三维图：从上到下分为五层，分别为 border，pading+content,backgroung-image,backgroung-color,margin
  了解他们的层级结构可以清楚的理解样式之前的层叠关系（覆盖关系，上层的覆盖下层的）
4、尺寸计算：盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸


三、样式表
1、种类：行内样式，内部样式（style标签中直接书写的样式），外部样式
2、优先级：采用就近原则，即 行内样式>内部样式>外部样式


四、自动居中一列布局（标准文档流）
1、技能点：标准文档流、块级元素、margin属性
2、关键：设置包裹外层样式形如：{width:770px;margin:0 auto},关键是margin值，此处的上下间距是任意的，
但是左右必须设置为auto同时必须设置宽度为一个定值（百分比（不能100%）固定长度均可，但必须设置）；
auto可以根据浏览器的宽度自动设置两边的外边距。网页设计过程中，一般定义外层的宽度，
内部宽度设置为100%，这样内部继承外层的宽度。
3、注意：当包裹层设置了浮动或者绝对定位的时候那么此时自动居中失效


五、浮动布局
1、功能：块级元素横向排列即横向多列布局，float属性实现
2、取值：left-左浮动 right-右浮动 none-不浮动
3、特点：元素会左移或右移，直到触碰到容器（包含块）为止
4、设置了浮动的元素，依旧处于文档流中，也就是说它占有文档空间，会对周围元素产生影响；
  设置浮动的元素，没有设置宽度，那么宽度随内容的变化而变化；不设置内容在浏览器中会缩成一个圆点
5、当元素设置了浮动之后会对相邻的元素产生影响，“相邻”特指紧邻后面的第一个元素
6、清除浮动：(1)clear：both（left或者right）
    (2)同时设置width:100%(或固定宽度)+overflow：hidden
    (3)<br/>(不推荐使用)
六、横向两列布局
1、技能点：float属性-使纵向排列的块级元素横向排列；margin属性设置两列之间的间距
2、注意：当父包含块缩成一条线的时候，采用clear无效(clear只对紧邻后面的元素起作用，对于前面的元素无效)
采用overflow：hidden来实现浮动清除
3、高度一般不设置，


七、绝对定位布局：
1、通过position属性实现；能够实现横向多列布局和较复杂的定位如遮罩层等
2、position的三种定位形式：静态定位，相对定位，绝对定位
3、四个属性值：(1)static（静态定位)：
特点：不设置position的默认状态，文档处于文档流中


(2)relative（相对定位)：
  特点：相对于自身原有位置进行偏移；
仍处于标准文档流中会占有原有空间；
随即拥有偏移属性和z-index属性


（3)absolute（绝对定位)：
  特点：建立了以包装块为基准的定位；
完全脱离文档流；
随即拥有便宜属性和z-index属性
  注意： 未设置偏移量，无论是否存在已定位的祖先元素，都保持在原始的初始位置；脱离标准文档流；设置绝对定位未设置宽度，宽度随着内容的变化而变化；
 设置偏移量，无已定位的祖先元素以html作为偏移参照基准；有已定位祖先元素以距其最近的已定位祖先元素为偏移参照基准


(4)fixed（固定定位）后两个属于绝对定位


八、横向两列布局
1、使用范围：一列宽度固定，另一列宽度自适应；
2、技能点：relative-父元素相对定位；absolute-自适应宽度元素绝对定位（注意：固定宽度列的高度>自适应宽度的列）