《网页布局基础》-学习笔记-原创手记-慕课网

W3C标准

结构化标准语言(HTML和XML)
表现标准语言(CSS)
行为标准语言(DOM和ECMAScript)
常见块级元素：div ul ol li dl dt p...
CSS的定位机制：标准文档流，绝对定位，浮动

盒子3D模型

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

border：边框粗细样式颜色
padding：上右下左
margin：1.上右下左；2.上右 or 下左 or 上左 or 下右；3.上左/右下

背景图像/背景颜色：

.book{ background:url(../images/t_book.gif) no-repeat #eff9f9;}

分析：background:url(../images/t_book.gif) -〉背景图像
eff9f9; -〉背景颜色
no-repeat -〉不重复

自动居中一列布局

需要设置 margin 左右值设置为 auto，而且一定要设置width为一个定值。
使#mainbody和#footer宽度以父包含块wrap宽度为准自适应:

#mainbody, #footer{width:100%}

一个网页一般分为三个部分，#header,#mainbody,#footer，
如果想让整体网页居中，先将网页包裹成一个块级元素，class="wrap"

 .wrap{margin:0 auto;width:960px}

如果设置了{margin:0 auto;}不要再设置浮动或者绝对定位，因为那样会让你的居中效果消失。

浮动

可实现块级元素横向排列
1、3个属性值：left-左浮动，right-右浮动，none-不浮动
2、设置了浮动的元素，仍旧处于标准文档流中，意味着会占据标准文档流中的空间，对周围的元素产生影响
3、当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化（没内容时直接缩到浮动的那一边，看不见了）
4、当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。

清除浮动的常用方法

1.clear属性-常用

p{clear:both;}
p{clear:left;}
p{clear:right;}

2.overflow属性-父级

p{width:100%; overflow:hidden;}
p{width:960px; overflow:hidden;}

两种清除浮动方法的使用场景：
1、当子元素设置了浮动，父元素没有设置浮动而导致的父元素高度不能自动扩展（此时父块在下，子块漂浮起来，脱离父块的盒子，父块没有子块的支撑，就缩成一条线），
缩成一条线，子元素从父元素中溢出时，适合使用overflow属性的方式来清除浮动；
此法可同时去除紧邻的块级受到的浮动影响，而不需要再对受到浮动影响的紧邻块级元素设置去除浮动。

解释：width设置为100%就是继承父容器的宽度（如果本身就是块级元素，则自动具备此特性）。左右撑满整个容器，为自己清除浮动创建条件。再加溢出隐藏，就可以把包裹浮动的部分去除（即去除浮动）。

2、如果是紧邻的块级元素受到浮动影响,对该受到影响的块级设置clear属性更为合适。

绝对定位布局

position属性拥有三种定位形式：1、静态定位 2、相对定位 3、绝对定位
可设置4个属性值：
static（静态定位）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）
在position属性中绝对定位absolute和固定定位fixed都属于绝对定位形式。

相对定位

1.仍旧处于标准文档流中，即占据一定的空间
2.拥有偏移属性和 z-index属性（会产生覆盖效果）
3.相对初始位置的偏移的位置

绝对定位

特点：

建立了以包含块(父级元素)为基准的定位
完全脱离了标准文档流
随即拥有偏移属性和z-index属性
如果没有设置宽度，宽度随内容变化而变化（和浮动相似）

情况1：未设置偏移量
无论是否存在以定位祖先元素，都保持在元素初始位置（类似于没有速度也就没有相对运动这一说法）但是脱离了标准文档流
情况2：设置偏移量
1.无已定位祖先元素：以html为偏移参照基准
2.有已定位祖先元素：以距其最近的已定位祖先元素为偏移参照基准
已定位元素：非静态定位元素。

使用absolute实现横向两列布局

布局大多数情况下用float定位，用absolute常用于一列固定宽度，另一列宽度自适应的情况
特点：
1.父元素设置相对定位：relative 设置父元素定位是为了不让自适应层相对HTML定位
#mainbody{width:100%;margin-top:20px;position:relative;}
2.自适应宽度元素设置绝对定位：absolute 让其脱离文档流
#content{position:absolute;top:0px;margin-left:200px}
*注意：固定宽度层的高度 > 自适应宽度层的高度