CSS+HTML开发经验

 

　　1：大模块，也具有唯一性，所以在开头的div使用id选择器header;

 

　　中间层使用id选择器mainbody,底层使用id选择器footer;

 

　　2:先布局，后填充

 

　　3:为三个层设置一个包裹层，使内容居中,方法技巧，使用width设置一下宽度，然后使用margin:0 auto;自动居中

 

　　(自动居中一列布局需要设置margin左右值设置为auto，而且一定要设置width为一个定值。)

 

　　特别提醒，设置了浮动float或者设置了绝对定位position也是无法实现自动居中的

 

　　CSS+HTML的案例

 

　　(CSS规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。)

 

　　1：自动居中

 

　　列布局案列，盒子模型的使用方法

 

　　自动居中与列布局：

 

　　三个技能点：标准文档流，块级元素，margin属性

 

　　2：浮动布局案例

 

　　2.1：float属性，解决浮动影响的方法

 

　　2.2：网页布局最常见的方式之一

 

　　主要应用技能：float属性，使纵向排列的块级元素，横向排列

 

　　margin属性，设置两列之间的间距

 

　　3：绝对定位布局案例

 

　　绝对定位实现横向两列或多列布局

 

　　4:标准文档流(Normal flow)

 

　　4.1：特点：从上到下，从左到右，输出文档内容

 

　　由块级元素和行级元素组成

 

　　4.2：块级元素

 

　　特点：从左到右撑满页面，独占一行

 

　　触碰到页面边缘时，会自动换行

 

　　常见的块级元素，如

 

　　div,ul,li,dl,dt,p...

 

　　4.3:行级元素

 

　　特点:能在同一行内显示

 

　　不会改变html文档结构

 

　　常见的行级标签如

 

　　span,strong,img,input...

 

　　4.4:块级元素和行级元素都是盒子模型

 

　　盒子模型=网页布局的基石，由4部分组成：

 

　　(1)：边框(border)

 

　　(2)：外边距(margin):上(top)右(right)下(bottom)左(left)

 

　　margin顺时针设置方向：三个值代表上，左右，下

 

　　两个值代表上下，左右

 

　　一个值代表四个属性值相同

 

　　(3)：内边距(padding):设置三个值代表：上，左右，下

 

　　上右下左的顺序设置值

 

　　(4)：盒子中的内容(content)

 

　　盒子3D模型有外到内margin>background-color>background-image>padding+content>border

 

　　从第一层到第五层依次为：border、content+padding、background-image、background-color、margin。

 

　　从第五层到第一层依次为：margin、background-color、、background-image、content+padding、border。

 

　　盒子模型的尺寸=边框+外边距+内边距+盒子中的内容尺寸

 

　　5:浮动布局

 

　　5.1：css中规定的第二种定位机制，能够实现横向多列布局。

 

　　5.2：通过float属性实现。含三个属性值，left左浮动，right右浮动，none不浮动

 

　　特点：元素会左移，或右移，直至碰触到容器为止

 

　　设置了浮动的元素，仍旧处于标准文档流中

 

　　注意：当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化

 

　　5.3：清除浮动的常用方法

 

　　(1):clear属性：常用clear:both或者clear:left或者clear:right;

 

　　(2):同时设置width:100%(或固定宽度)+overflow:hidden;

 

　　(对受到浮动影响的元素设置清除浮动clear:both或者width:100%+overflow:hidden;)

 

　　当父包含块缩成一条时，用clear:both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动

 

　　6:绝对定位

 

　　6.1：通过设置position属性实现，css中规定的第三种定位机制

 

　　6.2：position属性

 

　　拥有3种定位形式：

 

　　(1)静态定位，

 

　　(2)相对定位：

 

　　特点：相对于自身原有位置进行偏移，仍处于标准文档流中，随即拥有偏移量和z-index属性

 

　　(3)绝对定位(属性值含absolute和fixed)

 

　　特点：建立了以包含块为基准的定位，完全脱离了标准文档流，随即拥有偏移属性和z-index属性;

 

　　未设置偏移量特点：无论是否存在已定位祖先元素，都保持在元素初始位置，脱离了标准文档流

 

　　设置偏移量特点，偏移参照基准：无已定位祖先元素，以html为偏移参照基准，有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准

 

　　可设置4个属性值：(1)static静态定位，(2)relative相对定位，(3)absolute绝对定位，(4)fixed固定定位

 

　　6.3：横向两列布局

 

　　使用绝对定位实现横向两列布局，应用比较少

 

　　优势：使用absolute实现横向两列布局，常用于一列固定宽度，另一列宽度自适应的情况