CSS---盒子模型

CSS盒子模型

盒子模型的概念

• 盒子模型用来存放网页中的各类元素
• 网页设计中内容，如文字、图片等元素，均可是盒子（div嵌套）

形象描述：

盒子模型属性

width属性

宽度：

width：长度值|百分比|auto

最大宽度：

max-width：长度值|百分比|auto

最小宽度：

min-width：长度值|百分比|auto

代码应用：

实现结果：

当最小宽度大于初始设置的宽度值时，最终展现的宽度值为设置的最小宽度值

当最大宽度大于初始设置的宽度值时，最终展现的宽度值为设置的初始宽度值

百分比设置是针对父元素进行百分比的设置

height属性

高度：

height：长度值|百分比|auto

max-height：长度值|百分比|auto

min-height：长度值|百分比|auto

说明：设置块级元素和替换元素的内容高度

代码实现：

实现结果：

使用方式与width相同

max-height 与 min-height 在部分版本浏览器下不兼容

高度与宽度

替代元素应用：

应用结果：

属性总结：

• width 和height 属性设置是内容的高和宽
• width 和height 属性设置对块级元素和替换元素有效
• max 和min 有兼容性问题，IE不支持

border属性

• border-width
• border-color
• border-style

设置边框宽度：

border-width：thin | medium | thick | 长度值

设置边框颜色：

border-color：颜色值|transparent

设置边框类型：

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

代码应用：

实现结果：

边框属性：

4个不一样方向来表示上下左右

表示：

border-[left | right |top | bottom]-width

border-[left | right |top | bottom]-color

border-[left | right |top | bottom]-style

padding属性

设置元素的内容与边框之间的距离（内边距或填充），分四个方向

• padding-top：长度值百分比
• padding-right：长度值百分比
• padding-left：长度值百分比
• padding-bottom：长度值百分比

说明：值不能为负值

简单应用：

应用结果：

内边距属性缩写：

顺序为顺时针顺序

外边距属性

设置元素与元素之间的距离，4个方向

• margin-top：长度值|百分比|auto
• margin-right：长度值|百分比|auto
• margin-bottom：长度值|百分比|auto
• margin-left：长度值|百分比|auto

说明：值能够为负

代码应用：

外边距属性缩写：

盒子模型计算

IE盒子模型

没有doctype 声明，各浏览器按照本身的方式解析盒子 有doctype声明，按照标准盒子模型来解析

盒子模型的应用

• 块级元素，占一行：

<p>、<div>、<h1>~<h6>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>
复制代码

• 行内元素（内联元素），一行显示

<span>、<a>、<em>
复制代码

块级元素与内联元素区别

代码应用

显示结果：

dispaly属性

• inline 元素将显示为内联元素，元素先后没有换行符
• block 元素将显示为块级元素，元素先后会带有换行符
• inline-block 行内块元素，元素呈现为inline，具备block相应特性
• none 此元素不会被显示

块级元素与内联元素的相互转化

代码展现：

显示结果：

注意事项

应用

样式继承关系

样式属性	继承
width,height	不继承块级元素，替换元素
padding	不继承
margin	不继承
border	不继承

说明：对于样式属性，经过设置值为inherit，指定从父元素继承相对属性值 eg：

div{padding：10px;}
div p{padding:inherit;}
复制代码

小demo代码：

效果展现：