网页中盒子模型
盒子模型的概念
• 盒子模型用来“放”网页中的各种元素。
• 网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套）
哪些HTML元素可设置高和宽属性
• 块级元素
<p>、<div> 、 <h1> ~ <h6> 、<ul> 、<li> 、<ol>
<dl> 、<dt> 、<dd>等
• 替换元素
<img>、<input>、<textarea>等
HTML标签分类
• 块级标签：占据一行，换行。
• 行内标签：在一行，不换行。
<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>
<h1>~<h6>、<p>、<form>、<hr>……
非替换元素：<b>、<em>、<a>、<span>……
替换元素：<img>、<input>、<textarea>……
边框属性
• 边框宽度（border-width）
• 边框颜色（border-color）
• 边框样式 ( border-style）
4个方向来表示（上、下、左、右）
设置元素边框宽度
border-width : thin | medium | thick | 长度值
设置元素边框颜色
border-color ： 颜色 | transparent
设置元素边框样式
border-style : 值 | none | hidden
值 描述
none 定义无边框。默认值
hidden 与 “none” 相同。除非在表格元素中解决边框冲突时
dotted 定义点状边框。在大多数浏览器中呈现为实线
dashed 定义虚线。在大多数浏览器中呈现为实线
solid 定义实线
double 定义双线
groove 定义 3D 凹槽边框
ridge 定义 3D 垄状边框
inset 定义 3D inset 边框
outset 定义 3D outset 边框
inherit 规定应该从父元素继承边框样式。
不同方向表示：
border-[left | right | top | bottom]-width
border-[left | right | top | bottom]-color
border-[left | right | top | bottom]-style
边框缩写：
border : [宽度] | [样式] | [颜色]
不同方向：
border-top : [宽度] | [样式] | [颜色]
border-left : [宽度] | [样式] | [颜色]
border-right : [宽度] | [样式] | [颜色]
border-bottom ：[宽度] | [样式] | [颜色]
内边距属性
设置元素的内容与边框之间的距离（内边距或填充）,分4个方向
（上、右、下、左）
– padding-top : 长度值 | 百分比
– padding-right :长度值 | 百分比
– padding-bottom :长度值 | 百分比
– padding-left :长度值 | 百分比
说明：值不能为负值
内边距属性缩写
padding : 值1； //4个方向都为值1
padding : 值1 值2 ; // 上下=值1，左右=值2
padding : 值1 值2 值3；// 上=值1，左右=值2，下=值3
padding : 值1 值2 值3 值4； // 上=值1，右=值2，下=值3,左=值2
外边距属性
设置元素与元素之间的距离（外边距）, 4个方向（上、右、下、左）
– margin-top : 长度值 | 百分比 | auto
– margin-right : 长度值 | 百分比 | auto
– margin-bottom : 长度值 | 百分比 | auto
– margin-left : 长度值 | 百分比 | auto
说明：值可为负值
• 默认情况下，相应HTML块级元素存在外边距
body、h1~h6、p……
• 声明margin属性，覆盖默认样式
body,h1,h2,h3,h4,h5,h6,p{ margin:0; }
• margin值为auto , 实现水平方向居中显示效果
• 由浏览器计算外边距
• 垂直方向，两个相邻元素都设置外边距，外边距会发生合并
• 合并后外边距高度=两个发生合并外边距的高度中最大值
外边距属性缩写
设置元素与元素之间的距离（外边距）, 4个方向（上、右、下、左）
margin : 值1； //4个方向都为值1
margin : 值1 值2 ; // 上下=值1，左右=值2
margin : 值1 值2 值3；// 上=值1，左右=值2，下=值3
margin : 值1 值2 值3 值4； // 上=值1，右=值2，下=值3,左=值2
HTML元素分类
• 块级元素，占一行
<p>、<div> 、 <h1> ~ <h6> 、<ul> 、<li> 、<ol>
<dl> 、<dt> 、<dd>等
• 行内元素（内联元素），一行显示
<span>、<a>、<em>等
display属性
• inline
元素将显示为内联元素，元素前后没有换行符
• block
元素将显示为块级元素 , 元素前后会带有换行符
• inline-block
行内块元素，元素呈现为inline，具有block相应特性
• none
此元素不会被显示
文章参考于慕课网课程
