W3C标准,有万维网联盟制定的一系列标准,包括:结构化标准语言(HTML和XML),表现标准语言(CSS),行为标准语言(DOM和ECMASscript)。倡导结构、样式、行为分离。
CSS中存在3种的定位机制:标准文档流(Normal flow)、浮动(Floats)、绝对定位(Absolute positioning)
标准文档流(Normal flow)特点:从上到下,从左到右,输出文档内容;由块级元素和行级元素组成。
块级元素:从左到右撑满页面,独占一行;触碰到页面边缘时,会自动换行。常见块级元素:div、ul、li、dl、dt、p……
行级元素:不会撑满一行,多个行级元素可以一行显示,直到撑满页面为止。常见行级元素:span、strong、img、input……
大部分表单控件都是行级标签。
块级标签、行级标签都是盒子模型。
样式的优先级:行内样式>内部样式>外部样式
margin:10px 18px; 两个:上下,左右。四个:上,右,下,左。三个:上,左右,下。
盒子3D模型:
自动居中-列布局
<style type=”text/css”>
#wrap{width:770px;margin:0 auto;}
#header{width:100%;height:200px;border:1px solid red;}
#mainbody{width:100%;height:200px;border:1px solid blue;}
#footer{width:100%;height:200px;border:1px solid green;}
.content{border:4px solid #badbdb;padding:44px 15px 15px;width:700px;}
.book{background:url(images/t.book.gif) no-repeat #eff9f9;}
</style>
<div id=“wrap”>
<div id=”header”>头</div>
<div id=”mainbody” class=”content book”>内容</div>
<div id=”footer”>尾部</div>
</div>
<span style="font-size:18px;"> </span><span style="font-size:18px;"><span style="font-family:Times New Roman;"> </span></span>
Float属性:3个属性值:left,right,none。元素会左移,或右移,直至触碰到容器为止。设置了浮动的元素,仍处于标准文档流中。(仍占据一定的宽度和高度)
当元素没有设置宽度值,设置了浮动属性,元素的宽度随内容的变化而变化。
元素设置浮动属性后,会对相邻的元素产生印象,相邻元素特指紧邻后面的元素。
清除浮动的常用方法:clear:both或者clear:left或者clear:right;同时设置width:100%+overflow:hidden
父节点不设置浮动,子节点设置浮动,父节点的高度无法扩展。父包含块缩成一条,此时用clear:both方法清除浮动无效,他一般用于紧邻后面的元素的清除浮动。此时用overflow:hidden
绝对定位布局
通过设置position属性实现。CSS中规定的第三种定位机制。能够实现横向多列布局及较为复杂的定位。
position属性,拥有3种定位形式:1、静态定位 2、相对定位 3、绝对定位
可拥有4个属性值:static(静态定位) relative(相对定位)absolute(绝对定位)fixed(固定定位)
相对定位
相对于自身原有位置进行偏移;仍处于标准文档流中;随即拥有偏移属性和z-index属性
position:relative;top:50px;left:30px;
绝对定位
特点:建立了以包含块为基准的定位;完全脱离了标准文档流;随即拥有偏移属性和z-index属性。
未设置偏移量:无论是否存在已定位祖先元素,都保持在元素初始位置,脱离了标准文档流。
当元素设置了绝对定位,他的宽度发生了变化。随着内容的增大而增大。他不在占据空间。 Position:absolute
设置偏移量:无已定位祖先元素,以<html>为偏移参照基准。
有已定位祖先元素,以距其最近的已定位祖先元素为偏移参照基准。
position:absolute;left:50px;top:20px;
position:relative;
position:absolute;left:50px;top:20px;
当一个元素设置绝对定位,没有设置宽度时,元素的宽度根据内容进行调节。
横向两列布局:
使用absolute实现横向两列布局常用于一列固定宽度,另一列宽度自适应的情况。
注意:relative-父元素相对定位;absolute-自适应宽度元素绝对定位;固定宽度列的高度>自适应宽度的列