CSS学习笔记6——盒子模型（边框、边距、阴影）

CSS盒子模型

页面布局三大核心：

1. 盒子模型
2. 浮动
3. 定位

盒子模型

组成

封装周围HTML元素，包括：边框、外边距、内边距、实际内容

border 边框 content 内容 padding 内边距 margin 外边距

边框（border）

border: border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

border-style: solid; 实线边框

border-style: dashed; 虚线边框

border-style: dotted; 点线边框

---

边框复合性写法

border: 1px solid red;          //没有顺序

边框分开写法

border-top: 1px solid red;    //只设定上边框

上：top 下：bottom 左：left 右：right

---

表格的细线边框

border-collapse:collapse;

• 表示相邻边框合并在一起

---

边框会影响盒子的实际大小

会额外增加盒子的实际大小

1. 测量盒子大小时，不量边框
2. 测量时包含边框，需要width/height 减去边框宽度

---

内边距（padding）

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

简写

值的个数	表达意思
padding:5px;	1个值，表示上下左右都5像素的内边距
padding:5px 10px;	2个值，表示上下5内边距，左右10内边距
padding:5px 10px 20px;	3个值，表示上内边距5px 左右内边距10px 下内边距20px
padding:5px 10px 20px 30px;	4个值，上5像素，右10像素，下20像素，左30像素 顺时针

内边距会影响盒子的实际大小

用width/height减去多出来的内边距大小

• 若盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

---

外边距（margin）

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

简写同上

外边距典型应用

外边距可以让块级盒子水平居中，条件：

1. 盒子必须指定了宽度（width）
2. 盒子左右的外边距都设置为auto

.header {width:960px; margin:0 auto;}  //给块级元素水平居中

行内元素/行内块元素水平居中给其父元素添加 text-align:center 即可

---

外边距合并

嵌套块元素垂直外边距塌陷

对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案

• 可以为父元素定义上边框
• 可以为父元素定义上内边框
• 可以为父元素添加 overflow:hidden

清除内外边距

网页元素很多有默认内外边距，不同浏览器默认不一致。因此布局前要清除网页元素的内外边距

* {
	padding:0;    <!-- 清除内边距 -->
	margin:0;     <!-- 清除外边距 -->
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距。但转换为块级和行内块元素就可以了

去掉li前面的项目符号（小圆点）

list-style:none;

---

圆角边框

border-radius:length;

• radius 半径（圆的半径）
• 参数值可以为数值或百分比
• 正方形：设置一个圆，数值是高/宽度的一半，或50%
• 矩形：设置高度的一半就可做圆角矩形
• 该属性可以简写，可以跟四个值：左上角，右上角，右下角，左下角（顺时针）
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius

---

盒子阴影（box-shadow）

box-shadow:h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必须。水平阴影的位置。允许负值
v-shadow	必须。垂直阴影的位置。允许负值
blur	模糊距离
spread	阴影的尺寸
color	阴影的颜色（参阅CSS颜色值）（0，0，0，.3）
inset	将外部阴影（outset）改为内部阴影

• 默认外阴影
• 盒子阴影不占用空间

---

文字阴影（text-shadow）

text-shadow: h-shadow v-shadow blur color

值	描述
h-shadow	必须。水平阴影的位置。允许负值
v-shadow	必须。垂直阴影的位置。允许负值
blur	模糊的距离
color	阴影的颜色