05盒子模型
[目录]
一、盒子模型的概念
- 盒子模型用来“放”网页中的各种元素
- 网页设计中内容，如文字、图片等元素，都可以是盒子（DIV嵌套）
- 网页中盒子模型
二、盒子属性
- 宽度属性
宽度with/最大宽度max-width/最小宽度min-width：长度值/百分比/auto - 高度属性
高度height/最大高度max-height/最小高度min-height：长度值/百分比/auto - 哪些HTML元素可以设置高和宽属性
- 块级元素
- 替换元素：浏览器根据其标签的元素与属性来判断显示的内容<img>、<input>、<textarea>等
- max-height（width）/min-height（width）有兼容性问题，IE不支持
- 边框属性：设置元素边框宽度
border-width:thin|medium|thick|长度值 - 设置元素边框颜色
border-color:颜色/transparent - 设置元素边框样式
border-color:颜色/transparent - 设置元素边框样式
border-style:值
值 |
描述 |
|---|---|
| none | 定义无边框、默认值 |
| hidden | 与none相同，除非在表格元素中解决边框冲突 |
| dotted | 定义点状边框，在大多数浏览器中呈现为实线 |
| dashed | 定义虚线，在大多数浏览器中呈现为实线 |
| solid | 定义实线 |
| double | 定义双线 |
| groove | 定义3D凹槽边框 |
| ridge | 定义3D垄状边框 |
| inset | 定义3D inset 边框 |
| outset | 定义3D outset 边框 |
| inherit | 规定应该从父元素继承边框 |
- 边框缩写
border:宽度 样式 颜色 - 内边距属性
设置元素的内容与边框之间的距离（内边距或填充）分四个方向（上右下左）- padding-方向:长度值|百分比
- 值不能为负
- 内边距属性缩写
padding:值1;//4个方向都为值1
padding:值1 值2;//上下=值1 左右=值2
padding:值1 值2 值3;//上=值1 左右=值2 下=值3
padding:值1 值2 值3 值4;//上=值1 右=值2 下=值3 左=值4
- 外边距属性
设置元素的内容与边框之间的距离（外边距）分四个方向（上右下左）- margin-方向:长度值|百分比
- 值可为负值
- 外边距属性缩写
margin:值1;//4个方向都为值1
margin:值1 值2;//上下=值1 左右=值2
margin:值1 值2 值3;//上=值1 左右=值2 下=值3
margin:值1 值2 值3 值4;//上=值1 右=值2 下=值3 左=值4
- 垂直方向，两个相邻元素都设置外边距，外边距会发生合并，合并后外边距高度=两个发生合并外边距的高度中最大值
- 盒子模型计算
- 宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距
- 高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距
- 如果没有Doctype文档类型声明各浏览器按照自己的方式解析，如果有按照标准盒子模型来解析
- display属性
值 |
描述 |
|---|---|
| inline | 元素将显示为内联元素，元素前后没有换行符 |
| block | 元素将显示为块级元素，元素前后会带有换行符 |
| inline-block | 行内块元素，元素呈现为inline，具有block相应特性 |
| none | 此元素不会被显示 |
