使用盒模型
1、为元素应用内边距
应用内边距会在元素内容和边框之间添加空白。我们可以为内容盒的每个边界单独设置内边距，或者使用 padding 简写属性在一条声明中设置所有的值。
| 属性 | 说明 | 值 |
|---|---|---|
| padding-top | 为顶边设置内边距 | 长度值或者百分数 |
| paddig-right | 为右边设置内边距 | 长度值或者百分数 |
| padding-bottom | 为底边设置内边距 | 长度值或者百分数 |
| padding-left | 为左边设置内边距 | 长度值或者百分数 |
| padding | 简写属性，在一条声明中设置所有边的内边距 | 1~4 个长度值或者百分数 |
如果使用百分数值指定内边距，百分数总是跟包含块的宽度有关，高度不考虑在内。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
border: 10px double black;
background-color: lightgray;
background-clip: content-box;
padding-top: 0.5em;
padding-bottom: 0.3em;
padding-right: 0.8em;
padding-left: 0.6em;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
</body>
</html>
此代码为盒子的每条边设置了不同的内边距，此外还设置了 background-clip 属性，因此内边距区域不会显示背景颜色，这样可以突出内边距效果。
我们也可以使用 padding 简写属性在一条声明中为四条边设置内边距。可以为这个属性指定 1~4 值。如果指定 4 个值，分别代表了顶边、右边、左边和底边。如果省略一个值，最佳搭配如下：省略左边的值，默认使用右边的值；省略底边的值，默认使用顶边的值。如果只给一个值，则四条边的内边距都是这个值。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
border: 10px solid black;
background: lightgray;
border-radius: 1em 4em 1em 4em;
padding: 5px 25px 5px 40px;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
</body>
</html>
2、为元素应用外边距
外边距是元素边框和页面上围绕在它周围的所有东西之间的空白区域。围绕在它周围的东西包括其他元素和它的父元素。
| 属性 | 说明 | 值 |
|---|---|---|
| margin-top | 为顶边设置外边距 | 长度值或者百分数 |
| margin-right | 为右边设置外边距 | 长度值或者百分数 |
| margin-bottom | 为底边设置外边距 | 长度值或者百分数 |
| margin-left | 为左边设置外边距 | 长度值或者百分数 |
| margin | 简写属性，在一条声明中设置所有边的内边距 | 1~4 个长度值或者百分数 |
跟内边距相似，即使是为顶边和底边应用内边距，百分数值是和包含块的宽度相关的。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
img {
border: 4px solid black;
background: lightgray;
padding: 4px;
margin:4px 20px;
}
</style>
</head>
<body>
<img src="banana-small.png" alt="small banana">
<img src="banana-small.png" alt="small banana">
</body>
</html>
外边距有时候不显示，即使你设置了某个外边距属性的值。例如，为 display 属性的值设置为 inline 的元素应用外边距的时候，顶边和底边的外边距就不会显示。
3、控制元素的尺寸
浏览器会基于页面上内容的流设置元素的尺寸。
| 属性 | 说明 | 值 |
|---|---|---|
| width height | 设置元素的宽度和高度 | auto、长度值或者百分数 |
| min-width min-height | 为元素设置最小可接受宽度和高度 | auto、长度值或者百分数 |
| max-width max-height | 为元素设置最大可接受宽度和高度 | auto、长度值或者百分数 |
| box-sizing | 设置尺寸调整应用到元素盒子的哪一部分 | content-box、padding-box、border-box、margin-box |
百分数是根据包含块的宽度来计算的（处理元素的高度也是根据这个宽度来计算的）。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
div {
width: 75%;
height: 100px;
border: thin solid black;
}
img {
background: lightgray;
border: 4px solid black;
margin: 2px;
height: 50%;
}
#first {
box-sizing: border-box;
width: 50%;
}
#second {
box-sizing: content-box;
}
</style>
</head>
<body>
<div>
<img id="first" src="banana-small.png" alt="small banana">
<img id="second" src="banana-small.png" alt="small banana">
</div>
</body>
</html>
div 元素是 body 元素的子元素。当我将 div 元素的宽度表示为 75% 的时候，我的意思是告诉浏览器将 div 的宽度设置为包含块（此处是 body 内容盒）宽度的 75%，而不论其具体值是多少。如果用户调整了浏览器窗口，body 元素也会相应调整，以确保 div 元素的宽度总是 body 内容盒宽度的 75%。
可以看到 div 元素总是 body 元素的 75%，而 body 元素填充了整个浏览器窗口。我将 div 元素的高度指定为 100px，这是个绝对值，不会因为包含块调整而改变。
代码中对 img 元素也进行了相似的设置。第一个 img 元素的宽度值表示为包含块宽度的 50%，即图像总是调整为 div 元素宽度的 50%，不管图像的高宽比是否被保留。默认情况下，宽度值会根据高度值调整，因此会保留图像原始的高宽比。
3.1、设置一定尺寸的盒子
上面代码中，两个 img 元素设置了相同的高度值（50%），但两个图片的高度在屏幕上看起来不一样。这是因为我使用了 box-sizing 属性改变了其中一个元素应用尺寸属性的区域。
默认情况下，宽度和高度是需要计算的，之后才能应用到元素的内容盒。这里说的是如果你设置了元素的高度属性是 100px，那么屏幕上的真实高度就是 100px，这也算上了顶边和底边的内边距、边框和外边距的值。box-sizing 属性允许你指定尺寸样式应用到元素盒子的具体区域，也就是说你不需要自己计算某些值了。
3.2、设置最小和最大尺寸
可以使用最小和最大相关属性为浏览器调整元素尺寸设置一定的限制。这让浏览器对于如何应用尺寸调整属性有了一定的自主权。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
img {
background: lightgray;
border: 4px solid black;
margin: 2px;
box-sizing: border-box;
min-width: 100px;
width:50%;
max-width: 200px;
}
</style>
</head>
<body>
<img src="banana-small.png" alt="small banana">
</body>
</html>
我为一个 img 元素应用了 min-width 和 max-width 属性，并将其初始宽度设置为包含块的 50%。这样浏览器就有了一定的灵活性来调整图像尺寸，使其在代码中定义的最大尺寸和最小尺寸范围内保持 50% 的关系。
4、处理溢出内容
内容太大，无法完全显示在元素的内容盒中。这时的默认处理方式是内容溢出，并继续显示。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
width: 200px;
height: 100px;
border: medium double black;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
</body>
</html>
代码中为 p 元素设置了绝对值。
我们可以使用 overflow 属性改变这种行为：
| 属性 | 说明 | 值 |
|---|---|---|
| overflow-x overflow-y | 设置水平方向和垂直方向的溢出方式 | |
| overflow | 简写属性 | overflow overflow-x overflow-y |
可能的取值：
| 值 | 说明 |
|---|---|
| auto | 浏览器自行处理溢出内容。通常，如果内容被剪掉就显示滚动条，否则就不显示（这是相较 scroll 值来说的，设置该值后，无论内容是否溢出都有滚动条） |
| hidden | 多余的部分直接剪掉，只显示内容盒子里面的内容 |
| no-content | 如果内容无法全部显示，就直接移除 |
| no-display | 如果内容无法全部显示，就隐藏所有内容 |
| scroll | 为了让用户看到所有内容，浏览器会添加滚动条。通常是滚动条，不过这个值跟具体的平台和浏览器相关。即使内容没有溢出也能看到滚动条 |
| visible | 默认值，不管是否溢出内容盒，都显示元素内容 |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
width: 200px;
height: 100px;
border: medium double black;
}
#first {overflow: hidden;}
#second { overflow: scroll;}
</style>
</head>
<body>
<p id="first">
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<p id="second">
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
</body>
</html>
5、控制元素的可见性
我们可以使用 visibility 属性控制元素的可见性。
| 属性 | 说明 | 值 |
|---|---|---|
| visibility | 设置元素的可见性 | cllapse hidde visible |
| 值 | 说明 |
|---|---|
| cllapse | 元素不可见，且在页面布局中不占据空间 |
| hidden | 元素不可见，但在页面布局中占据空间 |
| visible | 默认值，元素在页面上可见 |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
tr > th { text-align:left; background:gray; color:white}
tr > th:only-of-type {text-align:right; background: lightgray; color:gray}
</style>
</head>
<body>
<table>
<tr>
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
</tr>
<tr id="firstchoice">
<th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>
</tr>
</table>
<p>
<button>Visible</button>
<button>Collapse</button>
<button>Hidden</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
document.getElementById("firstchoice").style.visibility =
e.target.innerHTML;
};
}
</script>
</body>
</html>
6、设置元素的盒类型
display 属性提供了一种改变元素盒类型的方式，这相应会改变元素在页面上的布局方式。
| 值 | 说明 |
|---|---|
| inline | 盒子显示为文本行中的字 |
| block | 盒子显示为段落 |
| inline-block | 盒子显示为文本行 |
| list-item | 盒子显示为列表项，通常具有项目符号或者其他标记符（如索引号） |
| run-in | 盒子类型取决于周围的元素 |
| compact | 盒子的类型为块或者标记盒 |
| flexbox | 这个值跟弹性盒布局相关 |
| table inline-table table-row-group table-header-group table-row table-column-group table-column table-cell table-caption | 这些值跟表格中的元素布局相关 |
| ruby ruby-base ruby-text ruby-base-group ruby-text-group | 这些值跟带 ruby 注释的文本布局有关 |
| none | 元素不可见，且在页面布局中不占空间 |
6.1、认识块级元素
将 display 属性设置为 block 值会创建一个块级元素。块级元素会在垂直方向跟周围元素有所区别。通常在元素前后放置换行符也能达到这样的效果，在元素和周围元素之间制造分割的感觉，就像文本中的段落。p 元素表示段落，其默认样式约定中就包括 display 属性取 block 值。不过，block 值可应用到所有元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {border: medium solid black}
span {
display: block;
border: medium double black;
margin: 2px;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<p>
One of the most interesting aspects of fruit is the variety available in
each country. <span>I live near London</span>, in an area which is known for
its apples. When travelling in Asia, I was struck by how many different
kinds of banana were available - many of which had unique flavours and
which were only avaiable within a small region.
</p>
</body>
</html>
第一个是 p 元素，它的默认样式约定中就为 display 属性使用了 block 值。当然，我也希望解释清楚 display 属性的 block 值可以应用到任意元素，因此代码中为 span 元素显示设置了 display 属性为 block 值。
6.2、认识行内元素
将 display 属性设置为 inline 值会创建一个行内元素，它在视觉上跟周围内容的显示没有区别。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
display: inline;
}
span {
display: inline;
border: medium double black;
margin: 2em;
width: 10em;
height: 2em;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<p>
One of the most interesting aspects of fruit is the variety available in
each country. <span>I live near London</span>, in an area which is known for
its apples. When travelling in Asia, I was struck by how many different
kinds of banana were available - many of which had unique flavours and
which were only avaiable within a small region.
</p>
</body>
</html>
p 元素和 span 元素中的文本跟剩余文本没有分开，都显示在一起。
6.3、认识行内-块级元素
将 display 属性设置为 inline-block 值会创建一个其盒子混合了块和行内特征的元素。盒子整体上作为行内元素显示，这意味着垂直方向上该元素和周围的内容并排显示，没有区别。但盒子内部作为块元素显示，这样，width、hegiht 和 margin 属性都能应用到盒子上。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
display: inline;
}
span {
display: inline-block;
border: medium double black;
margin: 2em;
width: 10em;
height: 2em;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<p>
One of the most interesting aspects of fruit is the variety available in
each country. <span>I live near London</span>, in an area which is known for
its apples. When travelling in Asia, I was struck by how many different
kinds of banana were available - many of which had unique flavours and
which were only avaiable within a small region.
</p>
</body>
</html>
6.4、认识插入元素
display 属性设置为 run-in 值会创建一个这样的元素：其盒子类型取决于周围元素。通常，浏览器必须评估以下三种情况：
- 如果插入元素包括一个 display 属性值为 block 的元素，那么插入元素就是块级元素；
- 如果插入元素的相邻兄弟元素是块级元素，那么插入元素就是兄弟元素中的第一个行内元素；
- 其他情况下，插入元素均作为块级元素对待。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
display: block;
}
span {
display: run-in;
border: medium double black;
}
</style>
</head>
<body>
<span>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone.
</span>
<p>
By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
</body>
</html>
如果相邻兄弟元素不是块级元素，那么插入元素作为块级元素处理。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
display: inline;
}
span {
display: run-in;
border: medium double black;
}
</style>
</head>
<body>
<span>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone.
</span>
<p>
By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
</body>
</html>
6.5、隐藏元素
将 display 属性设置为 none 值就是告诉浏览器不要为元素创建任何类型的盒子，也就是说元素没有后代元素。这时元素在页面布局中不占据任何空间。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<p id="toggle">
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<p>
One of the most interesting aspects of fruit is the variety available in
each country. <span>I live near London</span>, in an area which is known for
its apples. When travelling in Asia, I was struck by how many different
kinds of banana were available - many of which had unique flavours and
which were only avaiable within a small region.
</p>
<p>
<button>Block</button>
<button>None</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
document.getElementById("toggle").style.display=
e.target.innerHTML;
};
}
</script>
</body>
</html>
7、创建浮动盒
可以使用 float 属性创建浮动盒，浮动盒会将元素的左边界或者右边界移动到包含块或另一个浮动盒的边界。
| 属性 | 说明 | 值 |
|---|---|---|
| float | 设置元素的浮动样式 | left right none |
| 值 | 说明 |
|---|---|
| left | 移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界 |
| right | 移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的左边界 |
| none | 元素位置固定 |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
p.toggle {
float:left;
border: medium double black;
width: 40%;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<p class="toggle">
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<p class="toggle">
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<p>
When travelling in Asia, I was struck by how many different
kinds of banana were available - many of which had unique flavours and
which were only avaiable within a small region.
</p>
<p>
<button>Left</button>
<button>Right</button>
<button>None</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
var elements = document.getElementsByClassName("toggle");
for (var j = 0; j < elements.length; j++) {
elements[j].style.cssFloat = e.target.innerHTML;
}
};
}
</script>
</body>
</html>
定义了四个 p 元素，其中前两个元素的 float 属性设置为了 left。这意味着这两个 p 元素要被移动到包含块的左边界，或者另一个浮动元素的右边界。因为要移动两个元素，第一个会被移动到包含块的左边界，而第二个会紧靠第一个。
元素内容的剩余部分流式环绕在浮动元素的周围。如果按下 Right 按钮，元素会移动到包含块的右边界。注意元素呈现的顺序：文档中定义的第一个 p 元素会在最右边。
最后一个按钮 None 通过将 float 属性的值设置为 none 来禁用浮动效果。这恢复了元素盒的默认呈现效果。p 元素默认为块级元素。
7.1、阻止浮动元素堆叠
如果设置了多个浮动元素，默认情况下，它们会一个挨着一个地堆叠在一起。使用 clear 属性可以阻止出现这种情况。clear 属性可以指定浮动元素的一个边界或者两个边界不能挨着另一个浮动元素。
| 属性 | 说明 | 值 |
|---|---|---|
| clear | 设置元素的左边界、右边界或左右两个边界不允许出现浮动元素 | left right both none |
| 值 | 说明 |
|---|---|
| left | 元素的左边界不能挨着另一个浮动元素 |
| right | 元素的右边界不能挨着另一个浮动元素 |
| both | 元素的左右边界都不能挨着浮动元素 |
| none | 元素的左右边界都可以挨着浮动元素 |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
p.toggle {
float:left;
border: medium double black;
width: 40%;
margin: 2px;
padding: 2px;
}
p.cleared {
clear:left;
}
</style>
</head>
<body>
<p class="toggle">
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<p class="toggle cleared">
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<p>
When travelling in Asia, I was struck by how many different
kinds of banana were available - many of which had unique flavours and
which were only avaiable within a small region.
</p>
<p>
<button>Left</button>
<button>Right</button>
<button>None</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
var elements = document.getElementsByClassName("toggle");
for (var j = 0; j < elements.length; j++) {
elements[j].style.cssFloat = e.target.innerHTML;
}
};
}
</script>
</body>
</html>
为上一个代码的简单扩展，只是添加了一个新的样式，为第二个 p 元素清除了左边界的浮动元素。
第二个 p 元素的左边界不允许挨着另一个浮动元素，因此浏览器将这个元素移到了页面下方。元素的右边界没有清除，也就是说如果你将两个 p 元素的 float 属性设置为 right，它们在页面上还是会挨着。
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
