CSS3--美若天仙！？

免责声明：本文仅做分享~

 

目录

CSS引入方式

 选择器

盒子尺寸和背景色

文字控制属性

单行文字 垂直居中

字体族

font复合属性

文本对齐方式

文本修饰线

color 文字颜色

-----

复合选择器

伪类选择器

超链接伪类

CSS特性

继承性

层叠性

优先级

Emmet 写法

背景属性

背景图平铺方式

背景图缩放

背景图固定

背景复合属性

显示模式

块级元素

行内元素

行内块元素

-转换显示模式

-----

结构伪类选择器

:nth-child(公式)

伪元素选择器 

盒子模型

组成

边框线 

内边距

尺寸计算

外边距

外边距问题 – 合并现象

外边距问题 – 塌陷问题

行内元素 – 内外边距问题

清除默认样式

元素溢出

圆角

阴影

标准流

浮动

清除浮动

总结

flex布局

组成部分：

主轴对齐方式

侧轴对齐方式

修改主轴方向

弹性伸缩比

弹性盒子换行

行对齐方式

---

CSS引入方式

内部样式:CSS 代码写在 style 标签里面.

外部样式:CSS 代码写在单独的 CSS 文件中（.css） 在 HTML 使用 link 标签引入 .

<link rel="stylesheet" href="./my.css">

行内样式:配合 JavaScript 使用,CSS 写在标签的 style 属性值里.

---

 选择器

  选择器: <br>

  标签选择器: <br>

  类选择器: <br>   .

  ID选择器: <br>    #

  属性选择器: <br>  

  伪类选择器: <br>

  伪元素选择器: <br>

  通配符选择器: <br> <!-- 一般删除一些样式时使用 -->   *{}

---

盒子尺寸和背景色

---

文字控制属性

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

---

单行文字 垂直居中

行高属性值等于盒子高度属性值.

---

字体族

属性名：font-family

属性值：字体名

font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次 查找.

font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体.

---

font复合属性

设置网页文字公共样式.

属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

--字号和字体值必须书写.

---

文本对齐方式

 控制内容水平对齐方式 .   属性名：text-align

#divs3 {

  text-align: center;

}

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

---

文本修饰线

text-decoration

---

color 文字颜色

---

-----

复合选择器

伪类选择器

伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover { CSS 属性 }

---

超链接伪类

如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。

---

CSS特性

继承性 层叠性 优先级

  css三大特性：继承、层叠、优先级 <br>

  继承：子元素继承父元素的样式。 （文字控制属性。）

  层叠：同一元素的样式层叠，后面的样式覆盖前面的样式。 

  优先级（权重）：!important > 内联样式 > 外部样式表 > 内部样式表 > 浏览器默认样式。

  id > class > 标签选择器 > 通配符选择器

继承性

继承性：子级默认继承父级的 文字控制属性。

 如果标签有默认文字样式会继承失败。 例如：a 标签的颜色、标题的字体大小。

层叠性

特点： 相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性

不同的属性会叠加：不同的 CSS 属性都生效。

优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

---

基础选择器：

规则：选择器优先级高的样式生效。

公式：

通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

（选中标签的范围越大，优先级越低）

---

复合选择器-叠加 ：

叠加计算：如果是复合选择器，则需要权重叠加计算。

公式：（每一级之间不存在进位）

规则：

从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较

!important 权重最高

继承权重最低

---

Emmet 写法

代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。

---

背景属性

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

背景图平铺方式

background-repeat（bgr）

---

背景图缩放

设置背景图大小          

background-size（bgz）

常用属性值： 关键字

cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白 百分比：根据盒子尺寸计算图片大小 数字 + 单位（例如：px）

（图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。）

---

背景图固定

背景不会随着元素的内容滚动。

background-attachment（bga）
fixed

---

背景复合属性

background（bg）

属性值：

背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定

（空格隔开各个属性值，不区分顺 序）

---

显示模式

显示模式：标签（元素）的显示方式。

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

块级元素

l 独占一行        div

l 宽度默认是父级的100%

l 添加宽高属性生效

行内元素

l 一行可以显示多个        span

l 设置宽高属性不生效

l 宽高尺寸由内容撑开

行内块元素

l 一行可以显示多个

l 设置宽高属性生效

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

---

-转换显示模式

---

-----

结构伪类选择器

作用：根据元素的结构关系查找元素。

:nth-child(公式)

n=0 -->

---

伪元素选择器 

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

• 必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可

• 伪元素默认是行内显示模式

• 权重和标签选择器相同

---

盒子模型

组成

• 内容区域 – width & height

• 内边距 – padding（出现在内容与盒子边缘之间）

• 边框线 – border

• 外边距 – margin（出现在盒子外面）

---

边框线 

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

设置单方向边框线 :

属性名：border-方位名词（bd+方位名词首字母，例如，bdl）

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

---

内边距

设置 内容 与 盒子边缘 之间的距离。

padding / padding-方位名词

---

尺寸计算

 盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

l 结论：给盒子加 border / padding 会撑大盒子

l 解决:

l 手动做减法，减掉 border / padding 的尺寸

l 內减模式：box-sizing: border-box

---

外边距

 拉开两个盒子之间的距离.

margin

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

版心居中 – 左右 margin 值 为 auto（盒子要有宽度）

---

外边距问题 – 合并现象

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

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

---

外边距问题 – 塌陷问题

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

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

解决方法：

• 取消子级margin，父级设置padding

• 父级设置 overflow: hidden

• 父级设置 border-top

---

行内元素 – 内外边距问题

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

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

---

清除默认样式

---

元素溢出

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

overflow

---

圆角

border-radius

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

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

---

阴影

box-shadow : X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

---

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个.

div

span

浮动

让块元素水平排列。

---

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱） 解决方法：清除浮动（清除浮动带来的影响）

方法一：额外标签法

• 在父元素内容的最后添加一个块级元素，设置 CSS 属性  clear: both

方法二：单伪元素法

方法三：双伪元素法（推荐）

方法四：overflow     --最简单.

• 父元素          添加 CSS 属性           overflow: hidden

---

总结

浮动属性 float，left 表示左浮动，right 表示右浮动

l特点

1.浮动后的盒子顶对齐

2.浮动后的盒子具备行内块特点

3.父级宽度不够，浮动的子级会换行

4.浮动后的盒子脱标

l清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果

推荐双伪元素法清除浮动。

l拓展：浮动本质作用是实现图文混排效果。

---

flex布局

--用的更多。

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

---

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸。

组成部分：

•弹性容器

•弹性盒子

•主轴：默认在水平方向

•侧轴 / 交叉轴：默认在垂直方向

---

--沿主轴方向排列。

---

主轴对齐方式

justify-content

 

      /* 各个间距都相等 */

      justify-content: space-evenly;

---

侧轴对齐方式

•align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

•align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

侧轴无高度 / stretch 

---

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向。

属性名：flex-direction

主轴 ，侧轴

---

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

---

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

flex-wrap

wrap：换行

nowrap：不换行（默认）

---

行对齐方式

align-content

 --该属性对单行弹性盒子模型无效。

---