五、CSS盒子模型（下）
目录
1、内边距padding
1.1、介绍
1.2、示例代码
2、外边距
2.1、介绍
示例代码
2.2、技巧
示例代码
2.3、外边距折叠与塌陷
示例代码
3、尺寸计算
3.1、介绍
示例代码
4、盒子背景
5、背景渐变
5.1、介绍
线性渐变
文字背景线性渐变
5.2、示例代码
6、盒子阴影
6.1、介绍
6.2、过渡
6.3、示例代码
1、内边距padding
1.1、介绍
内边距(padding)位于边框和内容区域之间。
使用场景：让盒子内容和边框保留一定距离，更美观。
内边距（padding）多个值用空格隔开。（顺时针记忆）
内边距写法
作用
padding: 10px;
上下左右4个内边距都是10px
padding: 10px 20px;
上下内边距是10px，左右内边距是20px
padding: 10px 20px 30px;
上是10px，左右是20px，下是30px
padding: 10px 20px 30px 40px;
上是10px，右是20px，下是30px，左是40px（顺时针）
单边设置：根据方位名词
- padding-left: 10px;
- padding-right: 10px;
- padding-top: 10px;
- padding-bottom: 10px;
1.2、示例代码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型-内边距</title><style>.box1 {width: 200px;height: 200px;background-color: pink;/* 一个值，代表 上下左右 *//* padding: 10px; *//* 两个值代表 上下 左右 *//* padding: 10px 20px; *//* 三个值代表上，左右，下 *//* padding: 10px 20px 30px; *//* 四个值代表上 右 下 左 */padding: 10px 20px 30px 40px;}.title {width: 240px;height: 35px;border: 1px solid #d0e0ee;border-top: 2px solid #ff8400;/* 文字垂直居中，行高等于高（height） */line-height: 35px;/* 只需要设置左右内边距 *//* padding: 0 10px; */padding-left: 10px;font-size: 14px;}</style> </head><body><div class="box1">一个值，代表上下左右，两个值代表上下 左右；三个值代表上，左右，下；四个值代表上 右 下 左。</div><hr><div class="title">美妆时尚热榜</div> </body></html>
2、外边距
2.1、介绍
外边距(margin)是盒子周围一圈看不到的空间。它会把其它元素退离盒子。
使用场景：让元素保留一定距离，更美观。
外边距写法
作用
margin: 10px;
上下左右4个外边距都是10px
margin: 10px 20px;
上下外边距是10px，左右外边距是20px
margin: 10px 20px 30px;
上是10px，左右是20px，下是30px
margin: 10px 20px 30px;
上10px，右20px，下30px，左40px
单边设置：根据方位名词。
- margin-left: 10px;
- margin-right: 10px;
- margin-top: 10px;
- margin-bottom: 10px;
注意：
1.行内元素左右外边距生效，上下外边距无效。
2.行内元素设置宽度和高度也无效。
示例代码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子边框-外边距</title><style>[class*="box"] {width: 200px;height: 200px;background-color: pink;}.box1 {/* margin: 10px; *//* margin: 10px 20px; *//* margin: 10px 20px 30px; *//* margin: 10px 20px 30px 40px; */margin-bottom: 10px;}.box2 {background-color: skyblue;}span {/* 1.行内盒子的宽高是无效的 */width: 100px;height: 100px;background-color: pink;/* 2.行内盒子上下外边距无效 */margin: 10px 20px;/* 3.行内盒子边框和内边距有效 */padding: 10px;border: 5px solid red;}</style> </head><body><!-- 控制盒子之间的距离 --><div class="box1">第一个盒子</div><div class="box2">第二个盒子</div><span>行内盒子</span><span>行内盒子</span></body></html>
2.2、技巧
区块元素可以利用marign实现水平居中。
- 块级盒子必须有宽度。
- 只需要设置左右外边距为auto就可以。
示例代码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>块级盒子水平居中</title><style>/* 必须是块级盒子，必须有宽度，有宽度的原因是如果没有宽度，就默认和页面一样宽，不存在居中这个说法 */[class*="box"] {width: 150px;height: 150px;background-color: pink;}.box1 {/* margin: 0 auto; B站 *//* margin: auto; 京东*/margin-left: auto;margin-right: auto;}.box2 {background-color: skyblue;margin-left: auto;}.box3 {background-color: red;margin-right: auto;}/* 行内盒子写margin auto是无效的 *//* span {margin: auto;} *//* 让行内元素居中可以把他写在块级元素内 */p {background-color: pink;/* 行内元素水平居中 */text-align: center;}</style> </head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div><span>123</span><p><span>123</span></p> </body></html>
2.3、外边距折叠与塌陷
区块元素上下外边距会出现折叠（合并）情况。
- 并列关系（兄弟）的区块元素。
- 两个上下外边距将合并为一个外边距。其大小等于最大的单个外边距。
这个是浏览器特性，我们通常只设置一个盒子外边距即可。
区块盒子上下外边距会出现塌陷情况。
- 嵌套关系（父子）的区块元素。
- 给字盒子设置上下外边距会让父盒子塌陷移动。
解决方案：
1.给父盒子添加 上边框。（父盒子本身有边框则不会出现问题）
2.给父盒子添加 上内边距。（同上）
3.给父盒子添加overflow: hidden;（属性）
示例代码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外边距合并和塌陷</title><style>/* 必须是块级盒子，必须有宽度，有宽度的原因是如果没有宽度，就默认和页面一样宽，不存在居中这个说法 */[class*="box"] {width: 150px;height: 150px;background-color: pink;}.box1 {margin-bottom: 100px;}.box2 {background-color: skyblue;margin-top: 150px;}/* 外边距塌陷 */.father {/* 3.给父亲添加 overflow:hidden; *//* overflow: hidden; */width: 150px;height: 150px;background-color: pink;/* 1.给父亲添加边框(上边框) *//* border: 1px solid red; *//* 2.父亲有上padding(推荐)*/padding-top: 1px;}.son {width: 50px;height: 50px;background-color: purple;margin-top: 20px;}</style> </head><body><div class="box1"></div><div class="box2"></div><div class="father"><div class="son"></div></div> </body></html>
3、尺寸计算
3.1、介绍
在 CSS 盒子模型的默认定义里，除了宽度和高度增加盒子大小之外，padding 和 border 都会让盒子变大。
这样我们在计算盒子大小的时候都会带来困扰。
box-sizing用于定义元素的盒模型计算方式，控制元素的width和height是否包含padding和border。
语法：
box-sizing: 属性值;
属性值
描述
content-box
默认值。元素的 width 和 height 仅包含内容区域，不包含 padding 和 border。
理解： width = 内容的宽度
border-box
元素的 width 和 height 包含内容、padding和 border。
理解： width = border + padding + 内容的宽度
实际开发中，也更提倡使用border-box，可以直接让所有标签修改。
示例代码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子尺寸计算</title><style>/* 开发这么写 *//* * {margin: 0;padding: 0;box-sizing: border-box;} */.box1 {width: 200px;height: 200px;background-color: pink;box-sizing: content-box;padding: 50px;border: 10px solid red;}.box2 {width: 200px;height: 200px;background-color: skyblue;box-sizing: border-box;padding: 50px;border: 10px solid red;}</style> </head><body><div class="box1">content-box</div><div class="box2">border-box</div> </body></html>
4、盒子背景
background 用于设置元素背景相关属性，包括背景颜色、背景图片、背景位置、背景重复方式等。
使用场景：
1. 给盒子添加背景图片，更加精美。
2. 给列表添加相同的小图标，装饰效果。
3. 给页面添加大的背景图片展示更震撼。
4. 纯CSS实现背景渐变效果。
属性
作用
常用值
background-color
设置元素背景颜色
颜色名称、十六进制、RGB、透明度
background-image
设置背景图片
url(image.jpg)
background-repeat
控制背景图片是否重复
repeat(默认)、no-repeat、repeat-x、repeat-y
background-position
定位背景图片位置
x y（如center top，或者px、%单位）
background-size
调整背景图片尺寸
默认auto、cover(覆盖)、contain(包含)或者跟px、%
background-attachment
背景是否随页面滚动
scroll(默认 滚动的)、fixed(固定)
注意：
背景固定是相对于当前页面视口来说的，并不是某个盒子。
background 用于设置元素背景相关属性，包括背景颜色、背景图片、背景位置、背景重复方式等
背景复合写法：
background: 颜色 图片 重复 固定 位置/尺寸;
5、背景渐变
5.1、介绍
在CSS中，可以通过linear-gradient(线性渐变)和radial-gradient(径向渐变)为元素添加渐变背景。
场景：
1.文字底色渐变。
2.盒子美化。
属性/方法
描述
linear-gradient(方向, 颜色1 位置, 颜色2 位置...)
线性渐变（反向可控）
radial-gradient(形状, 颜色1,颜色2...)
径向渐变（形状和位置可控）
线性渐变
1. 方向。 可以是方位名词， 也可以是 deg(角度）
2. 位置。 色标的位置。不是必须写的。
文字背景线性渐变
background: linear-gradient(to right, pink, red); 设置背景渐变
-webkit-background-clip: text; 兼容性写法，照顾谷歌老版本浏览器 -webkit-
background-clip: text; 文字范围裁剪背景
-webkit-text-fill-color: transparent; 文本填充颜色设置为透明
5.2、示例代码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景渐变</title><style>.box {width: 300px;height: 200px;/* background-color: pink; *//* background: linear-gradient(to top, pink, red); *//* deg 角度 90deg 就是 90度 *//* background: linear-gradient(90deg, pink, red); *//* 位置 是色标的位置 *//* background: linear-gradient(90deg, pink 50%, red 50%); *//* background: linear-gradient(180deg, #3ECEC5D8 0%, #26BCC6 100%); */background-image: linear-gradient(180deg, #3ECEC5D8 0%, #26BCC6 100%);}.text {font-size: 30px;font-weight: 700;/* 渐变背景文字 */background-image: linear-gradient(97deg, #0096FF, #BB64FF 42%, #F2416B 74%, #EB7500);/* -webkit- 前缀 谷歌浏览器老版本的兼容性写法 */-webkit-background-clip: text;/* 背景裁剪 以文字的形式裁剪 */background-clip: text;/* 文本填充颜色 为透明 */-webkit-text-fill-color: transparent;}/* 添加按钮渐变样式 */.gradient-btn {background: linear-gradient(45deg, #ff6b6b, #4ecdc4);border: none;color: white;padding: 10px 20px;border-radius: 5px;cursor: pointer;font-size: 16px;}</style> </head><body><div class="box"></div><div class="text">我是渐变的文字，你喜欢吗？</div><button class="gradient-btn">搜索</button> </body></html>
6、盒子阴影
6.1、介绍
CSS box-shadow 属性用于在元素的框架上添加阴影效果。
使用场景：
1. 盒子添加阴影，效果更立体。
2. 鼠标经过元素显示阴影，更加突出元素。
语法：
box-shadow: X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色;
- 多个属性用空格隔开。
- X轴偏移量和Y轴偏移量是必须要写，其余可以省略采取默认值。
- 默认是外阴影，如果改为内阴影要写 inset。
6.2、过渡
过渡效果（Transition） 用于在元素的属性值发生变化时，平滑地过渡（而不是瞬间切换）。
场景：
1. 鼠标经过图片放大。
2. 表单获得焦点，输入框变宽。
语法：
transition: 过渡属性 过渡时间;
- 属性值中间空格隔开。
- 过渡属性如果都要变化可以写 all
- 过渡时间单位是秒s，比如 0.2s 等
6.3、示例代码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子阴影</title><style>.box {width: 200px;height: 200px;background-color: pink;margin: 100px auto;/* 盒子阴影: 水平偏移量 垂直偏移量 模糊距离 扩散距离 阴影颜色 *//* box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5); *//* box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px; *//* 过渡写到盒子身上。 谁做过渡给谁加 */transition: all .3s;}.box:hover {width: 220px;height: 220px;box-shadow: rgba(0, 0, 0, 0.3) 0px 15px 30px;}</style> </head><body><div class="box"></div> </body></html>