这是我参与【第四届青训营】笔记创作活动的第三天。

深入CSS

继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值。

布局（Layout）

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

height

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

border

• 三种属性
  • border-width
  • border-style
  • border-color
• 四个方向
  • border-top
  • border-right
  • border-bottom
  • border-left

margin

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

display属性

• block-块极盒子
• inline-行级盒子
• inline-block-本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
• none-排版时完全被忽略

常规流 Normal Flow

• 根元素、浮动和绝对定位的元素会脱离常规流
• 其他元素都在常规流之内（in-flow）
• 常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文

• Inline Formatting Context（IFC）
• 只包含行级盒子的容器会创建一个IFC
• IFC内的排版规则
  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align决定一行内盒子的水平对齐
  • vertical-align决定一个盒子在行内的垂直对齐
  • 避开浮动（float）元素

BFC内的排版规则

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

Flex Box是什么？

• 一种新的排版上下文
• 它可以控制子级盒子的：
  • 摆放的流向
  • 摆放顺序
  • 盒子的宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许拆行

positon属性

• static-默认值，非定位元素
• relative-相对自身原本位置便宜，不脱离文档流
• absolute-绝对定位，相对非static祖先元素定位
• fixed-相对于视口绝对定位

position：relative

• 在常规流里面布局
• 相对于自己本应该在的位置进行偏移
• 使用top、left、bottom、right设置偏移长度
• 流内其他元素当它没有偏移一样布局

position：absolute

• 脱离常规流
• 相对于最近的非static祖先定位
• 不会对流内元素布局造成影响

学习CSS的几点建议

• 充分利用MDN和W3C CSS规范
• 保持好奇心，善用游览器的开发者工具
• 持续学习，CSS新特性还在不断出现