本文作者在学习Vue项目后重新回顾CSS，强调了原生CSS样式的重要性。文章涵盖了引入外部样式表的方法，样式优先级（内联样式>内部样式表>外部样式表），ID的唯一性，选择器的使用，提高优先权的方法（如使用`!important`），并讨论了各种选择器的优先级顺序，以及CSS中的布局、对齐和显示属性等基础知识。
距上次学习CSS已有五个月之久，在这期间，博主一直在学习Vue相关知识以及完成相关项目，由于项目使用外部组件居多，因此许多CSS样式都生疏了，博主始终认为原生CSS样式是从事前端行业的基础，不能因为组件的便利，而忽略最根本的样式，因此近期重新回顾了一遍CSS知识，并以此博客记录我常忘的知识点。
1.如何引入外部样式表
<link rel="stylesheet" type="text/css" href="css/index.css"/>
其中rel的英译为relationship。
2.内联样式、内部样式表、外部样式表的优先级排序
内联样式 > 内部样式表 > 外部样式表
3.id是唯一的，不能重复使用
错误写法如下：
<style>
#box {
width: 100px;
height: 100px;
background-color: black;
}
</style>
<body>
<div id="box"></div>
<div id="box"></div>
</body>
4.属性选择器的使用
5.如何提高样式优先权
由于内联样式优先权高于内部样式表，因此下图右侧容器颜色为red，那么，在不修改内联样式的前提下，如何才能让内部样式表内的背景色优先级更高呢
在样式后面使用!important可以实现上述需求。
!important是最高级别优先级。
6.选择器的优先级顺序
!important > id选择器 > class选择器 | 属性选择器 > 标签选择器 > 通配符*
计算权重使用的是权重相加。
7.并列选择器的使用
并列选择器非常适合样式类的封装，是一种非常实用的样式定义方法
8.浏览器对父子选择器的匹配规则
浏览器对父子选择器的匹配规则是从右到左，从下到上，如上图结构所示，如若从上往下匹配，一旦匹配错，就掉头再匹配另一条路线，将导致效率低下。
9.一个命名规则
复合类名时，id用下划线，Class用中横线
.btn-success
#btn_success
10.overflow
overflow: hidden | scroll | auto
hidden表示溢出隐藏，scroll表示溢出增加滚动条
11.font-size
字体大小，修改字体大小影响的是容器的高度，宽度会自适应，浏览器默认的字体大小是16px。
14px、12px、16px较为常用。
12.font-weight
字体粗细
font-weight: lighter | normal | bold | bolder | 100-900
lighter表示细体，很多字体是没有细体的，同理也有很多字体没有粗体bold。
13.font-style
字体样式
font-style: italic | oblique | normal
italic和oblique都是斜体样式，当字体无法使用italic样式时，尝试使用oblique。
14.border-width
{
border-width: 1px; 上下左右边框
border-width: 5px 10px; 上下 左右边框
border-width: 5px 2px 10px; 上 左右 下边框
border-width: 1px 3px 5px 7px; 上 右 下 左边框
}
得到一个三角形
15.em
1em = 16px;
行高的1.2倍：line-height: 1.2em;
16.text-decoration
17.cursor
cursor: not-allowed | pointer
not-allowed：禁用符号
poniter：小手
18.单行文本截断、加省略号
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
19.内联块
内联块之间如果有空格或者换行都会转换为空格，要想清除渲染结果之间的空格，需要清除换行和空格。
20.伪类选择器:hover
:focus
21.visibility:hidden和display:none的区别
visibility:hidden：保留被隐藏的元素所占据的HTML文档空间
display:none：不保留被隐藏的元素所占据的HTML文档空间
22.孩子选择器
序号n从1开始计算
:nth-child(n)：选中第n个孩子。
:nth-child(odd)：选中所有奇数孩子。
:nth-child(even)：选中所有偶数孩子。
:first-child：选中第一个孩子。
last-child：选中最后一个孩子。
23.垂直对齐vertical-align
适用于行内块和行内元素文本对齐的问题。
vertical-align: top | middle | bottom：垂直上、中、下对齐。
vertical-align: -30px：垂直向上30像素对齐。
24.两栏的代码实现
25.::before和::after
经常用在小图标的前后增加样式
26.background-xxxx
background-repeat：repeat | no-repeat | repeat-x | repeat-y。
background-position：可以指定背景的位置
background-position: center center：居中，也可以使用50%,50%，也可以使用像素。
background-size：有两个重要属性，cover、contain。
cover是让背景图片覆盖盒子，背景图片的宽高比例保持不变，填满盒子会自动裁剪掉溢出的部分，这样能够解决浏览器页面缩小时图片主体不能全面展示的问题。
contain是让背景图片包含在盒子里面，背景图片只有长或者宽填满盒子。
扫一扫
7869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
