CSS入门篇（第三篇，盒子模型）

百度不在便捷，图片全部失效请多包涵。

前言

在前一章节，我们讲述了CSS字体样式和文本样式，本篇的内容要讲述盒子模型，盒子模型在CSS里是一个重点，请细新理解。后续还会有JS 的篇章。
CSS样式无法展示请自行测试。

1.盒子模型的感念。

说到盒子我们就会想到快递的包装盒和物品盒子。
如图片: 我们已带戒指的小盒子为例：

小红框就是为主
1.浅蓝色内区域是 内容（content） 部分，可以理解成生活中的物品。
2.我们向外看，有黄线画的区域是 内边距（padding） 部分，可以理解成物品外的保护棉或者泡沫。
3.红色框则是边框（border），也就是显示生活中的盒子。
4.蓝色划线则是外边距（margin），可以理解成小盒子与大盒子之间的距离。

宽高的值是内容加内边距和边框。
宽高表

属性	解释	值
width	宽度属性	长度值|百分比|auto
max-width	最大宽度属性	长度值|百分比|auto
min-width	最小宽度属性	长度值|百分比|auto
height	高度属性	长度值|百分比|auto
max-height	最大高度属性	长度值|百分比|auto
min-height	最小高度属性	长度值|百分比|auto

盒子表

属性	解释	值	单边值写法	多值用法
content	内容	参考：http://www.w3school.com.cn/cssref/pr_gen_content.asp	----	----
border	边框	请看2.2内容	----	----
padding	内边距	长度值|百分比	padding-边的方向:	（看多值表）注：单边写法没有多值
margin	外边距	长度值|百分比	padding-边的方向:	（看多值表）注：单边写法没有多值

边框样式表

属性	解释	值	单边值写法
border-width	边框宽（厚度）	thin（薄） ，medium（正常），thick（厚）长度值	border-边的方向-width:
border-color	边框颜色	RGB值，RGBA值等	border-边的方向-color:
border-style	边框样式	值 意 none 无边框（默认） hidden 与none相同。除非在表格元素中解决边框冲突时。 dotted 定义点状边框。在大多数浏览器中呈现为实现 dashed 定义虚线。在大多数浏览器中呈现为实现 solid 定义实线 double 定义双实线 groove 定义3D 凹槽边框 ridge 定义3D 垄状边框 inset 定义3D inset边框 outset 定义3D outset边抗 inherit 规定应该从父元素继承边框样式	border-边的方向-style:
border	外边框样式的缩写	border:宽度 样式 颜色;	border-边的方向:

边的方向表（不是单独属性 配合有单边值属性使用）

属性	意
left	左边
right	右边
top	上边
bottom	下边

多值表(只对本章内容荣中的外边距和内边距)

一个值	两个值	三个值	四个值
属性:值1; ( 4个方向都是值1)	属性:值1 值2; (上下=值1，左右=值2)	属性:值1 值2 值3; (上=值1，左右=值2，下=值3)	属性:值1 值2 值3 值4; ( 上=值1，右=值2，下=值3，左=值4)

2. 盒子的属性

2.1 width属性（宽度属性）和 height属性（高度属性）

宽度：
width:长度值|百分比|auto
(ie6无效)最大宽度：
max-width:长度值|百分比|auto
(ie6无效)最小宽度：
min-width:长度值|百分比|auto

高度：
height:长度值|百分比|auto
(ie6无效)最大高度：
max-height:长度值|百分比|auto
(ie6无效)最小高度：
min-height:长度值|百分比|auto

auto是自适应，高宽设置的是内容的高宽、
那些标签能设置高宽属性
1.块级元素
2.替换元素（如img ）

2.2边框

边框宽度	border-width
边框颜色	border-color
边框的样式	border-style

2.2.1 border-width属性（边框宽度）

语法

border-width:thin|medium|thick|长度

属性值	效果
thin	窄边框
medium	中等边框
thick	厚边框
长度值	px，em

2.2.2 border-color属性（边框颜色）

语法

border-color:RGB值|RGBA值

RGBA值

2.2.3 border-style属性（边框样式）

语法

border-style:none; 默认样式

none	无边框（默认）
hidden	与none相同。除非在表格元素中解决边框冲突时。
dotted	定义点状边框。在大多数浏览器中呈现为实现
dashed	定义虚线。在大多数浏览器中呈现为实现
solid	定义实线
double	定义双实线
groove	定义3D 凹槽边框
ridge	定义3D 垄状边框
inset	定义3D inset边框
outset	定义3D outset边抗
inherit	规定应该从父元素继承边框样式。

2.2.4 如何设置 单个边框样式

值	意
left	左
right	右
top	头
bottom	底

语法

边框宽度
border-left-width:5px;
border-right-width:10px;
border-top-width:15px;
border-bottom-width:20px;
边框颜色
border-left-color:#f00;
border-right-color:#0f0;
border-top-color:#00f;
border-bottom-color:#ff0;
边框样式
border-left-style:solid; 实线
border-right-color:dashed;虚线
border-top-color:double;双实线
border-bottom-color:dotted;点状线

2.2.5 边框样式的缩写

语法

border:宽度 样式 颜色;
不同方向的设置
border-left:宽度 样式 颜色;
border-right:宽度 样式 颜色;
border-top:宽度 样式 颜色;
border-bottom:宽度 样式 颜色;
如：
border:5px solid #f00;

2.2.6 padding属性 （内边距）

语法

padding:长度值|百分比;
不同方向的设置
padding-left:长度值|百分比;
padding-right:长度值|百分比;
padding-top:长度值|百分比;
padding-bottom:长度值|百分比;
多值含义：
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

注：不能为负值

2.2.7 margin属性 （外边距）

语法

margin:长度值|百分比;
不同方向的设置
margin-left:长度值|百分比;
margin-right:长度值|百分比;
margin-top:长度值|百分比;
margin-bottom:长度值|百分比;
多值含义：
margin:值1;// 4个方向都是值1
margin:值1 值2;// 上下=值1，左右=值2
margin:值1 值2 值3;// 上=值1，左右=值2，下=值3
margin:值1 值2 值3 值4;// 上=值1，右=值2，下=值3，左=值4


margin:auto;居中

注：可以为负值

两个相邻的元素外边距合并，合并值为外边距最大的值。

1.默认情况下，相应HTML块级标签存在外边距。
2.声明margin属性，覆盖默认样式。

bady,h1,h2,h3,h4,h5,h6,p{
margin:0px;
}

2.2.7 盒子模型计算。

盒子的宽度
内容宽度+左内边框宽度+右内边框宽度+左边框宽度+右边框宽度+左外边框宽度+右外边框宽度=盒子总宽度
盒子的高度
内容高度+下内边框宽度+上内边框宽度+下边框宽度+上边框宽度+下外边框宽度+上外边框宽度=盒子总宽度

正常盒子模型
高宽设置的是内容高宽度。
IE盒子模型
高宽设置的是内容高宽加内边距的高宽度。

文件声明后 浏览器使用标准盒子模型
!DOCTYPE HTML

3.display属性

块级元素和内联元素的转换。
inline值：元素奖显示为内联元素，元素前后没有换行符。
block值：元素将显示为块级元素，元素前后会带有换行符。
inline-block值： 行内块元素，元素呈现为inline，具有block相应特性。
none：此元素不会被显示。
display属性更多

---

4.总结

本篇我们讲述了盒模型和display属性。
如本文章描述有误请尽快联系博主！感谢您的阅读与帮助！