理解CSS|青训营笔记
CSS发展史
- 现如今已经是CSS3了
基础知识
- 层叠样式表、优先级
- 层叠三大规则
- 样式表来源
- 选择器优先级
- 内联（不属于选择器）>id>class = attribute = pseudo-classs > type = pseudo-element
- 源码位置
- 思考：
- 选择器尽量少使用id，减少了复用，优先级也高
- 尽量不使用！important
- 自己的样式加载到引用库样式后面（保证自己的样式生效）
- 继承
- 可以使用inherit关键字指定一个属性从父元素继承
- CSS值和单位
- 盒模型
- 三角形用了盒模型的border属性
- 矩形使用了盒模型的百分比和padding
- 水平居中是margin：auto
- 渐变边框是使用背景的background-clip
- 负外边距：
- 左边或者顶部是负数，那么元素就会向左或者向上移动
- 右边或者底部是负边距，那么不会移动元素，但是会把后面的元素拉过来
- 布局
- 常规流 ： 默认的布局方式
- 外部显示类型（block（块级元素））和内部显示类型（inline（内联元素））
- BFC块级格式化上下文
- display：inline-block、flow-root
- position: fixed、absolute
- float：不为none
- Overflow：不为visible
- 关于外边距塌陷：
- 两个兄弟元素之间相邻的上下外边距
- 父子元素之间相邻的上下外边距
- 内容为空元素自己上下外边距相邻
- 消除外边距塌陷的方法
- 在两个相邻的边距之间增加border\padding或者内联元素，让他不相邻
- 在父子元素重叠的时候，除了上述方法，可以设置父元素为BFC。
- Float：浮动流，脱离文档流
- Positioning：定向流，fixed和absolute脱流
- CSS3新增布局
- Flex弹性盒子布局
- 作用在父元素的
- 建立一个弹性盒子 display：flex
- 规定盒子的主轴方向 flex-direction
- 子元素折行显示 flex-wrap
- 主轴方向子元素排列方式：justify-content
- 交叉轴方向子元素对其：align-item
- 作用在子元素的
- Grid网格布局
- Multicol多列布局
