页面布局
css注意点：
有些CSS属性，后代元素会继承祖先元素的设置。font类型、color、文本属性
有些CSS属性，不会继承祖先元素。布局相关、border、背景
1 盒子模型
1.1 定义
- 任意一个元素都可以当做盒子模型
- 盒子的大小 内容宽高(width/height) + 边距(padding)+边框(border)
- 盒子有外边距，影响盒子的位置
1.2 块状元素和内联元素
块状（块级）
- 能够独占一行
- 默认宽度是父元素的宽，高度是自动（被内容撑开）
内联（行内）
- 不能独占一行
- 默认宽度是自动(被内容撑开)，高度也是自动
- 大部分内联元素设置宽高无效，设置内边距有效但是影响其他元素
- margin可以设置左右，不能设置 上下的
- CSS的文本属性 会对内联元素生效
1.3 盒子模型和盒子模型之间的关系
document树
父元素 子元素 后代元素 祖先元素 兄弟元素
标准文档流
- 块状元素 独占一行
- 内联共享一行
盒子在文档模型的位置
- 给盒子设置边距， 前面有兄弟元素，距离兄弟元素的距离。 没有距离父元素的内容的距离
- 垂直方向的margin会塌陷。 上（margin-bottom）下（margin-top）两个元素之间的距离，取最大。 水平方向没有这个问题
- 父子元素，给子元素设置垂直方向的margin，同样会产生塌陷。 解决： 给父元素设置边框 或者
overflow:hidden - margin可以设置为负值
1.4 布局相关属性
display
- block 内联-->块
- inline 块-->内联
- inline-block 兼具两者默认就是inline-block的有img，input，textarea，td，th
- none 隐藏
布局相关
- visibility:visible/hidden
- overflow:hidden/auto/scroll/visible
- overflow-x
- overflow-y
尺寸
- width/max-width/min-width
- height/max-height/min-height