一、可视化格式编排
基本框：内容区及其周围的补白、边框、边界
块级元素：如段落、H1标题、列表及列表元素。
垂直方向格式编排
高度
元素高度是由其内容决定的。
假如height比显示内容所需的值小，浏览器会提供一种在不增大高度的前提下显示全部内容的方式。可能会为元素增加一个滚动条。
在实际应用中，大多数浏览器不是这样做的。他们会简单的增加元素的高度。如同height的值被设为auto一样。
压缩垂直边界：相邻边界的压缩。
水平方向格式编程
与垂直方向格式编排相反，水平方向格式编排复杂些。
水平方向边界不压缩
水平方向的属性
七属性：margin-left、border-left、padding-left、width、padding-right、border-right、margin-right
其中三个属性可设置为auto：width、左边界、右边界，其余必须设置特殊值，否则会缺省为0
使用auto
如果width、margin-left和margin-right只有其中一个设置为auto，而其他的值都被指定，则设置为auto属性的值等于使元素框宽度等于父元素框宽度所需的值。
从某种意义讲，auto可说明为：弥补其他部分与所要求的总和之间的差别。
多于一个的auto
其中三个属性中，有两个设置为auto齐纳概况
两边界都设置为auto，自动边界会使元素居中
两边界之一及宽度设置为auto，则设置为auto的边界降为0
三个属性都设置为auto，则两边界设置为0，width设为最大可能值
负边界
补白、边框及内容区宽度均不能设置为负数，只有边界可以小于0
如果只有两个边界待压缩，一个正，一个负，正边界值减去负边界的绝对值，或，负值加上正值，结果是元素间的距离
列表项
块级元素
浮动元素
如果一个文本元素浮动，它的宽度将趋近与0,。
浮动元素的宽度缺省为auto，这样就缺省为0，然后增大到浏览器允许的width。
浮动：细节
规则
1、浮动元素的左（右）外边沿也许不唯一父元素的左（右）外边沿内。
2、浮动元素的左（右）外边沿必须在先出现文档资源的浮动元素的右（左）外边沿的右（左）侧，除非后一个元素的顶端低于前一个元素的低端。
防止浮动元素的相互重写。
3、左浮动元素的右外边沿不能位于其右侧的右浮动元素左外边沿的右侧，右浮动元素的左外边沿不能位于其左侧的左漂移元素右外边沿的左侧
4、浮动元素的顶端不能高于其父远的内顶端。
5、浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端。
6、浮动元素的顶端不能高于行框的顶端，如果行框中有先于浮动元素的内容。
7、一个向左（右）浮动的元素，如果其左（右）侧仍存在浮动元素，则不能够使它的右（左）外边沿处于容纳它的右（左）外边沿的右（左）侧。
8、浮动元素的位置应尽可能高。
9、向左浮动的元素必须尽可能的向左放置，向右浮动的元素必须尽量向右放置。较高的位置优先给更偏左或偏右的元素。
内联元素
行布局
二、定位
允许用户精确定义元素框出现的相对位置，可以相对于它通常出现的位置，相对于其上级元素，相对于另一个元素，甚至相对于浏览器本身。
基本概念
包含快：格式编排发生的关联场景。
一个加粗元素的包含块可以是该元素所出现的段落。
包含块为所有后辈元素简历了一个格式编排的上下文。
包含块的重要方式是：元素可定位于他们的包含块之外。叫做“定位场景”
定位模式
position
允许值 static | relative | absolute | fixed | inherit
初始值 static
可否继承 否
适用于 所有元素
static 元素框按普通方式生成
relative 元素框偏移一定的距离
absolute 元素框完全从文档流中消除并根据其包含块定位
fixed 元素的定位方式同absolute一样，但它的包含块是视区本身
inherit 这个值从上级元素继承得到
边偏移
使用四个不同的属性来描述定位元素的边相对于其包含块的偏移
top,right,bottom,left
允许值 <长度> | <百分比> | static-posiition | auto | inherit
初始值 auto
可否继承 否
适用于 定位元素(即:position值不是static的元素)
注意：百分比是指相对于包含块的宽度(right,left)或是包含块的高度(top,bottom)。
宽度与高度Width
允许值 <长度> | <百分比> | auto
初始值 auto
可否继承 否
适用于 块级元素和替换元素
注意：百分比是指相对于包含块的宽度。
height
允许值 <长度> | auto
初始值 auto
可否继承 否
适用于 块级元素和替换元素
限制宽度
min-width
允许值 <长度> | <百分比> | auto
初始值 与用户代理有关
可否继承 否
适用于 除非替换内联元素和表格元素外的所有元素
注意：百分比是指相对于包含块的宽度。
max-width
允许值 <长度> | <百分比> | auto
初始值 与用户代理有关
可否继承 否
适用于 除非替换内联元素和表格元素外的所有元素
注意：百分比是指相对于包含块的宽度。
min-height
允许值 <长度> | <百分比> | inherit
初始值 0
可否继承 否
适用于 除非替换内联元素和表格元素外的所有元素
注意：百分比是指相对于包含块的宽度。
max-height
允许值 <长度> | <百分比> | none | inherit
初始值 none
可否继承 否
适用于 除非替换内联元素和表格元素外的所有元素
内容溢出及剪切
溢出
overflow
允许值 visible | hidden | scroll | auto | inherit
初始值 visible
可否继承 否
适用于 块级元素和替换元素
visible 表示内容在元素框之外的部分为可见
scroll 元素内容被剪切而不可见，但提供了使额外内容可见的方式
hidden 元素的内容被剪切，但没有机制提供给用户获取内容
auto 设置允许用户代理来决定采用哪种行为（只在需要时提供滚动条）
overflow设置了内容应被剪切，可以使用overflow-clip属性来改变剪切区的形状
overflow-clip
允许值 rect(<上>,<右>,<下>,<左>) | <百分比> | auto | inherit
初始值 auto
可否继承 否
适用于 块级元素和带溢出值而不可见的替换元素
元素剪切
clip矩形之内的内容显示,之外的内容不显示
clip
初始值 auto
可否继承 否
适用于 块级元素和带溢出值而不可见的替换元素元素可见性
visibility
初始值 inherit
可否继承 否
适用于 所有元素相对定位
position: relative;
绝对定位
position: absolute;
固定定位
与绝对定位类似,元素完全从文档中移开,而且不跟文档任何部分存在位置相关的关系
position: fixed;
z-index
初始值 auto
可否继承 否
适用于 定位元素允许网页制作者改变元素相互重叠的顺序
3593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
