CSS 盒模型
元素分类
在 css 中，html 中的标签元素大体被分为三种不同的类型：
- 块状元素
- 内联元素或行内元素
- 内联块状元素
- 常用的块状元素有：
<div> 、<p> 、<h1> ··· <h6> 、<ol> 、<ul> 、<dl> <table> 、<address> 、<blockquote> 、<form> - 常用的内联元素有：
<a> 、<span> 、<br> 、<i> <em> 、<strong> 、<label> 、<q> 、<var> 、<cite> 、<code> - 常用的内联块状元素有：
<img> 、<input>
块级元素
在 html 中 <div> 、<p> 、<h1> 、<form> 、<ul> 和 <li> 是典型的块级元素。可以通过设置 display:block 将元素显示为块级元素。
示例如下：
将内联元素 a 转换为块状元素，使 a 元素具有块状元素特点。
a{
display:block;
}
<a>内联元素变为块状元素</a>
块级元素特点：
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
- 元素的高度、宽度、行高以及顶和底边距都可以进行设置。
- 元素宽度在不设置的情况下和父元素的宽度一致。
内联元素
在 html 中，<span> 、<a> 、<label> 、<strong> 和 <em> 是典型的内联元素或行内（inline）元素。块状元素可以通过 display:inline 将元素设置为内联元素。
示例如下：
将块状元素 div 转换为内联元素，使 div 元素具有内联元素特点。
div{
display:inline;
}
<div>块状元素变成内联元素</div>
内联元素特点：
- 和其他元素都在一行上。
- 元素的高度、宽度及顶部和底部边距不可设置。
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素
在 html 中，<img> 、<input> 标签是典型的内联块状标签。内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。可以通过 display:inline-block 就是将元素设置为内联块状元素。
内联块状元素特点：
- 和其他元素都在一行上；
- 元素的高度、宽度、行高以及顶和底边距都可设置。
盒模型
原理
边框
盒子模型的边框就是围绕着内容及补白的线，可以设置边框的属性。
边框的属性：
- 粗细
- 样式
- 颜色
示例如下：
为 div 设置边框粗细为 2px 、样式为实心的、颜色为红色的边框：
div{
border:2px solid red;
}
<!--border 可以分开写-->\
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
- border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。 - border-color（边框颜色）中的颜色可设置为十六进制颜色。
如：border-color:#888; - border-width（边框宽度）中的宽度也可以设置为：
thin（薄）| medium（中）| thick（厚），一般还是用像素（px）进行设置。
css 样式中允许只为一个方向的边框设置样式：
示例如下：
为 p 标签单独设置下边框，而其它三边都不设置边框样式。
div{border-bottom:1px solid red;}
<!--同样可以实现其它三边(上、右、左)边框的设置：-->
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
宽度和高度
盒模型的宽度和高度是 css 内定义的宽（width）和高（height），指的是填充以里的内容范围。
盒子的宽度，即一个元素实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。同理，一个元素实际高度=上边界+上边框+上填充+内容宽度+下填充+下边框+下边界。
示例如下：
<!--css 代码-->
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
<!--html 代码-->
<body>
<div>文本内容</div>
</body>
则 div 元素的实际宽度度为：10px+1px+20px+200px+20px+1px+10px=262px。
在 chrome 浏览器下选中某元素调用检查功能可查看当前元素盒模型，如下图所示：
填充
元素内容与边框之间可以设置距离，称之为“填充”。填充顺序按照顺时针分别为上、右、下、左。
示例如下：
div{
padding:20px 10px 15px 30px;
}
<!--padding 可以分开写-->
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
<!--如果上、右、下、左的填充都为 10px ，可以简写为-->
div{
padding:10px;
}
<!--如果上下填充一样为 10px ，左右一样为 20px ，可以简写为-->
div{
padding:10px 20px;
}
边界
元素与其它元素之间的距离可以使用边界（margin）来设置。边界顺序按照顺时针分别为上、右、下、左。
示例如下：
div{
margin:20px 10px 15px 30px;
}
<!--margin 可以分开写-->
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
<!--如果上右下左的边界都为 10px ，可以简写为-->
div{ margin:10px;}
<!--如果上下边界一样为10px，左右一样为 20px ，可以简写为-->
div{ margin:10px 20px;}
padding 和 margin的区别：padding 在边框里，margin 在边框外。
1914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
