网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
复合选择器
后代选择器
概念
后代选择器又称为包含选择器
语法
.class h3{color:red;font-size:16px;}
作用
用来选择元素或元素组的子孙后代
把外层标签写在前面，内层标签写在后面，中间用空格分隔
子元素选择器
语法
.class>h3{color:red;font-size:14px;}
作用
子元素选择器只能选择作为某元素子元素(亲儿子)的元素
把父级标签写在前面子级标签写在后面中间跟一个>连接
交集选择器
条件
由两个选择器构成，找到的标签必须满足：既有标签一的特点也有标签二的特点
语法
第一个为标签选择器第二个为class选择器，二者间不能有空格
并集选择器
并集选择器是各个选择器通过 , 连接而成的，通常用于集体声明
应用
某些选择器定义的相同样式可利用并集选择器，让代码更简洁
语法
并集选择器用逗号隔开的，所有选择器都会执行后面样式
伪类选择器
作用
用于向某些选择器添加特殊的效果。如给链接添加特殊效果
链接伪类
a:link /* 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标移动到链接上 /
a:active / 选定的链接 */
行高
基线和基线的距离为行高
单行文本垂直居中
文字的行高等于盒子的高度，行高 = 上距离 + 内容高度 + 下距离
行高和高度的三种关系
如果行高等于高度文字会垂直居中
如果行高大于高度文字会偏下
如果行高小于高度文字会偏上
标签显示模式
什么是标签显示模式
标签以什么方式进行显示，比如div自己占一行， span一行多个
作用
网页标签非常多不同地方用不同类型的标签以便更好的完成网页
分类
块级元素
特点
一行只能放一个块
高度，宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素
行内元素
特点
相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素
注意
链接里面不能再放链接
特殊情况a里面可以放块级元素
行内块级元素
特点
和相邻行内元素在一行上,但是之间有空白缝隙，一行可显示多个
默认宽度就是它本身内容的宽度
高度，行高、外边距以及内边距都可以控制
标签显示模式转换
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
CSS特性
层叠性
概念
层叠性是指多种CSS样式的叠加
原则
样式冲突，遵循的原则是就近原则
样式不冲突，不会层叠
继承性
概念
子标签会继承父标签的某些样式，如文本颜色和字号
优先级
概念
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时
选择器相同，则执行层叠性
选择器不同，就会出现优先级的问题
权重计算公式
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity
权重叠加
交集选择器后代选择器是有多个基础选择器组合而成，会出现权重叠加
继承的权重是0
修改样式要看该标签是否被选中
如果选中以上面公式计权重
如果没有选中，那么权重是0
CSS背景
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
扫一扫
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
