CSS及简单的网页布局

CSS的三大特性：层叠、继承、优先级

CSS层叠性：指多重CSS样式的叠加，是浏览器处理冲突的一个能力，如果一个属性通过两个相同的选择器设置到同一个元素上，这时一个属性就会将另一个属性层叠掉。

CSS继承性：指书写CSS样式时子标签会继承父标签的某些样式，想要设置可继承的属性只需要将它应用与父元素即可。

CSS优先级：出现两个或多个规则应用在同一元素上就会出现优先级问题。

盒子模型：盒子模型、浮动、定位

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，每个矩形都由元素的内容、内边距、边框和外边距组成。

每个盒子除了有它自己的大小和位置外，还影响着其他盒子的大小和位置。

盒子边框（border）

语法：

border: border-width  ||   border-style  ||   border-colo

设置边框样式（border-style）常用属性值如下：

none：没有边框（默认值）

solid：边框为单实线

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

表格的细线边框

table{border-collapse:collapse}

border-collapse:collapse：表示边框合并在一起

圆角边框

语法格式：  border-radius : 左上角  右上角  右下角  左下角;

 

内边距(padding)：指边框与内容之间的距离

padding-top: 上内边距

padding-right: 右内边距

padding-bottom:下内边距

padding-left:  左内边距

外边距（margin：设置外边距会在元素之间创建“空白”这段空白通常不能放置其他内容

margin-top: 上外边距

margin-right: 右外边距

margin-bottom:下外边距

margin-left:  左外边距

取值顺序跟内边距相同

 

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足以下两个条件：

1.必须是块级元素

2.盒子必须定义了宽度

然后给左右的外边距设置为auto就可以使块元素水平居中

清除元素的默认内外边距

*{

 margin：0

padding：0

}

注意：行内元素只有左右内外边距，没有上下内外边距

 

外边距合并

相邻块元素垂直外边距的合并（外边距塌陷）

嵌套块元素垂直外边距合并

解决方案：

1.可以为父元素定义1px的山边框或上内边距

2.可以为父元素添加 overflow：hidden

 

content宽度和高度

使用width和height可以对盒子的大小进行控制，width华人height的属性值可以为不同单位的数值或相对父元素的百分比。

注意：

1.width和height属性仅适用于块级元素，对行内元素无效（img和input除外）

2.计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3.如果一个盒子没有给定宽高或者继承父元素的宽高，则padding不会影响本盒子的大小。

 

盒子模型布局的稳定性

建议按照优先使用 宽(width)其次使用内边距(padding)再次(外边距)

原因：

1.margin会有外边距合并，还有ie6下margin加倍的bug，所以最后使用。

2.padding会影响盒子大小，需要进行加减计算，稍微麻烦，其次使用。

3.width没有问题，所以最先使用。

 

CSS3盒模型

CSS3中通过box-sizing来置顶盒模型即可指定为 content-box border-box

可分为两种情况：

1. box-sizing：content-box 盒子大小为 width+padding+border content-box：此值为其默认值

2.box-sizing：border-box 盒子大小为 width，就是说padding和border是包含到width里面的

 

浮动

普通流(normal flow)

普通流就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思

浮动（float）

浮动最早是用来控制图片的，以便于达到其他元素（特别是文字）实现环绕图片的额效果

浮动详细内幕特性

浮动首先创建包含酷爱的概念，就是说浮动的元素总是找离他最近的父级元素对齐，但是不会超出内边距的范围。

 

未完--------