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来创建列表项的导航条：
<ul>
<li>Home</li>
<li>Products</li>
<li>Settings</li>
<li>Inbox</li>
</ul>

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;
}