4-基本布局+CSS样式属性+盒子模型
***********************回顾一下*****************************
---行级布局----
1. div是块级元素，独占一行空间，宽度默认沾满父级元素
2. div的高度由子级元素来决定
---列级布局---
1. 浮动元素与兄弟元素之间的关系
1）a浮动，b不浮动，b钻到a下面
2）a不浮动，b浮动，b的上边界和a的下边界重叠
3）a浮动，b浮动，a,b一行显示，当行内放不下的时候b另起一行
2. 浮动元素的边距
1) a,b不浮动，a设定外边距-下，b设定外边距-上，共用（谁大用谁的）
2) a,b浮动，a设定外边距-右，b设定外边距-左，不共用（两者和是他们的边距）
margin上下值在行布局时共用，浮动后不再共用
3. 浮动元素与父级元素之间的关系
1) 层级关系
2) 高度宽度的问题？
1.高度应该由子级元素来指定
当子级浮动的时候，无法撑开父级的高度。只能由父级自己指定（overflow:hidden）
2.宽度应该由父级元素来指定
**********************************************************
CSS
1, 基本布局
布局顺序
由上至下，由左至右，由内至外
块居中
1）不能浮动
2）要居中的块必须小于父级元素
3）利用margin-left margin-right的自动值来居中
布局级别：
1）行布局级（横排）
2）列布局级（浮动布局）
1.设置浮动 float
任何元素都可以浮动，可以改变普通文档流的排列方式，可以使得块元素在同一行中排列，使我们的布局更加方便，浮动是脱离文档流的，也就是其他元素视而不见。
浮动何时停止？
1. 当遇到一个浮动元素后
2. 当遇到父级元素后
多个盒子都浮动后，就产生了块级元素水平排列的效果
多个浮动元素不会相互覆盖
若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动，但如果浮动元素的高度不同，那么它们向下移动时可能会被卡住。
float:
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
2. 清理浮动
clear
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
3. 最佳实践：
1) 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。div的顺序是HTML代码中div的顺序决定的
2) 高度尽量给子级，父级高度自动
3) 子级浮动，父级未浮动，父级高度无法依赖子级，这时父级需要自己添加高度（overflow:hidden）。
4) margin上下值在行布局时共用，浮动后不再共用
5) clear 清除浮动对象对当前对象的影响
PS切片
裁切工具->切片工具
2，CSS常见的样式属性和值 (dreamweaver)
1）CSS 尺寸属性
height 设置元素高度。
width 设置元素的宽度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
2） 字体属性
font-family字体族科
宋体 SimSun 黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312
font-size 字体大小
font-style 字体风格
normal 正常;italic 斜体;oblique 倾斜
font-weight字体加粗
normal 正常;bold 粗体;bolder 更粗;lighter 更细
text-decoration 规定添加到文本的修饰 ：
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink 定义闪烁的文本。
3） 颜色
color 设定文本的颜色
opcity 设置透明度
所有浏览器都支持 opacity 属性。
注释：IE8 以及更早的版本支持替代的 filter 属性。
例如：filter:Alpha(opacity=50)。
一般两个属性一起写，保证兼容性
opacity：0.5;
filter:Alpha(opacity=50)
4） 背景
设置元素的背景颜色。background-color:#CCC;
background-image
设置元素的背景图像。
url(bgimage.gif);
background-repeat
设置是否及如何重复背景图像。
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
fixed 固定
scroll 滚动
background-position
设置背景图像的开始位置。这个属性设置背景原图像（由 background-image 定义）的位置， 背景图像如果要重复，将从这一点开始。您需要把 background-attachment属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
横向关键字： left center right
纵向关键字： top center bottom
百分比：
左上角是 0% 0%。右下角是 100% 100%。
background
简写属性在一个声明中设置所有的背景属性。如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。
图片精灵技术：
也叫CSS背景图片精灵技术，是将多张背景图片放到一个图片中，通过定位的方式来获取响应位置的图片，使得一个图片一次载入，多次使用，使得页面下载速度加快
5） 边框属性
border-style 设置4个边框的样式
dotted 定义点状边框。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。
none 定义无边框
...
如果4个值都给定了，分别应用于上，右，下;
左如果给定1个值，应用于各边;
如果给定2个值，第一个值应用于上下边，第二个值应用于左右边
border-width 设置4个边框的宽度
值为关键字或者长度 medium,thin,thick
border-color 设置边框颜色
border 在一个声明设置所有的边框属性。
border:1px solid #ff0000
6） 鼠标光标属性
cursor 属性规定要显示的光标的类型（形状）。
none 无
auto 默认。浏览器设置的光标。
pointer 光标呈现为指示链接的指针（一只手）
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
7） 列表属性
list-style 在一个声明中设置所有的列表属性。
list-style: square inside url('/i/eg_arrow.gif')
list-style-image 将图象设置为列表项标记。
list-style-image:url("/i/arrow.gif");
list-style-position 设置列表项标记的放置位置。
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标
记放置在文本以外，且环绕文本不根据标记对齐。
list-style-type 设置列表项标记的类型。
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
ower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
8）表格
优先级：
td,th-->tr-->tbody,thead,tfoot-->table
color,font-size
text-align 文字对齐
background
border 边框，只能用于table,th,td
margin 间距，只能用于table,caption
padding 内间距，只能用于th,td
width 宽，只能用于table,td,th
height 高，只能用于table,td,th、可以用于tr并且优先级高于td
border-collapse:
separate 默认值，分开
collapse 边框合并
inherit 从父元素中继承该属性
table-layout 宽度类型：
fixed 固定宽度
auto 自动宽度
caption-side 标题位置：
top/left/right/botton
3. div+css
div+css是一种网页的布局方法。
标签div span无特殊含义，配合css才具有特殊的样式
网页就是由许多个盒子通过不同的排列方式堆积而成，网页上每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容，填充，边框，边界组成。默认盒子边框无，背景色透明，默认看不到盒子
1） 盒子模型
margin 外边距，定义区块外边界与上级元素距离的属性，值为长度
padding 内边距（填充），是设置区块的内边距的属性，是边框和元素内容之间的间隔距离
border 边框，在一个声明设置所有的边框属性。
width 盒子的宽度
height 盒子的高度
内容 盒子里面所包含的元素和内容
属性值：
1个：上下左右都是该值
2个：前者表示上下的值，后者表示左右的值
3个：前者表示上边的值，中间表示左右的值，后者表示下边的值
4个：上右下左，顺时针排序
2） 不同浏览器解析盒子模型的差异：
IE5盒子 width = 内容 + border + padding
盒子占据的宽度 = margin*2+width
盒子占据的高度 = margin*2+height
盒子实际的宽度 = width
盒子实际的高度 = height
W3C盒子 width = 内容
盒子占据的宽度 = margin*2+border*2+padding*2+width
盒子占据的高度 = margin*2+border*2+padding*2+height
盒子实际的宽度 = border*2+padding*2+width
盒子实际的高度 = border*2+padding*2+height
3） 设置浏览器去遵循w3c标准
只需要在网页的顶部加上DOCTYPE声明即可
!important的使用
p{
color:red !important;
color:blue;
}
当不加!important;的时候，后者覆盖前者，当加上之后说明第一个,样式优先级更高，采用前者，但是Ie6不支持!important;
4）其他属性
border-width 边框高度
border-color 边框颜色
border-style 边框样式
none 无样式
dotted 点线
dashed 虚线
solid 实线
double 双线
groove 槽线
ridge 脊线
inset 内凹
outset 外凸
5）关于填充和边框的常见问题
1. 大部分的html元素的盒子属性（margin,padding）默认值为0，有少数html元素的（marigin，padding不为0）例如：body,p,ul,li,form等标签，有时需要将其先设置为0
2. 相邻两个兄弟元素的外边框会发生合并，一般布局会设定他们的外边距
3. 如果没有设置父级元素的内边距或边框，那么它的子元素的边界会和其合并。
4. 设置一个块元素居中： marigin:0 auto;
5. margin可以设置负值，padding不可以设置
6. 行内元素的margin值，只有左右值，没有上下值
6）行内元素与块级元素
行内元素
行内元素不可以设置宽（width）和高（height【但是可以通过line-height设置】），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有:em,font,b,span,a,strong
块级元素
块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等
IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
改变元素类型：
display
可以将一个行级元素转换为块级元素，但是这种转换并不能改变元素本质，转换的只是CSS的盒子的外观
需要转换盒子类型的情况：
水平的列表菜单，不断行的标题，隐藏元素
none 隐藏元素。不会被显示，不占空间
block 块级元素。独占一行空间
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 兼有块级和行级元素特性，在行内显示但是可以设定宽高
list-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示（类似），表格前后带有换行符。
），表格前后没有换行符。
---行级布局----
1. div是块级元素，独占一行空间，宽度默认沾满父级元素
2. div的高度由子级元素来决定
---列级布局---
1. 浮动元素与兄弟元素之间的关系
1）a浮动，b不浮动，b钻到a下面
2）a不浮动，b浮动，b的上边界和a的下边界重叠
3）a浮动，b浮动，a,b一行显示，当行内放不下的时候b另起一行
2. 浮动元素的边距
1) a,b不浮动，a设定外边距-下，b设定外边距-上，共用（谁大用谁的）
2) a,b浮动，a设定外边距-右，b设定外边距-左，不共用（两者和是他们的边距）
margin上下值在行布局时共用，浮动后不再共用
3. 浮动元素与父级元素之间的关系
1) 层级关系
2) 高度宽度的问题？
1.高度应该由子级元素来指定
当子级浮动的时候，无法撑开父级的高度。只能由父级自己指定（overflow:hidden）
2.宽度应该由父级元素来指定
**********************************************************
CSS
1, 基本布局
布局顺序
由上至下，由左至右，由内至外
块居中
1）不能浮动
2）要居中的块必须小于父级元素
3）利用margin-left margin-right的自动值来居中
布局级别：
1）行布局级（横排）
2）列布局级（浮动布局）
1.设置浮动 float
任何元素都可以浮动，可以改变普通文档流的排列方式，可以使得块元素在同一行中排列，使我们的布局更加方便，浮动是脱离文档流的，也就是其他元素视而不见。
浮动何时停止？
1. 当遇到一个浮动元素后
2. 当遇到父级元素后
多个盒子都浮动后，就产生了块级元素水平排列的效果
多个浮动元素不会相互覆盖
若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动，但如果浮动元素的高度不同，那么它们向下移动时可能会被卡住。
float:
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
2. 清理浮动
clear
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
3. 最佳实践：
1) 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。div的顺序是HTML代码中div的顺序决定的
2) 高度尽量给子级，父级高度自动
3) 子级浮动，父级未浮动，父级高度无法依赖子级，这时父级需要自己添加高度（overflow:hidden）。
4) margin上下值在行布局时共用，浮动后不再共用
5) clear 清除浮动对象对当前对象的影响
PS切片
裁切工具->切片工具
2，CSS常见的样式属性和值 (dreamweaver)
1）CSS 尺寸属性
height 设置元素高度。
width 设置元素的宽度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
2） 字体属性
font-family字体族科
宋体 SimSun 黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312
font-size 字体大小
font-style 字体风格
normal 正常;italic 斜体;oblique 倾斜
font-weight字体加粗
normal 正常;bold 粗体;bolder 更粗;lighter 更细
text-decoration 规定添加到文本的修饰 ：
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink 定义闪烁的文本。
3） 颜色
color 设定文本的颜色
opcity 设置透明度
所有浏览器都支持 opacity 属性。
注释：IE8 以及更早的版本支持替代的 filter 属性。
例如：filter:Alpha(opacity=50)。
一般两个属性一起写，保证兼容性
opacity：0.5;
filter:Alpha(opacity=50)
4） 背景
设置元素的背景颜色。background-color:#CCC;
background-image
设置元素的背景图像。
url(bgimage.gif);
background-repeat
设置是否及如何重复背景图像。
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
fixed 固定
scroll 滚动
background-position
设置背景图像的开始位置。这个属性设置背景原图像（由 background-image 定义）的位置， 背景图像如果要重复，将从这一点开始。您需要把 background-attachment属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
横向关键字： left center right
纵向关键字： top center bottom
百分比：
左上角是 0% 0%。右下角是 100% 100%。
background
简写属性在一个声明中设置所有的背景属性。如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。
图片精灵技术：
也叫CSS背景图片精灵技术，是将多张背景图片放到一个图片中，通过定位的方式来获取响应位置的图片，使得一个图片一次载入，多次使用，使得页面下载速度加快
5） 边框属性
border-style 设置4个边框的样式
dotted 定义点状边框。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。
none 定义无边框
...
如果4个值都给定了，分别应用于上，右，下;
左如果给定1个值，应用于各边;
如果给定2个值，第一个值应用于上下边，第二个值应用于左右边
border-width 设置4个边框的宽度
值为关键字或者长度 medium,thin,thick
border-color 设置边框颜色
border 在一个声明设置所有的边框属性。
border:1px solid #ff0000
6） 鼠标光标属性
cursor 属性规定要显示的光标的类型（形状）。
none 无
auto 默认。浏览器设置的光标。
pointer 光标呈现为指示链接的指针（一只手）
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
7） 列表属性
list-style 在一个声明中设置所有的列表属性。
list-style: square inside url('/i/eg_arrow.gif')
list-style-image 将图象设置为列表项标记。
list-style-image:url("/i/arrow.gif");
list-style-position 设置列表项标记的放置位置。
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标
记放置在文本以外，且环绕文本不根据标记对齐。
list-style-type 设置列表项标记的类型。
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
ower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
8）表格
优先级：
td,th-->tr-->tbody,thead,tfoot-->table
color,font-size
text-align 文字对齐
background
border 边框，只能用于table,th,td
margin 间距，只能用于table,caption
padding 内间距，只能用于th,td
width 宽，只能用于table,td,th
height 高，只能用于table,td,th、可以用于tr并且优先级高于td
border-collapse:
separate 默认值，分开
collapse 边框合并
inherit 从父元素中继承该属性
table-layout 宽度类型：
fixed 固定宽度
auto 自动宽度
caption-side 标题位置：
top/left/right/botton
3. div+css
div+css是一种网页的布局方法。
标签div span无特殊含义，配合css才具有特殊的样式
网页就是由许多个盒子通过不同的排列方式堆积而成，网页上每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容，填充，边框，边界组成。默认盒子边框无，背景色透明，默认看不到盒子
1） 盒子模型
margin 外边距，定义区块外边界与上级元素距离的属性，值为长度
padding 内边距（填充），是设置区块的内边距的属性，是边框和元素内容之间的间隔距离
border 边框，在一个声明设置所有的边框属性。
width 盒子的宽度
height 盒子的高度
内容 盒子里面所包含的元素和内容
属性值：
1个：上下左右都是该值
2个：前者表示上下的值，后者表示左右的值
3个：前者表示上边的值，中间表示左右的值，后者表示下边的值
4个：上右下左，顺时针排序
2） 不同浏览器解析盒子模型的差异：
IE5盒子 width = 内容 + border + padding
盒子占据的宽度 = margin*2+width
盒子占据的高度 = margin*2+height
盒子实际的宽度 = width
盒子实际的高度 = height
W3C盒子 width = 内容
盒子占据的宽度 = margin*2+border*2+padding*2+width
盒子占据的高度 = margin*2+border*2+padding*2+height
盒子实际的宽度 = border*2+padding*2+width
盒子实际的高度 = border*2+padding*2+height
3） 设置浏览器去遵循w3c标准
只需要在网页的顶部加上DOCTYPE声明即可
!important的使用
p{
color:red !important;
color:blue;
}
当不加!important;的时候，后者覆盖前者，当加上之后说明第一个,样式优先级更高，采用前者，但是Ie6不支持!important;
4）其他属性
border-width 边框高度
border-color 边框颜色
border-style 边框样式
none 无样式
dotted 点线
dashed 虚线
solid 实线
double 双线
groove 槽线
ridge 脊线
inset 内凹
outset 外凸
5）关于填充和边框的常见问题
1. 大部分的html元素的盒子属性（margin,padding）默认值为0，有少数html元素的（marigin，padding不为0）例如：body,p,ul,li,form等标签，有时需要将其先设置为0
2. 相邻两个兄弟元素的外边框会发生合并，一般布局会设定他们的外边距
3. 如果没有设置父级元素的内边距或边框，那么它的子元素的边界会和其合并。
4. 设置一个块元素居中： marigin:0 auto;
5. margin可以设置负值，padding不可以设置
6. 行内元素的margin值，只有左右值，没有上下值
6）行内元素与块级元素
行内元素
行内元素不可以设置宽（width）和高（height【但是可以通过line-height设置】），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有:em,font,b,span,a,strong
块级元素
块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等
IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
改变元素类型：
display
可以将一个行级元素转换为块级元素，但是这种转换并不能改变元素本质，转换的只是CSS的盒子的外观
需要转换盒子类型的情况：
水平的列表菜单，不断行的标题，隐藏元素
none 隐藏元素。不会被显示，不占空间
block 块级元素。独占一行空间
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 兼有块级和行级元素特性，在行内显示但是可以设定宽高
list-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示（类似
| 和 | ）
table-caption 此元素会作为一个表格标题显示（类似 inherit 规定应该从父元素继承 display 属性的值。 float,position 应用了浮动和绝对定位的元素，变成了块级元素，因此display属性一般被忽略 如果元素应用了display:none，该元素（以及子元素）被隐藏起来，对其再使用float,position将不再有意义 4.和页面布局相关的CSS属性 1）定位属性： 绝对定位 absolute: 是元素完全脱离文档流，页面中的其他元素视它不存在，绝对定位元素不会影响到其他元素。绝对定位是参照距离他最近的父级有定位属性的元素，如果父级元素没有定位属性，则会参照文档 相对定位 relative: 是参照元素原来的位置进行移动，元素原来的空间位不变，元素在移动时会覆盖其他元素。 固定定位 fixed: 将元素固定在窗口中的某个位置，绝对定位是相对于元素的，固定定位是相对于窗口的，会随着窗口的一定而移动。在低版本IE中不支持该属性 默认定位 static: 默认属性，指定了元素按照常规的文档流进行定位，静态定位元素不允许使用top,left和类似其他属性定位。position的值为static为非定位元素，为其他值时候为定位元素，因为static元素不能自定义元素的位置，而其他可以 top: 层距离页面顶点纵坐标的距离 left: 层距离页面定点横坐标的距离 text-align: 横向排列 left right center line-height:行高，内容都在行的中间，可以使用这个属性设置内容垂直居中 z-index ： 第三个维度 ，值高的元素会覆盖值低的元素。该属性可以使得元素脱离文档流，可能会覆盖其他元素。 float: 设置区块浮动属性 clear: 指定一个元素是否允许有元素漂浮在它的旁边 4，盒子模型的浮动 5，css规范 1）overflow: 设置层内的内容超出层所能容纳的范围处理方式。 visible :默认值，如果需要，内容可以溢出并绘制在元素的边框的外面 hidden :裁剪掉和隐藏溢出的内容。 scroll :元素一直显示水平和垂直滚动条，如果内容超出元素尺寸，允许用户通过滚动来查看额外的内容。 auto :滚动条只在内容超出元素尺寸时显示，而非一直显示。 2）display : 属性设置元素如何显示。 none 此元素不会被显示【浏览器会认为这个元素不存在】 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为行内元素，元素前后没有换行符。 inline-block 行内块级元素 table 此元素会作为块级表格来显示（类似
|
|---|