CSS盒子模型

1.我们为什么要用盒子模型？

所有的元素都被一个个的盒子包围着，学会盒子模型可以实现准确布局，处理元素排列的关键。在现实生活中，很多网页就是由盒子构成的（比如小米的页面）。

2.盒子模型的分类

在CSS中，我们有几种类型的盒子，一般分为区块盒子（block boxes）和行内盒子（inline boxes）

区块盒子(block)	行内盒子(inline)
盒子会产生换行	盒子不会产生换行
width和height属性可以发挥作用	width和height属性将不起作用
不设置宽度则默认和是父元素空间的100%	垂直方向的内边距、外边距不起效果
内边距、外边距和边框会撑大元素	水平方向的内边距、外边距会有效果
常见的比如:div、p、h、ul、table等	常见的比如：span、em、a、strong等

3.盒子模型的组成

CSS盒模型整体上适用于区块盒子，包含盒子内容、内边距、外边距、边框四部分

• 盒子内容：显示内容的区域，由内容或者指定宽度高度来决定内容大小
• 内边距padding：内容距离边框之间的距离
• 边框border：边框盒子包住内容和内边距
• 外边距margin：该盒子与其他元素之间的距离

3.1盒子模型组成-边框

border属性用于设置盒子边框

场景一

• 使用场景:设置盒子四条或者单独边框
• 属性值 border：边框粗细 边框样式 边框颜色;
  • 边框有三部分属性值组成，中间必须空格隔开
  • 三部分属性值没有先后顺序

border: 1px solid #f1f1f1;

边框样式	描述	视觉效果
dotted	点状边框	圆点组成的虚线
dashed	虚线边框	短横线组成的虚线
solid	实线边框	单一线条

场景二

• 使用场景：
  • 四个边框不同
  • 底部一条线做分割线
• 属性：根据方位名词。top bottom left right
  • border-top: 1px solid pink;
  • border-bottom: 1px solid pink;
  • border-left:1px solid pink;
  • border-right:1px solid pink;

3.2 盒子模型组成-圆角边框

border-radius允许设置元素的外边框圆角

场景三

• 使用场景
  • 圆角更好看
  • 盒子或者图片设置为圆形
• 属性 border-radius:属性值;
  • 数字/百分比(值越大，角越明显)

.button {
  border-radius: 10px;
}

胶囊按钮：设置圆角为 宽度或者高度的较小值的一半 就可以实现
圆形：正方形设置圆角为高度一半或者50%

场景四

• 特殊场景

  • 部分角有圆角，部分角没有圆角
    

• 属性 border-radius:左上角 右上角 右下角 左下角

  • 顺时针记忆
  • 中间空格隔开
  • 不需要圆角的设置为0即可（0必须要写，不能省略）

3.3 盒子模型组成-内边距

场景五

• 使用场景
  • 让盒子内容和边框保留一定距离，更美观
• 属性：
  • 内边距(padding)多个值用空格隔开。顺时针记忆
  • 也可以单边设置，根据方位名词（eg padding-left: 10px;）

3.4 盒子模型组成-外边距

外边距（margin）外边距是盒子周围一圈看不到的空间。它会把其他元素推离盒子

场景六

• 使用场景
  • 让元素与元素保留一定距离，更美观

• 属性：
  • 外边距(margin)多个值用空格隔开。顺时针记忆
  • 也可以单边设置，根据方位名词（eg margin-left: 10px;）
    

注意：

1. 行内元素 左右外边距生效，上下外边距无效
2. 行内元素 设置宽度和高度也无效

居中技巧：

1. 区块元素可以利用margin实现水平居中

• 块级盒子必须有宽度
• 只要设置左右外边距为auto就可以

2. 行内盒子套一个块级盒子，让他水平居中就可以了

<p><span>123</span></p>

p {
  text-align: center;
}

3.5 盒子模型组成-外边距折叠

区块元素上下外边距会出现折叠（合并）情况

• 并列关系（兄弟）的区块元素
• 两个上下外边距将合并为一个外边距。其大小等于最大的单个外边距

为避免麻烦，一般我们只设置一个盒子外边距即可

<style>
  .boxA{
		margin-bottom: 100px;
	}
	
	.boxB{
		margin-top: 50px;
	}
</style>

3.6 盒子模型组成-外边距塌陷

区块元素上下外边距会出现塌陷情况

• 嵌套关系（父子）的区块元素
• 给子盒子设置上下外边距会让父盒子塌陷移动

解决方案：

1. 给父盒子加上边框（父盒子本身有边框则不会出现问题）

.father{
	border: 1px solid #000;
}

2. 给父盒子添加上内边距（父盒子本身有边框则不会出现问题）【推荐】

.father{
	padding-top: 1px;
}

3. 给父盒子添加：overflow: hidden; 属性

.father{
	overflow: hidden;
}

4.盒子模型-尺寸计算

在css盒子模型的默认定义里，除了宽度和高度增加盒子大小之外，padding和border都会让盒子变大。这样我们在计算盒子大小的时候都会带来困扰
默认属性：box-sizing: content-box;

优化盒子模型尺寸计算的语法：box-sizing:属性值；

box-sizing: border-box;

5.盒子背景

background用于设置元素背景相关属性，包括背景颜色、背景图片、背景位置、背景重复方式等

场景七

使用场景

• 给盒子添加背景图片，更加精美
• 给列表添加相同的小图标，装饰效果
• 给页面添加大的背景图片，使展示更震撼
• 纯CSS实现背景渐变效果
  

代码示例

/* 背景图片 */
background-image: url(./img/z.png);

/* 背景平铺 不写的话默认repeat*/
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

/* 背景位置 */
/* background-position: x y; */
background-position: 50px 10px;
background-position: 50% 50%;

/* 方位名词 top bottom left right center */
/* 左上角 */
background-position: left top;
/* 居中 */
background-position: center center;
/* 如果只写一个值，则第二个值y省略了，默认是center*/
background-position: center;

/* 背景缩放 尺寸*/
/* 覆盖 */
background-size: cover;
/* 包含 */
background-size: contain;
/* 具体值，剩下一个自动对齐 */
background-size: 300px;

/* 背景固定 滚动的 相对于当前视口*/
background-attachment: scroll;
background-attachment: fixed;

背景复合写法（更常见）：
background:颜色 图片 重复 固定 位置/尺寸; 顺序无关

background: pink url(./img/d.png) no-repeat fixed center center/200px;

6.背景渐变

在CSS中，可以通过linear-gradient(线性渐变) 和 radial-gradient(径向渐变) 为元素添加渐变背景

场景：

• 文字底色渐变甚至动画，更吸引用户
• 盒子添加更美观

线性渐变：

1. 方向 可以是方位名词，也可以是deg（角度）
2. 位置 色标的位置。不是必须写的。

background: linear-gradient(to top, pink, red);

/* deg角度 90deg 就是 90度 */
background: linear-gradient(90deg, pink, red);

background: linear-gradient(180deg, pink 0%, red 100%);

  /* 渐变背景文字 */
        background-image: linear-gradient(97deg, #0096FF, #BB64FF 42%, #FF4D4F, #EB7500);
        /* -webkit- 前缀 谷歌浏览器老版本的兼容性写法 */
        -webkit-background-clip: text;
        /* 背景裁剪 以文字的形式裁剪 */
        background-clip: text;
        /* 文本填充颜色 为透明 */
        -webkit-text-fill-color: tran

7.盒子阴影

CSS box-shadow 属性用于在元素的框架上添加阴影效果

使用场景：

1. 盒子添加阴影，效果更立体
2. 鼠标经过元素显示阴影，更加突出元素

语法：
box-shadow:X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色

• 多个属性用空格隔开
• X轴偏移量和Y 轴偏移量是必须要写，其余可以省略采取默认值
• 默认是外阴影，如果改为内阴影要写inset

box-shadow: 0 15px 30px rgba(0,0,0,.1);