盒子模型——且听风吟720

盒子模型，即用来存放网页各种元素的模块（一般用div的嵌套来实现）

盒子属性值包括：

1. 内容的宽（width）和高（height）
2. 内容和盒子的内边距（padding）
3. 盒子的边框（border）
4. 盒子和相邻的其他盒子之间的距离——外边距（margin）

宽度（width）、高度（height）

1. 可设置的值：长度、百分比、auto
   • 宽度width常设置px/100%（铺满整个页面）
2. 最大值max-(width/height)：
   • 只可比该值小
   • IE6及以下的浏览器不兼容该属性
3. 最小值min-(width/height)：
   • 只可比该值大
   • IE6及以下的浏览器不兼容该属性
4. 冲突时的取值：
   • width/height不在max/mix范围内
     • 比max大，取max
     • 比min小，取min
   • max/min冲突时（二者无交集范围），取min
5. 默认值：
   • width为100%（铺满该页面），等同于设置了auto，默认不继承父元素属性
   • height为内部元素的高度，等同于设置了auto，默认不继承父元素属性
6. 可设置width、height的元素
   • 块级元素
   • 替换元素（根据标签元素和属性判断显示的具体内容），如<img>、<input>、<textarea>

边框（border）

1. 宽度border-width：
   • 英文（thin/medium/thick）
   • 具体长度（px/em等），默认不继承父元素属性
2. 颜色border-color：
   • 颜色（英文、rgb、rgba（a表示透明度，取0-1，0为全透明，1为不透明））
   • 透明transparent
3. 样式border-style：
   • 常用值：solid（实线）、double（双实线）、dotted（点状线）
   • 默认值：none（无边框） ，且默认四边样式一致
4. 修改各个边的独立样式：
   • 在宽度、颜色、样式的中间加上位置
     • border-left-width
5. 简写方式：
   • 四边一样时：
     • width|style|color（宽度|样式|颜色）
   • 四边不同时：
     • 分别给不同位置设置width|style|color
     • 其中width在第一个，后两个可以颠倒

内边距（padding）

盒子和内容之间的距离（设置padding的元素和该元素的子元素之间的距离）

1. 可取值：长度/百分比，值不可以是负，默认不继承父元素属性
2. 可以四个边分别设置
   • padding-位置（top/bottom/left/right）
3. 缩写方法：
   • 1个值，默认四边都为该值
   • 2个值，默认为上下、左右
     • 因为只能找到上和右的值，默认下=上，左=右
   • 3个值，上、右、下
     • 找不到左的值，默认左=右
   • 4个值，上、右、下、左（顺时针顺序，从钟的“零点”开始取值）
     

外边距（margin）

元素之间的距离/子元素和父元素的距离（此时对子元素设置margin）

1. 可取值：长度/百分比，值可以是负，默认不继承父元素属性
2. 可给四边分别设置值（同padding）
3. 缩写方法（同padding）
4. 默认值：
   • 块级元素默认存在margin
   • 在CSS文档最初，将块级元素的margin统一初始化成0

<style>
	*{margin:0;padding:0;}
</style>

5. 使用技巧及注意点
   • 设置margin上下0，左右为auto，可实现子元素相对于父元素水平居中，此时左右的margin会由浏览器自动计算
     
   • 垂直方向相邻元素的margin会合并，当二者取值不同时，取其中较大的一个
     
   • 左右相邻元素的margin是取二者的和来展现的

盒子模型的大小

1. 盒子占用空间的计算方法：
   • 宽度width：
     margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
   • 高度height：
     margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

注：盒子的实际高度是不包括外边距margin的

2. IE的盒子模型大小：
   • 宽度width和高度height不包括外边距margin
     
3. 文档类型声明对盒子模型解析的影响
   • 文档开头有<! DOCTYPE=html>时，按照标准的盒子模型解析
   • 文档开头没有文档类型声明时，按照浏览器自己的方式解析

修改元素的属性——display

1. 取值：
   • inline：将块级元素变成在一行内显示
   • block：将行内元素显示成块级元素，每个元素都在不同的行内
   • inline-block：元素既在一行显示，同时也有块级元素的属性（可以设置宽高）
   • none：不显示该元素
2. 使用技巧：
   • 先让元素不显示（display：none），再通过伪类选择器结合display属性，使得在鼠标悬停时显示元素

<style>
	ul{display:none;}
	div:hover ul{display:inline;}
</style>