✔️CSS基础+

✔️CSS基础+

背景属性

描述	属性
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景复合属性	background

背景图

网页中，使用背景图实现 装饰性 的图片效果。

属性名： background-image（bgi）

属性值：url（背景图URL）

注：背景图默认有平铺（复制）效果。

背景图平铺方式

属性名：background-repeat（bgr）

属性值：

no-repeat : 不平铺

repeat ： 平铺（默认效果）

repeat-x ： 水平方向平铺

repeat-y ： 垂直方向平铺

背景图位置

属性名： background-position（bgp）

属性值： 水平方向 垂直方向；

• 关键字

left / right / center / top / bottom

• 坐标（数字+px，正负都可以）

左上角为坐标原点（向右为正，向下为正）

提示：

• 关键字取值方式写法，可以 颠倒 取值顺序
• 可以只写一个关键字， 另一个方向 默认为 居中；数字只写一个值表示 水平方向，垂直方向为 居中

背景图缩放

属性名：background-size（bgz）

属性值：

• 关键字

  cover:等比例缩放背景图片以完全覆盖北京区，可能背景图片部分看不见
  contain：等比例缩放背景图片以完全显示，可能背景区部分空白

• 百分比：根据盒子尺寸计算图片大小

• 数字 + 单位
  注：工作中，图片比例与盒子比例相同, 使用 cover 和 contain 缩放背景图效果相同

背景图固定

作用：背景不会随元素的内容滚动

属性名：background-attachment（bga）

属性值：fixed

视差滚动

复合属性

属性名：background（bg）

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）

显示模式

标签（元素）的显示方式

作用：布局网页的时候，根据标签的显示模式选择 合适的标签摆放内容。

块级元素

特点：

• 独占一行

• 宽度默认是父级的100%

• 添加宽高属性生效

  块级元素：div p h …

行内元素

特点：

• 一行可以显示多个

• 设置宽高属性不生效

• 宽高尺寸由内容撑开

  行内元素：strong em a b i u …

行内块元素

特点：

• 一行可以显示多个

• 设置宽高属性生效

• 宽高尺寸也可以由内容撑开

  行内块元素：img input td …

转换显示模式

属性名：display

属性值：

block : 块级

inline-block ：行内块

inline ： 行内

注：重点记住把 行内元素 如 链接 转换为 块级或者行内块 即可

盒子模型

掌握盒子模型组成部分，使用盒子模型布局网页区域

选择器

结构伪类选择器

根据元素的 结构关系 查找元素

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素（第一个元素N值为1）

:nth-child ( 公式 )

功能	公式
偶数标签	2n
奇数标签	2n+1 ; 2n-1
找到5的倍数的标签	5n
找到第5个以后的标签	n+5

注：公式中的n取值从0开始

伪元素选择器

作用：创建 虚拟元素（伪元素），用来摆放 装饰性的内容

选择器	说明
E::before	在E元素 里面 最 前 面添加一个伪元素
E::after	在E元素 里面 最 后 面添加一个伪元素

注意点：

• 必须设置 content: ""属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可
• 伪元素默认是行内显示模式
• 权重和标签选择器相同

盒子模型组成

• 内容区域 – width & height
• 内边距 – padding（出现在内容与盒子边缘之间）
• 边框线 – border
• 外边距 – margin（出现在盒子外面）

边框线

属性名：border（bd）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

线条样式： solid 实线 / dashed 虚线 / dotted 点线

方向：border-方位词（top / bottom / left / right）

内边距

作用：设置内容与盒子边缘之间的距离

属性名：paddig / padding-方位词

注：添加 padding 会撑大盒子

多值写法：padding：10px 20px 30px 40px; (上、右、下、左)

从 上 开始 顺时针 赋值，当前方向没有数值则与 对面取值相同

默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

给盒子加 border / padding 会撑大盒子

• 解决：手动做减法，减去 border / padding 的尺寸
• 解决：内减模式：box-sizing：border-box

外边距

作用：拉开两个盒子之间的距离

属性名：margin

注：与 padding 属性值写法、含义相同

版心居中

左右 margin 值 为 auto（盒子要有宽度）(auto:自动占满)

div {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: pink;
}

1. 行内和行内块元素水平居中对齐，给块级的父元素添加 tac
2. 块级元素水平居中对齐： 让盒子的左右外边距设置为 auto 就可以了。 margin: auto;

• 小米 margin-left: auto; margin-right: auto;
• 京东/淘宝： margin： 0 auto；

清除默认样式

清除标签默认的样式，比如：默认的内外边距

/* 清除默认内外边距 */
* {
  	margin: 0;
  	padding: 0;
  	box-sizing: border-box;
  }
  /* 清除列表项目符号 */
  li {
  	list-style: none;
  }

元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

属性值：

hidden : 溢出隐藏

scroll ： 溢出滚动（无论是否溢出，都显示滚动条位置）

auto ： 溢出滚动（溢出才显示滚动条位置）

外边距问题

合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中的较大值生效

.one {
  margin-bottom: 50px;
}
.two {
  margin-top: 20px;
}
<!-- one、two之间距离50px  -->

外边距塌陷

场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题

现象：导致父级一起向下移动

解决方法：

• 取消子级margin，父级设置padding
• 父级设置 overflow: hidden
• 父级设置 border-top

行内元素内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

span {
  /* margin 和 padding 属性，无法改变垂直位置 */
  margin: 50px;
  padding: 20px;
  /* 行高可以改变垂直位置 */
  line-height: 100px;
}

圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字+px / 百分比

注：属性值是圆角半径

多值写法：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%

img {
  width: 200px;
  height: 200px;
  
  border-radius: 100px;
  border-radius: 50%;
}

胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  border-radius: 40px;
}

盒子阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：

• X 轴偏移量 和 Y 轴偏移量 必须书写
• 默认是外阴影，内阴影需要添加 inset

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

vx🎇VueMaker