这是我参与「第四届青训营 」笔记创作活动的第1天

1 认识CSS

---

CSS样式表

分为四种分别为外联式 嵌入式 内联式 导入式

link和@import同属外部样式表

区别

0. link是html标签 @import是css提供的
1. 页面被加载时 link标签会同时加载，而import引用的css会等到页面被加载完成才会加载
2. import只能在IE5以上识别 而link是标签无兼容问题
3. 可以通过js操作dom，插入link标签改变样式，而dom是基于文档的，无法使用@import插入样式
4. 如果同时引用然后存在相同的样式，import的样式会被css文件层叠掉，link的方式样式权重高于import的权重。

CSS是如何工作的

2 CSS选择器

找出页面中的元素给其设置样式

2.1 选择器类型

• 通配符选择器
• 标签选择器/元素选择器
• id选择器
• 类选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器

属性选择器的三种使用方式

0. 全局匹配

 [disabled] {
   color: red;
   font-size: 20px;
 }

会作用到全部包含disabled属性的元素上

2.与标签选择器混用

 input[type='password'] {
   color: red;
   font-size: 20px;
 }

与标签选择器一起使用 只会作用到符合条件的元素上

3.部分匹配

  a[href^='#']{
   color: red;
   font-size: 20px;
 }
  a[href$='.jpg']{
   color: red;
   font-size: 20px;
 }

2.2 选择器组合

可以多个选择器并列，用逗号隔开

2.3 选择器权重

权重，CSS中用四位数字表示权重，权重的表达方式如：0，0，0，0

选择器	权重
元素（标签）选择器	0001
类选择器	0010
id选择器	0100
后代选择器	为包含选择符的权重之和
内联样式	1000
!important	10000

• 当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式
• 相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式

3 颜色

---

RGB表示：颜色名 或

RGBA：A表示透明度

L：高接近白色，低接近黑色

4 字体

---

常用属性

1. font-family 字体类型

2. font-size ：字体大小

3. font-style ：字体风格

4. fong-weight：字体粗细

5. line-height ：行高

6. text-align ：文字对齐方式

7. letter-spacing ：字母间距

8. word-spacing ：单词间距

9. font：font-style font-weight font-size / line-height font-family 的简写。

5 属性值继承问题

---

某些属性会自动继承自父元素的计算值，除非显示的指定一个数值，一般跟文字相关的都会自动继承，和模型相关的不会继承，显示继承可以使用inherit属性

初始值：如果没有指定同时也没有继承到值则使用初始值

• css 中，每个属性都有一个初始值，如：

  • background-color的初始值为transparent
  • margin-left的初始值为0

• 可以使用initial关键字显式重置为初始值

  • background-color: initial

6 CSS求值过程

---

cdpn.io/webzhao/deb…

7 布局

---

常规的盒子模型

width

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

height

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

padding

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

border

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

margin

• 指定元素四个方向的外边距
• 取值可以是长度、百分数、auto
• 百分数相对于容器宽度
• margi:0 auto 可以设置水平居中

margin塌陷问题

盒模型分类

• box-sizing设置为content-box的时候为标准盒模型
• box-sizing设置为border-box时为怪异(IE)模型，width就是content+padding+border

块级元素和行内元素

8 布局中的常规流

---

行级排版上下文

• lnline Formatting Context (IFC)

• 只包含行级盒子的容器会创建一个IFC

• IFC内的排版规则

  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align决定一行内盒子的水平对齐
  • vertical-align决定一个盒子在行内的垂直对齐
  • 避开浮动(float)元素*

块级排版上下文

• Block Formatting Context (BFC)

• 某些容器会创建一个BFC

  • 根元素 浮动、绝对定位、inline-block
  • Flex子项和Grid子项
  • overflow值不是visible的块盒
  • display: flow-root;

BFC内的排班规则：

• 盒子从上到下摆放
• 垂直margin合并
• BFC内盒子的margin不会与外面的合并
• BFC不会和浮动元素重叠

块级元素和行内元素共同出现在同一元素内

如果一个容器中同时有块级和行级 会为两行文字添加一个块级盒子 我们在布局中不会看到 css排版引擎中会处理

9 Flex Box布局

---

flex是一种弹性布局,一种新的排版上下文，当父盒子设置为display：flex时，里面的盒子都会变成它的子盒子，子盒子浮动会无效化

它可以控制子级盒子的：

• 摆放的流向(→ ←↑↓)
• 摆放顺序
• 盒子宽度和高度
• 水平和垂直方向的对齐
• 是否允许折行

容器

• flex-direction（主轴方向）
• flex-warp（换行）
• flex-flow（flex-direction和flex-warp）
• justify-content（主轴方向盒子、空隙排列方式）
• align-items（侧轴方向盒子排列方式）
• align-content（侧轴方向盒子、空隙排列方式，换行时有效）

子单元

• order（排列顺序）
• flex-grow（剩余空间放大比例）
• flex-shrink（剩余空间缩小比例）
• flex-basis（剩余空间具体分配空间）
• flex（前三总合）
• align-self（单个子盒子侧轴排列方式）

flex布局子元素不是行内块，是其布局的子元素，可以设置宽高

10 grid布局

---

flex流式布局仅仅能处理一维的布局，对于二维的布局来说处理能力很弱，所以二维使用grid布局。 布局有时候不是流式的一条线 所以flex不方便 所以grid主要是二维布局

11 布局中的float浮动

---

属性	描述	说明
float	float：left；	元素靠左边浮动
float	float：right；	元素靠右边浮动
float	float：none；	元素不浮动

0. 定义网页中其它文本如何环绕该元素显示
1. 浮动会脱离网页文档，与其他不浮动的元素发生重叠，浮动元素之间不会重叠
2. 但是不会与文字发生重叠，文字会环绕浮动元素显示
3. 元素如果有相同的浮动，就会横着排

类似word中的文字环绕

12 布局中的position

---