CSS盒子模型

目录

• 盒子模型组成
• 边框（border）
• 内边距（padding）
• 外边距（margin）
  • 块级盒子水平居中对齐
  • 嵌套块元素垂直外边距的坍塌
  • 清除内外边距
• 圆角边框
• 盒子阴影
• 文字阴影

盒子模型组成

盒子模型就是吧HTML页面中的布局元素看作是一个矩形盒子，也就是一个承装内容的容器。

CSS盒子模型的本质就是一个盒子，封装周围的HTML元素，它包括：边距(border)、外边距(margin)、内边距(padding)和实际内容(content)。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

边框（border）

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细、边框样式、边框颜色。

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框样式
border-color	边框颜色
border	复合写法，没有固定顺序
border-top	上边框复合写法
border-bottom	下边框复合写法
border-right	右边框复合写法
border-left	左边框复合写法
border-collapse	合并相邻的边框

border-style

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框
• groove - 定义 3D 坡口边框。效果取决于 border-color 值
• ridge - 定义 3D 脊线边框。效果取决于 border-color 值
• inset - 定义 3D inset 边框。效果取决于 border-color 值
• outset - 定义 3D outset 边框。效果取决于 border-color 值
• none - 定义无边框
• hidden - 定义隐藏边框

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

边框会额外增加盒子的实际大小。因此我们有两种解决方案：

1. 测量盒子的大小的时候，不测量边框。
2. 如果测量的时候包含了边框，则需要width/height减去边框宽度。

内边距（padding）

padding 用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距
padding：5px	一个值，上下左右内边距都有5像素
padding：5px 10px	两个值，上下内边距是5像素，左右内边距是10像素
padding：5px 10px 20px	三个值，上内边距5像素，左右内边距10像素 下内边距20像素
padding：5px 10px 20px 30px	四个值，上5像素 右10像素 下20像素 左30像素 顺时针

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

当我们给盒子指定 padding 值后，发生了两件事：

1. 内容和边框有了距离，添加了内边距。
2. padding 影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。

解决方案

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可

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

外边距（margin）

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

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

maigin 的复合写法和 padding 完全一致。

块级盒子水平居中对齐

外边距可以让块级盒子水平居中，但是必须满足两个条件：

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

.header {width: 960px; margin: 0 auto;}

常见的写法，以下三种都可以

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可

嵌套块元素垂直外边距的坍塌

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

解决方案

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距。
3. 可以为父元素添加 overflow: hidden。

还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后期再总结。

清除内外边距

网页元素中有很多默认的内外边距，不同浏览器的默认也不一致。因此我们在布局前，首先要清楚网页元素的默认内边距。

* {
	padding: 0;
	margin: 0;
}

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

圆角边框

CSS3中新增了圆角边框样式，这样我们的盒子就可以设置圆角。

border-radius 属性用于设置元素的外边框圆角。

radius 半径（园的半径）原理：园与边框的交集形成圆角效果。

border-radius: length;

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
• 如果是个 矩形，设置为高度的一般就可以做出两边半圆。
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

盒子阴影

CSS3中新增了盒子阴影模型，我们可以使用 box-shadow 属性为盒子添加阴影。

语法：

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

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

注意：

1. 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效

2. 盒子阴影不占用空间，不会影响其他盒子排列

文字阴影

在CSS3中，可以使用text-shadow属性将阴影应用于文本。

语法：

text-shadow: h-shadow b-shadow blur color;

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