盒模型
内容区
内边距
边框 背景在边框以里
外边距
盒子大小 width，height
宽度限制 min-width, max-width
高度限制 min-height, max-height
内容溢出 overflow:hidden(隐藏)，scroll(添加滚动条)
边框宽度
border-width: 2px,thin,medium,thick,不能使用百分数 (可以使用4个值，分别表示上，右，下，左)
border-top-width；border-right-width；border-bottom-width；border-left-width
边框样式
border-style:solid(实线)，dotted（方形点），dashed（虚线），double（两条实线），groove（雕入页面），ridge（页面凸起），inset（嵌入页面），outset（凸出屏幕），hidden/none（不显示任何边框）
border-top-style；border-left-style；border-right-style；border-bottom-style
边框颜色
border-color:同上，上右下左
边框设置的快捷方式
border：3px dotted #0088dd; (宽度，样式，颜色)
内边距
padding: 指定内容与元素边框之间的空隙，可以使用像素，百分数或em值（四个值为上右下左）
padding-top ；padding-right； padding-bottom； padding-left；
外边距
margin：指定边框到外面盒子的空隙，可以用像素，百分数或em值（四个值为上右下左）
margin-top ；margin-right； margin-bottom ；margin-left；
margin: 10px 20px; 左右，上下
如果想让一个盒子在页面上居中显示，可将left-margin和right-margin属性的值设置为auto
text-align属性设置为center，盒子中的文本都居中显示
display属性
inline 使一个块级元素表现成内联元素
block 使内联元素表现成块级元素
inline-block 使块级元素像内联元素那样浮动
none 隐藏该元素
visibility属性
hidden 隐藏元素，但保留元素占用的空间
visible 显示元素
CSS3
border-image
-moz-border-image: url("images/dots.gif"）
11 11 11 11 stretch;
-webkit-border-image:
border-image:
box-shodow:5px 5px 5px #777777; //水平偏移，垂直偏移，模糊距离，阴影扩展
border-shadow
border-radius
盒子的布局
普通流
position:static(默认项)
块级元素会自动折行，内联元素显示在一起，浏览器的默认排版就为普通流
相对定位
position:relative
top:2px
bottom/left/right如上一行所示 相对于普通流时的位置向上下左右移动的像素
绝对定位
position:absolute
top:5em
bottom/lef/rigth如上一行所示 相对于父元素的位置向上下左右移动的像素
固定定位
position:fixed
相对于窗口所处的位置
浮动定位
float:rigth/left
需要指定元素宽度
相对定位，固定定位，绝对定位，这三种定位方式都有可能有元素重叠，重叠时根据判断元素css表中的z-index属性的大小来决定优先显示哪个，越大越靠前
clear属性：值left，right，both，none
固定宽度布局
这种布局的设计不会因为用户扩大或缩小浏览器窗口而发生变化。这种设计通常以像素作为衡量单位。
劣势：页面的边缘可能存在大块空白区域，这种设计适用于台式机或笔记本设备
流体布局
流体布局设计随着用户对浏览器窗口的扩大或缩小而伸展或收缩，这种设计通常使用百分数。
劣势：要对页面各个部分的宽度加以控制，如果一个固定宽度的项目位于一个不足以容纳它的盒子中，那么这个项目就会溢出盒子
同上
padding
border
border-style:solid/double/groove/outset/dotted/dashed/inset/ridge;
border-width:thin/5px/medium/thick;
border-color:red;
border-radius:15px;
border-top-right-radium:3em; 圆角
margin
width属性设置的是内容区的宽度
盒子的宽度计算方式
div为块级元素
width属性设置为内容区的宽度，若设置的宽度比实际小，则可能有截断现象出现
padding：0px 20px 30px 10px
上 右 下 左
border：#007e7e solid thin
background: white url(images/cock.gif) repeat-x;
1.内联+内联：内联元素的外边距会相加
2.块+块：块元素的外边距选择最大的外边距高度
3.元素嵌套：外边距折叠
定位
1.普通流
2.浮动
3.绝对定位
4.固定定位
普通流：
position:static;
相对定位:框将在原位置顶部下20px，左边创建30px的空间，向右下方移动
#box_relative{
position:relative;
left:30px;
top:20px;}
tips：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位：相对于已经定位好的祖先元素
#box_relative{
positon:absolute;
left:30px;
top:20px;}
Tips:元素原先在正常文档流中所占的空间会关闭，可以覆盖页面上其他元素
固定定位：相对于视窗来定位
#p.two{
postion:fixed;
top:30px;
right:5px;
float浮动元素
1.流的概念
从左上方流向右下方
掌握内联元素、块元素的流动方式
2.浮动元素必须有一个宽度
#amazing{
width:200px;
float:right;}
3.浮动元素从正常的流中删除，其他的块好像它不存在一样（但是其他块中的内联元素会考虑浮动元素的边界，因此会围绕着浮动元素），它浮动在页面最上方
clear属性：
clear:right; 右方不允许有浮动元素
display属性
默认值为inline
none 此元素不会被显示
block 显示为块元素
inline-block 行内块元素
list-item 列表
run-in 根据上下文显示为块元素或内联元素
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
inherit
