css重温（一）

Qi_Zhao7

已于 2022-08-14 15:38:13 修改

阅读量386

点赞数 1

分类专栏：前端文章标签： css css3 前端

于 2022-08-14 15:36:32 首次发布

本文链接：https://blog.youkuaiyun.com/qq_49880963/article/details/126331939

版权

前端专栏收录该内容

2 篇文章

订阅专栏

css重温

一：css是什么？css3呢

CSS是层叠样式表，为html页面提供美化效果。css3是最新版本的css，在css基础上增加了更多的样式，动画，2D，3D…

二：css基本语法

语法：选择器 {属性名：属性值；}

三：一些注意点

1，写在哪？

按照标准是写在head里面，但是写在body里面也是可以的，体现html的包容性。

2，css注释写法

快捷键 ctrl+/ ， /这里是注释/

3，两种样式的写法

写在style标签里面多行,方便阅读，修改。

写在一行，进行代码压缩后的形式。

4，四种引入方式

属性名称	描述
style	① 内嵌式，书写在 head 标签对中，使用`<style></style>`标签对，里面书写 css 样式。例如： `<head>` `<style type="text/css">` `h1 {color:red;}` `p {color:blue;}` `</style>` `</head>` ② 行内式，直接在标签上书写 style 属性设置 css 样式。这种方式不常用，了解即可示例：`<h1 style="color:blue;text-align:center">`这是一个标题`</h1>`
link	链接外部样式文件，例如： `<head>` `<link rel="stylesheet" href="css文件">` `</head>` link:链接 rel：关联
@import	导入样式规则（不常用，了解即可）例如：@import url(‘css 文件’) 缺点：不会等待css文件解析完，而是会立刻渲染html文件，导致网页呈现没有css样式的裸奔现象。

5，样式优先级（四种引入方式的优先级）

行内样式优先级最高。【可以写代码验证】

内嵌和外联样式优先级一样，谁写在后面听谁的。

6，css选择器分类

（1）基础选择器

id选择器	唯一性：只能有一个。使用点.作为前缀		.a {color:red;}
class选择器	可以有多个。使用井号#作为前缀		#a {color:red; }
标签选择器	覆盖面非常大，常用于标签初始化，直接使用元素的标签名	ul { list-style:none} 去掉无序列表的小圆点。	a {text-decoration:none;}去掉超级链接的下划线
通配符选择器	符号：*	表示选中网页中全部的标签	用的不多，对性能消耗过大。
注意：id和class选择器命名规则	以字母，数字，下划线，短横线构成。	不能以数字开头

（2）复合选择器

属性名	描述
element1 element2	后代选择器，使用空格分隔两个元素示例：`.box p{}` 表示选择类名为 box 的标签的后代元素 p 标签
element1.class	交集选择器示例：`h3.spec{}` 表示选择有`.spec` 类的`<h3>`标签
element1,element2	并集选择器，也叫分组选择器，使用逗号隔开示例：`ul, ol{}` 表示同时选择`<ul>`标签和`<ol>`标签

四，原子类

在网页项目前，可以将所有常用的字体，颜色，行高，内边距提前设置为单独的类。

html标签就可以按需选择他的类名，快速添加一些常见的样式。

例如：

<style>
    .fs12 {
        font-size: 12px;
    }
    .fs14 {
        font-size: 14px;
    }
</style>
<body>
    <h1 class="fs12">这里是文本内容</h1>      <!--按需使用-->
</body>

五，几种选择器的优先级（可通过代码验证）

权重从高到低：行内样式>id选择器>class选择器>标签选择器>通配符。

tip：如果选择器级别相同即同一个选择器控制一个便签样式时，[就近原则]，理解为覆盖。

六，css的文本，字体和列表属性。

1，文本属性

属性	描述
color 英文单词表示法	color：red;
color 十六进制表示法	color：#000（黑）#fff（白）#333#ddd（灰色） ; 0-ff
color rgb（）表示法	color：rgb（255.0.0）; 三个数值在0-255
color rgba（）表示法	color：rgba（255.0.0.0.5）; 最后一个数值控制颜色的透明度介于 0 到 1 之间
font-size 字体大小	font-size： 20px ; px为像素单位1px等于一像素
font-weight 字体粗细	font-weight：bold; 字体加粗
font-style 字体样式	font-style: italic; 字体倾斜
text-decoration 文本修饰线	text-decoration： none；无字体修饰线

注：（1）rgb 是光学显示器三原色：红（red ）、绿（green）、蓝（blue）三个单词的缩写

（2）font-weight 属性设置字体的粗细程度

通常用 normal 和 bold 两个值，或其对应数字 400 与 700 来表示

属性	描述
`normal`	正常粗细，与 400 等值
`bold`	加粗，与 700 等值
`lighter`	更细，大多数中文字体不支持。比从父元素继承来的值更细（处在字体可行的粗细值范围内）
`bolder`	更粗，大多数中文字体不支持。比从父元素继承来的值更粗（处在字体可行的粗细值范围内）

（3）font-style 属性设置字体的倾斜

属性	描述
`normal`	取消倾斜，如：把天生倾斜的 i、em 等标签设置为不倾斜
`italic`	设置为倾斜字体（常用）如果当前字体没有可用的斜体版本，会选用（`oblique` ）替代
`oblique`	设置为倾斜字体（用常规字体模拟，不常用）

（4）css自定义字体@font-face

设置电脑中没有的字体，@font-face可以消除字体对电脑的依赖。如果用户电脑没有我们这个字体，那么用户在浏览这个网页时会自动下载相关字体。

TIP：如何定义字体

其实在下载的字体包里面有一个.html的文件，直接复制。注意！！要改文件路径

@font-face {
font-family:  ;/*字体类型*/
src:url();/*引入字体文件 字体文件根据操作系统和浏览器不同，有 eot、woff2、woff、ttf、svg 文件格式，需要同时有这 5 种文件*/
}

配置如下
请添加图片描述

2，css文本属性（包含修饰线，首行缩进，行高，font属性复合写法，内容水平居中，字间距，字符间距）

（1）修饰线:用于设置文本的修饰线外观的常见的有（下划线、上划线、贯穿线/删除线）

属性	描述
text-decoration ：none；	去掉下划线
text-decoration : underline；	有下划线
text-decoration ： line-through；	删除线

详细：text-decoration 它是以下四个属性的简写

text-decoration-line ：文本修饰的位置，如下划线underline，删除线line-through
text-decoration-color：文本修饰的颜色
text-decoration-style：文本修饰的样式，如**波浪线wavy**实线solid虚线dashed
text-decoration-thickness：文本修饰线的粗细

<style>
  .wavy {
    text-decoration: wavy underline red 3px; /*波浪线  下划线  红色 粗细*/
  }
</style>
<body>
  <div class="wavy">优快云</div>
</body>

请添加图片描述

(2)首行缩进 text-indent

我们一般段首开头要首行缩进两个字符的长度。1em为一个字符长度，相当于40px

<style>
        .wavy {
            text-decoration: wavy underline red 3px;
            text-indent: 2em;
        }
    </style>

</head>

<body>

    <div class="wavy">
        优快云编程交流社区
    </div>
    <p>读书破万卷</p>

</body>

请添加图片描述

（3）line-height 行高

单位	实例	说明
px	`line-height:30px;`	行高为 30px
数值表示法	`line-height:2;`	行高为 font-size 的倍数，如果`font-size:20px;`则`line-height:2;`表示行高为 40px 也是最推荐的写法
百分比表示法	`line-height:200%;`	行高为 font-size 的百分比，如果`font-size:20px`，则`line-height:40px;`
normal	`line-height:normal;`	取决于用户端。桌面浏览器（包括 Firefox）使用默认值，约为`1.2`，这取决于元素的 `font-family`。

（4）内容水平居中

1，设置line-height(行高)=盒子高度:可实现垂直居中。

2， text-align 属性定义 行内内容（例如文字、图片、行内块级元素） 相对它的块父元素的对齐方式

常用的三个属性值：

left 水平居左 right 水平居右 center 水平居中

（5）font属性复合写法(大量减少代码量)

注意点：必须要有font-size和font-family才能生效
请添加图片描述

(6)word-spacing字间距（英文）

注意：word只对英文单词有效。

属性值	描述
normal	正常的单词间距，由当前字体或浏览器定义即是默认的。
长度	通过指定具体的额外间距来增加字体的单词间距单位可以为px

（7）letter-spacing 字符间距

属性值	描述
normal	正常的单词间距，由当前字体或浏览器定义即是默认的。
长度	通过指定具体的额外间距来增加字体的单词间距单位可以为-10px

用于设置文本字符的间距表现。可以为-10px。
请添加图片描述

3，列表属性

去掉无序列表前的小圆点（实际开发中最常用）

list-style-type：none；

list-style-type 属性设置列表项标记的类型可简写为list-type。

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。

七，css盒子模型

请添加图片描述

1.content：盒子内容区。可设置盒子内容width和height，单位px，移动端百分比或者rem等单位。

当块级元素（div、h 系列、li 系列）没有设置 width 属性时，它将自动撑满，但并不意味着 width 可以继承，width 是无法继承的。

而对于行内元素（a，span，b…）的宽高由内容决定，如果内容为0，则**宽高默认为0。**即不支持宽高属性

2.padding：内边距（边框内壁到内容之间的距离）

padding有四个方向，即上右下左。

小属性	描述
`padding-top`	上内边距
`padding-right`	右内边距
`padding-bottom`	下内边距
`padding-left`	左内边距

		padding：10px==数值只有一个代表上右下左的内边距都为10px。

padding：10px 20px==数值有两个代表上下内边距为10px，左右为20px。

padding：10px 20px 30px==数值有三个代表上左右下内边距分别为10px 20px 30px。

padding 大小属性的最佳实践：

小属性 padding-top/padding-right/padding-bottom/padding-left 用来层叠大属性 padding 来组合使用
更推荐（小属性层叠大属性）写法。如下：
```
padding: 40px;
padding-bottom: 0;
```

3.border 盒子边框

border 属性的三要素

/* 
    1px 线宽度
    solid 线型
    red 线颜色
*/
border: 1px solid red;

常见线型值	描述
`solid`	实线
`dashed`	虚线
`dotted`	点状线
`double`	双边框
`groove`	定义 3D 凹槽边框。效果取决于 border-color 值
`ridge`	定义 3D 垄状边框。效果取决于 border-color 值
`inset`	3D inset 边框。其效果取决于 border-color 的值。
`outset`	3D outset 边框。其效果取决于 border-color 的值。
`none`	无边框
`hidden`	隐藏边框

border小属性：border-style border-width border-color 线型线宽线色。也是用来叠加大属性使用。

同样也有四个方向的边框。border-top border-right border-bottom border-left 上右下左。

边框的使用场景：画三角形

请添加图片描述

border-radius 边框圆角属性。

border-radius 属性的值通常为 px单位，表示圆角的半径
以百分比为单位
- border-radius 属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里
- 正方形盒子设置border-radius: 50%; 为正圆形
- 长方形盒子设置 border-radius: 50%; 为椭圆形，不能用 px 为单位。

4.margin外边距

外边距为盒子与盒子的距离，也有四个方向：上右下左。

一数值写法 margin：10px==上右下左外边距全为10px。
二数值写法 margin：10px 20px==上下左右。
三数值写法 margin：10px 20px 30px==上左右下。

margin的塌陷：

也叫：外间距重叠或外边距合并或外边距穿透。

① 兄弟元素之间，垂直方向：上下外边距出现塌陷。水平方向不会产生塌陷

垂直方向的 margin 有塌陷现象，第一个元素的下外边距与第二个元素的上外边距会发生合并
小的 margin 会塌陷到大的 margin 中，从而 margin 不叠加，只以大值为准

三个处理的方式：1，在任意一个盒子上加上display：inline-block 变成行内块级元素。BFC

2，把外边距只加在一个元素上。

3，任意一个元素外边距改成padding。

② 父子元素之间，垂直方向：上下外边距出现塌陷。穿透了父元素，并与父元素上外边距发生合并，合并后以最大的值为主。

解决方案

给父元素加上 **overflow: hidden;**超出部分隐藏
给父元素添加 border 边框，防止穿透
将子元素的 margin 改成 padding
可以给父元添加对应的子元大小的 padding 值

5，margin负值

margin 负值应用场景：
等高布局
配合定位控制元素水平垂直居中
经典的圣杯布局和双飞翼布局

# 请添加图片描述

6，去掉默认样式

为什么有默认样式：网页中有些元素，为了展示该元素本身的用途和结构，会有一些默认样式。

一些元素都有默认的 margin，如下常见的默认样式
- h、body、ul、p 标签，都添加了默认的 margin。
- ul 添加了默认的 padding、list-style
- a 标签添中了默认的颜色、下划线
- 等等 …
我们在实际的网页开发中，要将这些默认的样式清除掉，也称之为 “CSS 样式的初始化”
* 通配符选择器，表示选择所有元素（通配符有效率问题，实际工作中不使用，大多使用并集选择器，用逗号隔开）

7，盒子水平垂直居中

  <style>
        section {
            width: 300px;
            height: 200px;
            background-color: skyblue;
            /*第一种： 盒子水平居中 */
            /* margin: 0 auto; */
            /* margin: 上150px 水平居中对齐 下0px  第二种方法的应用场景在于，需要当前盒子距离顶部 150px, 水平居中对齐，距离底部0px 类似这样的需求时使用*/
            margin: 150px auto 0;
            /* 文本内容水平居中 */
            text-align: center;
            /* 文本内容垂直居中 行高=box高度可实现 */
            line-height: 200px;
        }
    </style>

</head>

<body>

    <section>我是文档区域标签</section>

</body>

8，盒子模型占位计算

content是盒子模型的内容区，内容区的宽度和高度就是子元素最大宽高。

如果只有一个子元素，子元素的宽度超过父元素，就会溢出
如果有多个子元素，子元素（行内元素，行内块元素）的宽度加起来超过了父元素，那么超过的那些子元就会换行显示

（1）盒模型的可视区

可视区宽=内容区宽+左右内边距宽+左右边框宽

可视区高=内容区高+上下内边距高+上下变宽高

（2）盒模型实际占位

加上外边距

9，怪异盒模型(css3中新增)

（1）box-sizing是什么？

将盒子添加 box-sizing: border-box;属性，盒子的 width、height 数字就表示盒子实际占有的宽度（不含 margin）

即 padding、border 变为内缩的，不再外扩
box-sizing 属性 大量应用于移动网页制作中 ，因为它结合百分比布局、弹性布局等非常好用，在 PC 页面开发中使用较少
由标准盒模型的可视区宽（高也一样）：width/height（100px）+padding（10px）+border（10px）=120px变为

可视区宽/高=100px===>width/height=100-10x2-10x2=60px

(2)button是典型的怪异盒模型。自带box-sizing: box-border;属性

(3)我们通过 box-sizing 属性来切换标准盒子模型与怪异盒子模型

box-sizing：content-box 是默认值，盒子以标准盒子模型特性来渲染
box-sizing: border-box 盒子以标准盒子模型特性来渲染

(4)应用场景

如果我们期望不管内容区，边框、内边距大小如何变化，元素的可视宽高始终不变时，就可以给元素添加 box-sizing:border-box;属性，以怪异盒模型来渲染。
不管元素的占位宽如何变化，始终保持边框和内边距不变，希望通过改变内容区大小来达到目的。
常见的响应式开发中、栅格系统等。