这是我参与「第五届青训营」伴学笔记创作活动的第 2 天，勤能补拙，加油

深入CSS(上)

优先级

选择器的特异步，越特殊的选择器，特异步越高


<article>
    <h1 class="title">万达广场</h1>
</article>
<style>
    .title {
        color: blue;
    }

    article {
        color: red;
    }
</style>

选择器的特异步(Specificity)

	#(id)	.(伪类)	E(标签)	特异度
#nav .list li a:link	1	2	2	122
.hd ul.links a	0	2	2	22

选择器的特异度(Specificity)


<div class="btn">普通按钮</div>
<div class="btn primary">主要按钮</div>

<style>
    .btn {
        display: inline-block;
        color: #333;
        background-color: #e6e6e6;
    }

    /*这里的样式会覆盖上面的样式*/
    .btn.primary {
        color: #fff;
        background-color: #218de6;
    }
</style>

继承

某些属性会自动继承其父元素的计算值，除非显示指定其它值

文字相关的可继承
盒模型相关的不可继承

显示继承--inherit

不可继承的变为可继承

初始值

CSS中，每个属性都有一个初始值
- background-color的初始值为 transparent
- margin-left初始值为0
可以使用initial关键字显示重置为初始值
- background-color:initial

求值过程

03深入CSS(上)_01.png

布局(Layout)

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

03深入CSS(上)_02.png

常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
浮动
绝对定位

盒模型

03深入CSS(上)_03.png

width height

指定content box宽度(高度)
取值为长度(高度)、百分数、auto
auto取值由内容计算的来
百分数相对于容器的content box高度(宽度)
容器由指定的高度时，百分数才生效

03深入CSS(上)_04.png

padding

指定元素四个方向的内边距
百分数相对于容器的宽度

border

指定容器边框样式、粗细和颜色

当四条边框颜色不同时

margin

指定元素四个方向的外边距
取值可以是
margin:auto 水平居中

margin collapse
垂直方向有margin时，取较大值

box-sizing:border-box(使用的更多)

overflow

visible
hidden
scroll

深入CSS(上) | 青训营笔记