这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
一、本堂课重点内容：
- 选择器的特异度(Specificity)
- CSS求值过程
- CSS继承
- 布局相关技术
二、详细知识点介绍
选择器的特异度(Specificity)
假如一个元素符合多个选择器，那么究竟该用 哪一个选择器的样式？
选择器特异度决定了选择器的优先级，元素使用优先级最高的那一个样式，其中优先级如下，整体来说越特殊的优先级越高
- !important，加在样式属性值后，权重值为 10000
- 内联样式，如：style=””，权重值为1000
- ID选择器，如：#content，权重值为100
- 类，伪类和属性选择器，如： class="content"、:hover 权重值为10
- 标签选择器和伪元素选择器，如：div、p、:before 权重值为1
- 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
CSS继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值。一般来说和文字相关的属性都是可以继承的，盒子模型相关的属性都是不可以继承的。
显式继承
可以用inherit来让原本不可继承的属性变成可以继承的
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
.some-widget {
box-sizing: content-box;
}
初始值
如果找到头都没有找到指定的数值，那么就用初始值
- CSS 中，每个属性都有一个初始值
-
- background-color 的初始值为 transparent
- margin-left 的初始值为0
- 可以使用 initial 关键字显式重置为初始值
-
- background-color: initial
CSS求值过程
注意计算值和使用值的区别，计算值就是你拿到CSS就能直接得到的，使用值最典型的就是百分比数值，百分比的具体数值就是在计算值里面存着
继承的元素继承的是父元素的计算值
布局
布局相关技术
盒模型
width
- 指定 content box 宽度
- 取值为长度、百分数、auto
- auto 由浏览器根据其它属性确定
- 百分数相对于容器的 content box 宽度
height
- 指定 content box 高度
- 取值为长度、百分数、auto
- auto 取值由内容计算得来
- 百分数相对于容器的 content box 高度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数指的是相对于容器宽度
boeder
指定容器边框样式、粗细和颜色
三种属性
- border-width
- border-style
- border-color
四个方向
- border-top
- boder-right
- border-bottom
- border-left
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
margin collapse
margin在垂直方向上只会取相邻盒子中margin最大的那一个作为间距
<div class="a"</d1v>
<div class="b"></div>
<style>
.a {
background: lightblue;
height: 100px;
margin-bottom:100px;
}
.b {
background: coral;
height: 100px;
margin-top:100px
}
box-sizing
有borderbox和contentbox，建议使用borderbox
溢出部分控制overflow
一共有visible、hidden、scroll三个属性
三、实践练习例子：
利用边框绘制三角形
/* 正三角 */
.up-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 25px 40px 25px;
border-color: transparent transparent rgb(245, 129, 127) transparent;
}
/* 倒三角 */
.down-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 40px 25px 0 25px;
border-color: rgb(245, 129, 127) transparent transparent transparent;
}
div:last-child {
margin-top: 1rem;
}
四、课后个人总结：
- 多练
