语法
语法1
选择器{
属性名:属性值;
/*注释*/
}
语法2
如何调试CSS
- 使用W3C验证器（链接）
- 使用VSCode看颜色
- 使用WebStorm看颜色
- 使用开发者工具看颜色
- 使用border调试法 怀疑哪个元素有问题，就在哪里加border
查资料
- 搜索关键词加MDN
- CSS tricks
- 张鑫旭博客
文档流
inline
内联元素
方向：从左到右，到达最右边才会换行，有跨行分割
宽度：为内部inline元素的和，不能用width指定
高度：由line-height间接确定，跟height无关
block
块级元素
方向:元素从上到下，每一个都另起一行
宽度：默认自动计算宽度，能用width指定
高度：由内部文档流元素决定，可以设置height
inline-block
方向：也是从左到右，但不会有跨行分割
高度：跟block类似，可以设置height
宽度：结合前两者特点，能用width指定
overflow
当内容大于容器，会溢出
可用overflow来设置是否显示滚动条:
hidden:隐藏框外
visible：可视的
scroll：滚动看
auto：超出才滚动
脱离文档流的元素
float
position:absolute/fixed
两种盒模型
content-box width=内容宽度
border-box width=内容宽度+padding+border
- border-box更好用
margin 合并
有父子margin 合并和兄弟margin 合并
阻止合并的方法
border: 1px;
padding: 1px solid red;
overflow: hidden;
