前端学习笔记——CSS（二）

原创已于 2022-08-15 18:45:10 修改 · 496 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #html

于 2022-07-26 17:11:15 首次发布

本文详细介绍了CSS中的伪元素、单位、三大特性、文档流与盒模型以及常用属性设置。伪元素如`::before`和`::after`用于在元素前后插入内容。CSS单位包括长度单位（px, em, rem等）、比例单位（%）和颜色单位（颜色名，RGB，RGBA等）。CSS的三大特性包括层叠性、优先级和继承性。文档流定义了元素的默认排列方式，盒模型则描述了元素的尺寸计算。最后，文章分享了一些CSS属性的实用技巧，如元素居中和阴影设置等。

一、伪元素

伪元素：页面中一些特殊的元素，并不是常规的标签元素。
格式：伪元素通常由::开头。
常用伪元素：

伪元素	作用
::first-letter	第一个字母
::first-line	第一行文字
::selection	被选中的内容
::before	元素开始的位置
::after	元素结束的位置

伪元素似乎无法直接对行内元素下的内容生效
在这里插入图片描述

但可以对块元素下内容直接生效或对块元素下的行内元素的内容间接生效

::before和::after使用时必须设置content属性，否则会无效

二、CSS中的单位

1.长度单位

px
网页构建中使用最频繁的单位，是一个绝对单位。屏幕（显示器）实际上就是由一个一个的小点（像素点）构成的，一个小点就是一像素，不同屏幕的像素大小是不同的，同样的200px在不同的设备上显示的效果可能有微小差异！
em
相对单位，以父元素在font-size中设置的值为基准。
rem
相对单位，以根元素在font-size中设置的值为基准。
vw和vh
相对单位，以视口大小为基准。
注意：假如父元素设置font-size=20px，子元素设置font-size=3em，子元素的子元素的1em仍然是等于20px

2.比例单位

%
%也可以用于指定长度，但不仅限于此，比如动画中可以用来指定关键帧。

3.颜色单位

颜色名
直接指定颜色名，如red，blue，yellow等。
RGB与RGBA
rgb（red，green，blue）指定红绿蓝三原色的深度，取值为0到255，rgba在此基础上增加了透明度，取值为0到1。
十六进制
#加六位十六进制数，同样是指定红绿蓝三原色，每两位十六进制数指定红绿蓝中的一种。

三、CSS三大特性

1.层叠性

当一个元素被多个相同优先级的选择器同时选中，并对相同的属性设置不同的值，会优先使用靠近元素的选择器所设置的样式，当选择器优先级不同时，层叠行无法解决样式冲突。

2.优先级：

选择器	权重
`*` 通配符选择器	没有权重
元素选择器	0，0，0，1
类、伪类	0，0，1，0
id选择器	0，1，0，0
行内样式	1，0，0，0
！important	权重最大

3.继承性

一些通用的样式属性，可以被后代元素继承。可继承的属性包括但不限于：字体相关、列表相关、文本相关。

四、文档流与盒模型

1.文档流

文档流又叫常规流，网页是一个多层的结构，最底层就是文档流，默认情况下所有的元素都是在文档流中遵循其规则进行排列的。元素要么在文档流中（块元素、行内元素、行内块元素），要么就脱离文档流（浮动、绝对定位）。

2.盒模型

页面中所有元素，其本质都是一个矩形盒子，页面就是由一个一个地矩形盒子组成的，网页的布局就是把这些盒子摆放在合适的位置上。
CSS将盒模型分为两类：标准盒模型与IE盒模型。
不论是哪类盒模型都是由内容+内边距+边框+外边距四部分组成的，区别在于内边距与边框会影响标准和模型的可见框大小而不会影响IE盒模型的可见框大小。
内边距：padding
边框：border
外边距：margin
边距只能设置大小，而边框还能设置颜色（color）和风格（style），三个属性都能单独设置上、下、左、右其中一个方向，也能同时设置四个方向。