CSS规定的有三种定位机制：普通文档流定位、浮动定位、绝对定位。
文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
盒子模型的三位立体结构图从第一层到第五层依次为：
border、content+padding、background-image、background-color、margin
盒子模型的属性值：
- 三个代表： 上 左右 下
- 两个代表: 上下 左右
- 一个代表：上下左右
自动居中一列布局：
根据浏览器的宽度自动居中设置两边的外边距：margin：0 auto；
自动居中一列布局需要设置 margin 左右值设置为 auto，而且一定要设置width为一个定值。当页面设置为自动居中的时候，不能设置float属性或者position属性。
float属性：当元素设置浮动属性后，会对相邻的元素产生影响，相邻的元素特指紧邻后面的元素。
清除浮动两种方法：
方法一：想清除相邻标签的浮动，就在css里给相邻标签加clear：both
方法二：想清除某元素的浮动，就给该标签设定width的值加 overflow：hidden
position属性拥有3种定位形式 1.静态定位 2.相对定位 3.绝对定位
可以设置4个属性：static(静态定位) relative(相对定位) absolute(绝对定位)fixed(固定定位) （绝对定位）
相对定位的特点：
1.相对于自身原有位置进行偏移, 以初始位置+偏移量，运动到后来的位置。
2.仍处于标准文档流中，原来的位置不能被其他占据
3.随即拥有偏移属性和z-index属性会覆盖其他内容进行偏移）
绝对定位特点：
1.建立了以包含块为基准的定位
2.完全脱离了标准文档流
3.随即拥有偏移属性和z-index属性
当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节
未设置偏移量时：
无论是否存在已定位祖先元素，都保持在元素初始位置
脱离了标准文档流
设置偏移量时：
无定位祖先元素，以<html>为偏移参照基准
有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
横向两列布局两种方法：
第一种方法：float浮动的方法进行处理。
第二种方法：
绝对定位实现横向两列布局常用于一列固定宽度另一列宽度自适应的情况；
设置父元素position为relative及子元素的position为absolute就可以使子元素的宽度自适应，并且定位是相对于父元素的，具体位置可调整top和left等；同时注意设置“柱子层”的高度大于宽度自适应层的高度。
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
