盒子模型
盒子模型概念
-
盒子模型用来“放”网页中的各种元素
-
网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套）
宽度属性width
-
宽度：
width:长度值 | 百分比 | auto(自动)
-
最大宽度：
max-width:长度值 | 百分比 | auto(自动)
-
最小宽度：
min-width:长度值 | 百分比 | auto(自动)
高度属性height
-
高度：
height：长度值 | 百分比 | auto
-
最大高度：
max-height：长度值 | 百分比 | auto
-
最小高度：
min-height：长度值 | 百分比 | auto
-
说明：设置块级元素和替换元素的内容高度
哪些元素可设置高和宽属性
-
块级元素
<p> <div> <h1>~<h6> <ul> <li> <ol> <dl> <dt> <dd>等
-
替换元素
浏览器根据其标签的元素与属性来判断显示的具体内容
<img> <input> <textarea>等
-
max-height(width)/min-height(width)有兼容性问题，IE浏览器不支持
边框属性border
边框宽度(border-width)
-
设置元素边框宽度：
border-width:thin | medium | thick | 长度值
边框颜色(border-color)
-
设置元素边框颜色：
border-color:颜色 | transparent(透明)
边框样式(border-style)
边框默认颜色为文本颜色
| 值 | 描述 |
|---|---|
| none | 定义无边框，默认值 |
| hidden | 与none相同，除非在表格元素中解决边框冲突时 |
| dotted | 定义点状边框，在大多数浏览器中呈现为实线 |
| dashed | 定义虚线，在大多数浏览器中呈现为实现 |
| solid | 定义实线 |
| double | 定义双线 |
| groove | 定义3D凹槽边框 |
| ridge | 定义3D垄状边框 |
| inset | 定义3Dinset边框 |
| outset | 定义3Doutset边框 |
| inherit | 规定应该从父元素继承边框样式 |
4个不同方向来表示（上下左右）
-
border-[left | right | top | bottom]-width
-
border-[left | right | top | bottom]-color
-
border-[left | right | top | bottom]-style
属性缩写
-
border:宽度 样式 颜色
-
border-top:宽度 样式 颜色
-
border-left:宽度 样式 颜色
-
border-right:宽度 样式 颜色
-
border-bottom:宽度 样式 颜色
padding填充属性
-
设置元素的内容与边框之间的距离（内边距或填充），分4个方向
-
padding-top:长度值 | 百分比
-
padding-right:长度值 | 百分比
-
padding-bottom:长度值 | 百分比
-
padding-left:长度值 | 百分比
-
说明：值不能为负值
-
盒子在网页中占的空间，不单单与width和height属性有关，还与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外边距属性
-
设置元素的内容与边框之间的距离（外边距），分4个方向
-
margin-top:长度值 | 百分比 | auto
-
margin-right:长度值 | 百分比 | auto
-
margin-bottom:长度值 | 百分比 | auto
-
margin-left:长度值 | 百分比 | auto
-
说明：值可为负值
-
缩写：
-
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
-
-
默认情况下，相应HTML块级元素存在外边距
body、h1~h6、p......
-
声明margin属性，覆盖默认样式
body,h1,h2,h3,h4,h5,h6,p{margin:0;}
-
margin值为auto，实现水平方向居中显示效果
-
由浏览器计算外边距
-
垂直方向，两个相邻元素都设置外边距，外边距会发生合并
-
合并后外边距高度=两个发生合并外边距的高度中的最大值
盒子计算
-
盒子在页面中所占的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距
-
盒子在页面中所占的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距
-
IE盒子模型下，设置的高度和宽度指的是内容的高度加上内边距加上边框和宽度加上内边距加上边框
-
如果没有Doctype文档类型声明，各浏览器按照自己的方式解析
-
如果有Doctype文档类型声明，按照标准盒子模型来解析
display属性
-
inline
元素将显示为内联元素，元素前后没有换行符
-
block
元素将显示为块级元素，元素前后会带有换行符
-
inline-block
行内块元素，元素呈现为inline，具有block相应特性
-
none
此元素不会被显示
样式继承关系
| 样式属性 | 继承 |
|---|---|
| width height | 不继承 块级元素、替换元素 |
| padding | 不继承 |
| margin | 不继承 |
| border | 不继承 |
对于样式属性，通过设置值为inherit，指定从父元素继承相对属性值
例：div{padding:10px;}
div p{padding:inherit;}
overflow属性
-
规定当内容溢出元素边框时如何显示
-
默认值：visible：正常显示
-
hidden：溢出部分隐藏不可见
-
scroll：显示滚动条以便查看溢出部分
