基本框
- 假定每一个元素都会生成一个火多个矩形框，为元素框
- 元素框中心有一个内容区，周围有内边距，边距和外边距
- 内容的背景会应用到内边距，外边距是透明的，可以看到父元素的背景
- 内边距不能是负值，外边距可以
包含块
- 每个元素相对于其包含块摆放，包含块就是一个元素的布局上下文
- 包含块是由最近的块级祖先框，表单元格火行内祖先框的内容边界构成
- 行内元素的摆放方式不直接依赖于包含块
水平格式化
使用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改变的只是元素的显示角色而不是本质；如行内元素可能是一个块元素的后代，反过来就不行