这是我参与「第五届青训营 」伴学笔记创作活动的第5天。
深入CSS
选择器的特异度
id 、（伪）类 、标签
CSS特异性就是CSS样式的权重计算。从而让哪些样式应用到元素上。
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值。
每一种选择器都有自己的权重，依次是
行内样式> ID选择器 > 类、属性、伪类 > 元素、伪元素选择器
显式继承
举个例子：
`{ box-sizing: inherit; }
html { box-sizing: border-box; }
.some-widget { box-sizing: content-box; } `
初始值
- CSS中，每个属性都有一个初始值
- background-color 的初始值为transparent
- margin-left 的初始值为0
- 可以使用initial关键字显式重置为初始值
- background-color： initial
CSS求值过程
优先级最高的一个属性值
条件筛选：选择器匹配、属性有效、符合当前media
布局是什么
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
常规流：行级、块级、表格布局、FlexBox、Grid布局
浮动 绝对定位
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
- 百分数相对于容器宽度
使用margin:auto水平居中
margin collapse
overflow
块级 行级
块级block level box
生成块级盒子 不和其他盒子并列摆放，适用所有的盒模型属性
body、article、div、main、section、h1-6、p、ul、li等
display：block
行级lnline level box
生成行级盒子，内容分散在多个行盒中
和其他行级盒子一起放在一行或拆开成多行
盒模型中的width、height不适用
display：inline
display属性
- block 块级盒子
- inline 行级盒子
- inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
- none 排版时完全被忽略
