这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

重点

CSS是什么
权重计算
CSS布局

CSS是什么？

CSS(层叠样式表，Cascading Style Sheets)，用来定义页面元素的样式，也就是说，修饰HTML标签元素的，比如设置标签里面的字体和颜色，设置图片的位置和大小，给按钮添加动画效果......

🍕举个栗子

<h1>我是一级标题</h1>

h1 {
    color: white;
    font-size: 14px;
}

这里 h1 是标签名,后面的 CSS 样式写在花括号里面，每个样式写完用分号隔开。

🍔在页面中使用CSS的三种方式

外链：从页面外引入 css 文件，href 属性后面是 css 文件路径
嵌入：在页面中的 style 模块写 css
内联：写在 html 标签里面

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
<style>
    li { margin : 0; list-style: none; }
    p { margin: 1em 0; }
</style>

<!-- 内联 -->
<p style="margin: 1em 0">Example Content</p>

🍟css 是如何工作的

🌭选择器 Selector

---- 找出页面中的元素，以便给他们设置样式

按照标签名、类名或 id
按照属性
按照DOM树中的位置

选择器特异度(Specificity)

下面的问题：

涉及到选择器的权重问题，选择器的权重的值可以表示为四个独立的部分 a,b,c,d 组成。进行复合选择器的权重计算时四个部分是独立的，不会出现进位。在比较大小时按从 a-b-c-d 的顺序依次进行比较，高位相同才需要比较低位。

权重计算

🍿后代选择器、子选择器、兄弟选择器、交集选择器：所有的基础选择器的权重相加（忽略掉 “>” 和 “+” ），注意没有进位。

#header nav ul li.current a:hover {
    color: red; font-weight: bold;
}
/*权重0,1,0,0+(0,0,0,1)*3+0,0,1,0+0,0,0,1+0,0,1,0=0,1,2,4
权重id+标签*3+类+标签+伪类*/
#header>div+nav ul li.current a:hover {
    color: red; font-weight: bold;
}
/*权重0,1,0,0+(0,0,0,1)*4+0,0,1,0+0,0,0,1+0,0,1,0=0,1,2,5
权重id+标签*4+类+标签+伪类*/

🥓并集选择器：相当于多个选择器一起设置样式，权重分开计算即可。
🍳含有伪类、伪元素、属性选择器的复合选择器的权重计算时要注意。

CSS 布局

🧇布局（Layout）是什么？

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

🥞布局相关技术

盒子模型
浮动
绝对定位

width

指定 content box 宽度
取值为长度、百分数、auto
auto 由浏览器根据其他属性确定
百分数相对于容器的 content box 宽度

height 指定 content box 宽度

取值为长度、百分数、auto
auto 由浏览器根据其他属性确定
百分数相对于容器的 content box 宽度
容器有指定的高度时，百分数才生效

padding

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

border

指定容器边框样式、粗细和颜色
三个属性
- border-width
- border-style
- border-color
四个方向
- border-top
- border-right
- border-bottom
- border-left

margin

指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器宽度

🍞常规流 Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流
其他元素都在常规流之内（in-flow）
常规流中的盒子，在某种排版上下文中参与布局

🥨Flex Box 是什么？

控制子集盒子的：

摆放的流向（上下左右）
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行

【CSS | 青训营笔记】

重点