基本框
- 假定每一个元素都会生成一个火多个矩形框，为元素框
- 元素框中心有一个内容区，周围有内边距，边距和外边距
- 内容的背景会应用到内边距，外边距是透明的，可以看到父元素的背景
- 内边距不能是负值，外边距可以
包含块
- 每个元素相对于其包含块摆放，包含块就是一个元素的布局上下文
- 包含块是由最近的块级祖先框，表单元格火行内祖先框的内容边界构成
- 行内元素的摆放方式不直接依赖于包含块
水平格式化
使用auto
- 如果设置
width,margin-left,margin-right中两个值为特定值，其余一个为auto;则设定auto的值会确定所需的长度使元素框的宽度等于父元素的长度
- 如果这三个值都为特定值，那么总会将
margin-right强制为auto
- 如果
margin-left,margin-right设置为auto就会居中
- 如果将一个外边距和
width设置为auto,另一个设置为具体值，那么设置为auto的外边距会成0，width会设置为所需的值
- 三个都设置为0，等价于默认
负外边框
百分数
替换元素
- 非替换元素的所有规则同样适用于替换元素
- 除了：如果
width设置为auto,元素的宽度则是内容的固有宽度
垂直格式化
垂直属性
- 如果正常流中块元素
margin-top, margin-bottom设置为auto，会自动重置为0;
- 合并垂直外边距
- 给
margin-top, margin-bottom设置百分数，将会根据body计算
- 负值的
margin会将内容区上拉或下拉
列表项
-
ul默认有个padding-left的效果
- 上面的情况下可以对
ul或li设置list-style-position: inside;将li的标志放在里面
行内元素
-
height,width,margin-top,margin-bottom无效,其他有效
替换元素
- 替换元素具有行内元素的特性，但是
width,padding,border,margin都是有效的
- 相当于
inline-block
改变元素显示
-
display改变的只是元素的显示角色而不是本质；如行内元素可能是一个块元素的后代，反过来就不行
