深入css|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的的第三天，今天深入学习css。
本堂课重点内容
- 选择器特异度
- 继承
- css求值过程
- 布局
详细知识点介绍
1 选择器特异度
- id>（伪）类 >标签
- 多条规则作用于相同的元素，涉及到选择器优先级问题
2 继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值
一般来说，CSS里和文字相关的属性都是可以继承的，和盒模型相关的属性都是不可以继承的
CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial关键字将属性值显示的重置为初始值
3 CSS求值过程
- filtering
- cascading
- defaulting
- resolving
- formatting
- constraining
4 布局
4-1 布局基础
-
布局的定义：确定内容的大小和位置的算法
-
依据元素、容器、兄弟节点和内容等信息来计算
-
分类
-
-
常规流：基于块级元素和行级元素
-
-
块级block level box：不和其他盒子并列摆放，适用于所有的盒模型属性
-
行级inline level box：和其他行级盒子放在一起或者拆开成为多行，盒模型中的width、height不适用
-
display属性
- block：块级盒子，可以设置宽高、作为一个整体不会被拆散为多行
- inline：行级盒子，可以和其他行级元素并排摆放
- inline-block：本身是行级，可以和其他行级元素并排摆放；但同时也具有块级元素的特点，例如可以设置宽高、作为一个整体不会被拆散为多行
- none：排版时被忽略
-
-
浮动流
-
绝对定位：覆盖在常规流的上面，而不会影响常规流
-
-
盒模型（content-box）
-
-
width
- 指定content box 宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
-
height
- 指定content box 高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器父级有指定的高度时，百分数才生效
-
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
-
margin
-
指定元素四个方向的外边距
-
百分数相对于容器宽度
-
设置
margin-left: auto; margin-right: auto相当于水平居中的效果 -
margin collapse
- margin在垂直方向会出现边距合并的现象
-
-
border
- border-width
- border-style
- border-color
-
-
盒模型（border-box）
-
-
overflow
- visible：不会触发BFC
- hidden
- scroll
-
4-2 排版方式
1. IFC（Inline Formatting Context）
-
只包含行级盒子的容器会创建一个IFC
-
IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动元素（float）
2. BFC（Block Formatting Context）
-
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display：flow-root
-
BFC内的排版规则
-
盒子从上到下摆放
-
垂直margin合并
-
BFC内盒子的margin不会与外面的合并
-
案例：阻止垂直margin合并的方法，将两个盒子分别置于不同的BFC容器中
-
BFC不会和浮动元素重叠
-
-
BFC的作用
- 解决外边距折叠问题
- 制作两栏布局
- 清除元素内部的浮动
-
BFC的问题
- 一个产生了BFC的盒子，内部元素浮动的话不就违背了BFC内部从上向下依次摆放的原则吗
3. Flex Box
-
一种新的排版上下文
display:flex -
可以控制子级盒子的
- 摆放流向
- 摆放顺序
- 盒子的宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
-
引入主轴和侧轴的概念
-
主轴
-
justify-content- 该属性用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
- flex-start
- flex-end
- space-between
- space-around
- space-evenly
- center
-
-
侧轴
-
align-items- 该属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
- flex-start
- flex-end
- stretch
- baseline
- center
-
align-self
- 可以单独为flex容器内部的指定元素设置align-self属性，使指定元素拥有不同的排版方式
-
-
Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；空间不足时，会收缩
flex-grow有剩余空间时的伸展能力，value是number类型flex-shrink容器空间不足时收缩的能力flex-basis没有伸缩或收缩时的基础长度
-
flex-directionrow-reversecolumncolumn-reverse
-
缩写
-
4. Grid
-
display:grid使元素生成一个块级的Grid容器 -
使用
grid-template相关属性将容器划分为网络grid-template-columns: 30% 30% autogrid-template-rows: 100px auto
-
设置每一个子项占哪些行/列
-
grid-area: 1/1/3/3 -
5. Float (less use)
文字环绕效果
6. position属性
-
static : 默认值，非定位元素
-
relative：相对定位，相对自身原本位置偏移，不脱离文档流
- 在常规流内布局
- 相对于自己本应该在的位置进行偏移
- 使用top/left/bottom/right设置偏移长度
- 流内其他元素当它没有偏移时一样布局
-
absolute：绝对定位，相对非static祖先元素定位（子绝父相）
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
-
fixed：相对于视口绝对定位
课后个人总结
今天深入认识了css，重点了解了它的布局，明白了要保持好奇心，善用浏览器的开发者工具，持续学习CSS的新特性。
