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

CSS盒子模型

页面布局三大核心：

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

盒子模型

组成

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

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

边框（border）

border: border-width || 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）

简写

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

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

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

外边距（margin）

简写同上

外边距典型应用

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

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;

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

文字阴影（text-shadow）

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