css整理－04 基本视觉格式化

基本框

• 假定每一个元素都会生成一个火多个矩形框，为元素框
• 元素框中心有一个内容区，周围有内边距，边距和外边距
• 内容的背景会应用到内边距，外边距是透明的，可以看到父元素的背景
• 内边距不能是负值，外边距可以

包含块

• 每个元素相对于其包含块摆放，包含块就是一个元素的布局上下文
• 包含块是由最近的块级祖先框，表单元格火行内祖先框的内容边界构成
• 行内元素的摆放方式不直接依赖于包含块

水平格式化

使用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改变的只是元素的显示角色而不是本质；如行内元素可能是一个块元素的后代，反过来就不行