尚硅谷web前端——CSS（二）_尚硅谷前端dom查询css样式-CSDN博客

本文链接：https://blog.csdn.net/qq_46258819/article/details/107759099

CSS（二）

文章目录

一、继承（样式的继承）
二、选择器的权重
三、em和rem
四、文档流
五、盒模型
六、元素水平方向布局
七、垂直方向布局
八、外边距的折叠（只有垂直方向才会发生重叠）

一、继承（样式的继承）

1、为元素设置的样式，同时也会应用到它的后代元素
2、继承是发生在祖先和后代元素之间，方便开发
3、利用继承，可以将通用样式放于共同的祖先标签中，仅需设置一次
4、并不是所有样式都会被继承如：背景相关，布局相关等

二、选择器的权重

1、发生样式冲突时，由选择器的权重来决定优先显示哪种样式
2、内联样式（1，0，0，0） id选择器（0，1，0，0），类和伪类选择器（0，0，1，0），元素选择器（0，0，0，1）
3、比较优先级时，需将所有选择器的优先级进行相加，优先级越高，越先显示分组选择器是单独计算
4、选择器的累加不会超过最大的数量级如：类选择器无论怎么加都不会高于ID选择器越具体的，优先级越高
5、若优先级相同，则优先使用靠下的样式——下一个样式将上一个覆盖了
6、通配选择器（0，0，0，0）继承的样式没有优先级
看图理解
在这里插入图片描述 7、！important 则此时该样式获得最高优先级
开发的时候慎用，改起来麻烦

三、em和rem

1、em是相对于元素的字体大小来计算的
2、1 em = 1 font-size
3、em会根据字体大小的改变而改变（自身字体）
4、rem是根据根元素的字体大小来计算(html)

四、文档流

1、网页是一个多层的结构，一层摞一层，文档流是网页的基础
2、创建的元素默认都是在文档流中进行排列的
3、块元素：

块元素在页面中独占一行，垂直排列
默认宽度是父元素的全部（会把父元素撑满）
默认高度是被内容撑开

4、行内元素：

不会独占一行，只占自身大小
行内元素在页面中自左向右，水平排列

五、盒模型

1、css将页面中的所有元素都设置为一个矩形的盒子
2、组成：内容区（content)、边框（border）、内边距（padding）、外边距（margin）
3、内容区（content）:元素中所有子元素和文本内容均在此排列
内容区的大小由width和height来设置
4、边框（border）：至少要设置border-width,border-color,border-style,

border-width可以不指定，一般默认3px
可以指定四个方向的值，四个值：上右下左，三个值：上左右下两个值：上下左右
border-xxx-width指定任意方向的宽度，单独指定某一边
border-color可以分别指定各个方向边框颜色，也可以不写，不写时默认是color的颜色
border-style指定边框样式:可选值：solid实现，dotted点状虚线，dashed虚线，double双线
border-xxx:none去掉某一个方向的边框

简写：
在这里插入图片描述 5、内边距（padding）：内容区和边框之间的距离，内边距会影响盒子大小，背景会延伸到内边距上
6、一个盒子的可见框大小由内容区，边框，内边距共同决定
7、外边距（margin）：不会影响盒子大小，会影响盒子的位置

margin-top上外边距正值：向下移动
margin-left 左外边距正值：向右移动
元素在页面中是按照自左向右的顺序排列
默认情况下，若设置为左、上外边距则移动自身，设置右、下外边距，则会移动其他元素
margin-bottom下外边距，设置政治，其下边的元素会向下移动
默认情况下，设置margin-right没有用

六、元素水平方向布局

1、元素在其父元素中水平方向的位置由以下几个属性共同决定：
margin-left、border-left,padding-left,width,padding-right,border-right,margin-right
2、水平方向布局必须满足以下的等式：上述七个元素相加之和=其父元素的内容区宽度