这是我参与「第五届青训营 」伴学笔记创作活动的第3天
选择器的优先级
如果两个选择器给同一个元素，这个元素的样式应该被哪个选择器控制？
- 此时应该根据各个选择器的优先级决定优先使用哪个样式
-
!important内联样式优先级最高- 其次是内联样式
- 最后 id选择器的数量 类/(伪类)选择器的数量 元素选择器的数量 优先级依次从高到低
- 从左往右依次比较 谁大 用谁的样式
- 注意，这个三位数不存在进位，
1-0-0 比 0-11-0 大
继承
- 某些属性会自动继承其父元素的计算值（默认继承）
- 有些值默认不继承，于是我们可以显式地去让它继承，
box-sizing: inherit
这样写的好处：让父亲盒子为某种box，其子代盒子就全部是content-box / border-box
初始值
- CSS中，每个属性都有一个初始值
- 对于继承属性，其初始值来自于继承
- 对于非继承属性，其初始值
- "background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial关键字显式重置为初始值
background-color:initial
css求值过程
计算值
developer.mozilla.org/zh-CN/docs/…
布局（Layout）
盒模型
- 每一个元素都是一个盒子
width
- 指定
content box宽度 - 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的
content box宽度
height
- 指定
content box高度 - 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才生效 (父容器需要有确定的高度)
padding 内边距
border
- 设置边框的粗细 颜色 样式
.box {
border-width: 50px;
border-style: solid;
border-color: #f35 transparent transparent transparent;
margin: 1em auto;
}
这样就能得到一个三角形 直角向下
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
margin-left: auto && margin-right: auto可以实现水平居中
margin collapse 外边距折叠
- 两个相邻的上下盒子，上方的盒子添加margin-bottom，下方的盒子添加了margin-top，这两个外边距会取更大的值作为两者的间距，而不是两个margin值相加
box-sizing：border-box
- 默认是
content-box,你设置的宽高仅仅是 content - 可以指定为
border-box, 你设置的宽高 为 border+padding+content
overflow
- 默认为visible 超出盒子的部分显示出来
- hidden 超出盒子的部分被隐藏
- scroll 超出盒子的部分可以通过滚动显示出来
块级&行级
比较
| Block Level Box | Inline Level Box |
|---|---|
| 不和其他的盒子并列摆放 | 和其它行级盒子一起放在一行或拆开成多行 |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用（由content撑开） |
块级元素 与 行级元素
| 块级元素 | 行级元素 |
|---|---|
| 生成块级盒子 | 1.生成行级盒子 2.内容分散在多个行盒(line box)中 |
| section、.h1-6、p、ul、Ii等 | body、article、div、main、span、em、strong、cite、code等 |
| display:block | display:inline |
display 的属性
- block 块级盒子
- inline 行级盒子
- inline-block
- 本身是行级，可以放在行盒中；
- 可以设置宽高；
- 作为一个整体不会被拆散成多行
- 将对象呈现为inline对象，但是对象的内容将呈现为block对象
- zhuanlan.zhihu.com/p/31856017
- none 排版时完全忽略
行级排版上下文（Inline Formatting Context）IFC
- 只包含行级盒子的容器会创建一个IFC
- inline 和 inline-block 都可
IFC的排版规则
1.盒子在一行内水平摆放
2.一行放不下时，换行显示
3.text-align决定一行内盒子的水平对齐
4.vertical--align决定一个盒子在行内的垂直对齐
5.避开浮动(float)元素*
overflow-wrap: break-word设置过长的单词折断换行显示
块级排版上下文（Block Formatting Context）BFC
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
display:flow-root;它可以创建无副作用的 BFC。在父级块中使用即可以创建新的 BFC。
BFC排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC盒子中的margin不会与外部的合并
- BFC不会和浮动元素重叠
Flex Box
什么是Flex Box？
- 它可以控制子级盒子的：
- 摆放的方向
- 盒子的宽度和高度
- 水平和垂直方向的对齐
- 摆放顺序
- 是否允许折行
摆放的方向 flex-direction（row为默认）
- row 和 row-reverse 设定横向的主轴
- column 和 column-reverse 设定竖直方向为主轴
- display:flex的子级盒子会沿主轴方向依次排列
沿主轴方向的对齐 justify-content(flex-start为默认)
沿侧轴方向的对齐 align-items(flex-start为默认)
单独设置某个元素沿侧轴方向单独对齐 align-self
设置摆放的顺序 order
是否允许折行 flex-wrap
flex-wrap: wrap/no-wrap
Felxibility
用于设置子想的弹性，有剩余空间时，会伸展；空间不足时，会收缩。
flex-grow 存在剩余空间时的伸展能力（默认为0）
- 计算规则：
- 当存在剩余空间时， 计算处剩余总空间 W
- 某个单独的一个子级元素设置的 flex-grow 为 g
- 所有子级元素设置的flex-grow 为 T
- 子元素的伸展空间为
W * (g/(T - g))
flex-shrink 容器空间不足时的收缩能力（默认为1）
- 计算规则
- 当剩余空间不足时，计算溢出的总空间W
- 某个单独的一个子级元素设置的 flex-shrink 为s
- 某个单独的一个子级元素设置的 width/flex-basis 为b
- 计算出总权重X（每个子级元素的
s*b相加） - 最终缩小的空间值为
W*((s*b)/X)
然后就遇到了设置了padding之后不缩小的情况 然后就找到了这篇文章 大佬很厉害
flex-basis 没有上述两种情况时的基础长度（默认为auto）
此项属性优先级比width 要高 两者同时存在时，优先使用此属性
flex 简写
| 一般顺序如右 | flex: flex-grow flex-shrink flex-basis; |
|---|---|
| 例 | |
| flex: 1 | flex-grow: 1 |
| flex: 100px | flex-basis: 100px |
| flex: 2 1 | flex-grow: 2; flex-shrink: 1; |
| flex: 1 100px | flex-grow: 1; flex-basis: 100px; |
| flex: 2 0 100px | flex-grow: 2; flex-shrink: 0; flex-basis: 100px; |
| flex: auto | flex: 1 1 auto |
| flex: none | flex: 0 0 auto |
grid布局
- 使用步骤
grid-template
- grid-template-columns 规定 每一列的长度
- grid-template-rows 规定 每一行的长度
- cdpn.io/webzhao/deb…
grid line 网格线
- 怎么划分的？
- 如何规定某一部分占比？
- cdpn.io/webzhao/deb…
浮动
- 实现文字围绕图片的效果
点我进mdn
定位
position 属性
- static 默认值，非定位元素
- relative 相对自身原本位置偏移，不脱离文档流
- absolute 绝对定位，相对非static祖先元素定位
- fixed 相对于视口绝对定位
点我进mdn
