CSS中,存在3种的定位机制
-标准文档流(Normal flow)
-浮动(Floats)
-绝对定位(Absolute positioning)
W3C标准,倡导结构,样式,行为分离
-结构化标准语言(HTML和XML)
-表现标准语言(CSS)
-行为标准语言(DOM和ECMAScript)
标准文档流
-从上到下,从左到右,输出文档内容
-由块级元素和行级元素组成(两个元素都是盒子模型)
块级元素
-从左到右撑满页面,独占一行
-触碰到页面边缘时,会自动换行
div,ul,li,dl,dt,p…
行级元素
-能在同一行内显示
-不会改变HTML文档结构
span,strong,img,input…
盒子模型
-边框(border)
-外边距(margin)
-内边距(padding)
-盒子中的内容(content)
盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸
三个值
上,两边,下
两个值
上下,左右
一个值
盒子模型的3D模型
样式
行内样式>内部样式>外部样式
网页布局基础
-标准文档流
-块级元素
-margin属性—设置自动居中
浮动布局
-能够实现横向多列布局(横向两列、横向三列…横向N列)
-通过设置float属性实现
-float三个属性:left,right,none
-直到碰到容器为止,仍处于标准文档流
-相邻元素上移,占据其后位置,紧挨着它,并排显示
浮动导致问题
父元素高度无法自动扩展
元素上移,填满浮动元素右侧(或中间)的间隙
浮动元素对相邻元素的影响,会导致页面布局混乱
清除浮动
clear属性—常用clear:both;
同时设置width:100%(或固定宽度)+overflow:hidden;
横向两列布局
-float属性—使纵向排列的块级元素,横向排列
-margin属性—设置两列之间的间距
绝对定位布局
-能够实现横向多列布局及较为复杂的定位
-通过设置position属性实现
position属性
-static(静态定位)
-relative(相对定位)
-absolute(绝对定位)
-fixed(固定定位)
三种定位形式
-静态定位
-相对定位
-绝对定位
相对定位
-相对于自身原有位置进行偏移
-仍处于标准文档流中
-随即拥有偏移属性和z-index属性
绝对定位
-建立了以包含块为基准的定位
-完全脱离了标准文档流
-随即拥有偏移属性和z-index属性
-absolute和fixed都属于绝对定位
相同点
-完全脱离了标准文档流—兄弟元素不再受其影响
-以父包含块为基准定位—初始位置在父包含块的左上角
区别
偏移参照标准
absolute
-无已定位祖先元素,以为 偏移参照基准
-有已定位祖先元素,以距其最近的已定位祖先元素为偏移参照基准
fixed
-有、无已定位祖先元素,均以浏览器可视窗口为偏移参照基准
表现形式(滚动条)
absolute
-位置会随滚动条变化
fixed
-位置固定,不会随滚动条变化
-被他遮盖的元素,可以从其下穿过
使用absolute实现横向两列布局—常用于一列固定宽度,另一列宽度自适应的情况
relative—父元素相对定位
absolute—自适应宽度元素绝对定位
固定宽度列的高度>自适应宽度的列