HTML/CSS学习汇总（6）
CSS：盒模型
用width和height属性设置盒模型大小，单位可以是px,em或%：
.navigation {
height: 320px;
width: 100%;
}
用min-width和max-width，min-height和max-height设置盒模型的最大最小值，用overflow属性对超出盒模型的内容进行隐藏或滚动处理：
p {
min-height: 150px;
max-height: 300px;
min-width: 300px;
max-width: 600px;
overflow: scroll;
}
scroll为滚动，hidden为隐藏。
用border-style属性设置边框样式，它的值有：
- solid
- dashed
- dotted
- double
- groove
- inset
- outset
- ridge
- hidden or none
用border-width设置边框宽度，它的值也可以是thin,medium,thick：
p {
border-style: solid;
border-width: 5px;
}
设置每条边的宽度：
p {
border-style: solid;
border-width: 3px 1px 2px 1px;
}
按顺时针排序，分别是上（3px），右（1px），下（2px），左（1px）
只设置一条边的宽度：
p {
border-style: solid;
border-left-width: 4px;
}
用border-color属性设置边框颜色，值可以是rgb或16进制：
div.container {
border-style: solid;
border-width: 3px;
border-color: rgb(22, 77, 100);
}
当设置border-width,border-style,border-color时，可以使用border属性简写：
div.container {
border: 3px solid rgb(22, 77, 100);
}
最好按width-style-color顺序。
用border-radius设置弧形边框：
div.container {
border: 3px solid rgb(22, 77, 100);
border-radius: 5px;
}
用padding属性设置内容和边框的间隙：
p {
border: 3px solid #A2D3F4;
padding: 10px;
}
每边的间隙都可以设置，同样按顺时针排序：
p {
border: 3px solid #XXXXXX;
padding: 5px 10px 5px 10px;
}
例子中上下间隙一致，左右间隙一致，可以简写成：
p {
padding: 5px 10px;
}
也可只设置一边的间隙：
p {
border: 3px solid #2D3FA3;
padding-bottom: 10px;
}
用margin属性设置边框与边框外部的间隙，设置每条边的写法同padding：
p {
border: 1px solid #23AD44;
margin: 20px;
}
可将margin的值设为auto来使盒模型居中，但必须设置盒模型的宽度小于页面body：
div.headline {
width: 400px;
margin: auto;
}
通常，页面的padding和margin会有默认值，开发人员会将它重置：
* {
margin: 0;
padding: 0;
}
用display属性可以改变元素的默认行为，以此来实现理想的页面布局。它的值有：
- inline - causes block-level elements (like a div) to behave like an
inline element (like a link). - block - causes inline elements (like a link) to behave like a block
element (like a div). - inline-block - causes block-level elements to behave like an inline
element, but retain the features of a block-level element. - none - removes an element from view. The rest of the web page will
act as if the element does not exist.
比较常见的是用display来创建列表项的导航条：
li {
display: inline;
}
用visibility属性设置元素是否可见：
.future {
visibility: hidden;
}
hidden为隐藏，visible为可见。
与display：none的区别是，display：none会将元素的所有东西移除，包括空格，而visibility会保留空格，只隐藏元素内容。
设置盒模型的大小时，会有一个尴尬的限制：
h1 {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
}
在这个盒模型中，它的padding和border-width会影响盒子的大小，10px的内边距将盒子的高度提到了320px，宽度220px，1px的边框粗细又将它变成321px，221px。
我们可以通过改变box-sizing属性来打破这个限制，就如font-weight有个默认值为normal，box-sizing的默认值为content-box，这会使盒模型的大小随内边距改变。只要将它改成border-box，就能保证盒模型的大小不受影响：
* {
box-sizing: border-box;
}