3. block(区块)
block面板主要是设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。
(1)word-spacing：设置单词之间的间距。可以设置负值。
默认值:normal
(2)letter-spacing：设置字符之间的间距。可以指定负值。因为中文也是字符, 这个参数可以设置文字间的间距。
默认值:normal
(3)vertical-align：指定元素的垂直对齐方式。针对<td>表格设置垂直对齐方法,但是对<div>设置无效,可以将display属性设置为table-cell值;
可以指定sub(下标)、super(上标)、top(与顶端对齐)、middle(居中)、bottom(与底端对齐)等。适用于行内块元素 img、input、td等
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
默认值: baseline
(4)text-align：设置文本的排列方式(适用于行内元素和行内块元素, 如 a、span、input、img、label等元素)。left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐)。也可用于<hr/>下划线对齐方式
默认值： 如果 direction 属性是 ltr, 则默认值是 left；如果 direction 是 rtl，则为 right。(关于CSS direction 属性看下面的内容介绍)
text-align 和margin auto 区别
text-align 可以让块级元素里面的文字内容居中对齐.
文字内容 == (图片 input 行内元素 行内块元素)
但是对于里面的块级元素无效
让一个块级元素居中对齐 ： margin:0 auto;
(5)text-indent：设置文本第一行的缩进值。负值用于将文本第一行向外拉, 主要给<p>设置首行。
要在每段前空两格,可设置为2em，因为em是当前字体尺寸，2em就是两个字的大小。
默认值： not specified(没有规定的)
p{font-size:12px;text-indent:2em;}上述代码就是可以实现段落首行缩进24px(也就是两个字体大小的距离)。
(6)white-space：设置如何处理元素内的空白符。有三个选项可选：
normal 会将空白符全部压缩；
pre 则会如同处理pre标签内的文本一样处理这些空白符,也就是说，所有的空白符，包括空格，标签，回车，等都会得以保留；
nowrap 指定文本只有遇到br标签时才换行。
默认值: normal
(7)display: none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认值。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>)，表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>)，表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。
默认值： inline
常用的属性:
display:none; //隐藏
display:block //显示(将行内元素转换为块元素)
dispaly:inline //将块元素转换行内元素
dispaly:inline-block //将块元素转换为行内块元素
display:table-cell; //此元素会作为一个表格单元格显示(类似 <td> 和 <th>) 用于多行文本、块元素垂直居中以上转换涉及行内块元素(img、input)转换;
经过大量的测试证明：属性display是不能用于转换行内块元素(img、input)
同义词: 内联元素(行内元素)
4. box(方框或盒子) 主要针对图片、表格、层、段落(p)、标题(h1-h6)等
box面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。
(1)width：定义元素的宽。
默认值:auto
(2)height：定义元素的高。
默认值:auto
以上width、height属性如果是针对div标签设置css样式，则与定位设置窗口width、height属性一致(Dreamweaver会自动填充数据)
在父元素和子元素都设置了高度和宽度的情况下：
如果子元素的宽度超出了它的父元素的宽度, 则会父元素不会限制其显示宽度;
如果子元素的高度超出了它的父元素的高度, 则会父元素不会限制其显示高度;
(3)float：定义元素的漂浮方式。left 表示对象浮在左边、right表示对象浮在右边、none 表示对象不浮动。
默认值:none
一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。
也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了。无论它原来是个div还是个span。
span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
(4)clear：不允许元素的漂浮，相对于前一个<div>设置浮动时，下一个有清除设置的元素就会移到它的下面。
left表示不允许左边有浮动对象 right表示不允许右边有浮动对象
none 表示允许两边都可以有浮动对象 both 不允许有浮动对象。
默认值:none
浮动的主要作用是将块元素排在同一行(span也可以设置浮动);
浮动元素它会向左或者向右进行浮动, 所谓浮动可以理解"飘";
浮动元素向它遇到父元素的边框就停止浮动;
浮动元素的层级会比普通元素要高, 并且它不会再占用原有的高度;
浮动元素只会影响后面的元素, 不会影响前面的元素：
浮动元素的后面的元素(可能是一个也可能是多个元素受到影响)也会继承浮动元素的特性, 它也会浮动了要解决这个问题有两办法;
第一个：需要清除浮动
第二个：给父元素设置一个高度(子元素都设置了height高度条件下), 不建议使用
清除浮动后它不会影响到它后面的元素, 父元素会将所有的浮动元素包围者
当然浮动元素对后面的元素的影响可以做首字母方法, 图文混排(文字环绕图片)等特效；
(5)padding：定义元素内容与其边框的空距(如果元素没有边框就是指页边的空白)。
可以分别设置分别设置上、右、下、左内边距。
padding-top
padding-right
padding-bottom
padding-left
p {padding:20px} 设置设置上、右、下、左内边距都为20px
p {margin: 20px 30px 30px 20px;} 设置padding-top padding-right padding-bottom padding-left分别为20px 30px 30px 20px
默认值：0。
要懂得, 用小属性层叠大属性：
padding: 20px;
padding-left: 30px;
注意：大属性要写在前面, 小属性写在后面;
比如：
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}padding-left:10px和padding-right:20px没用, 因为后面的padding大属性, 层叠覆盖了。
(6)margin：定义元素的边框与其他元素之间的距离(如果没有边框就是指内容之间的距离)。
可以分别设置上边界、右边界、下边界、左边界的值。
margin-top
margin-right
margin-bottom
margin-left
p {margin:20px}
p {margin:10px 0px 15px 5px;}
默认值：0
marign：上边界值 右边界值 下边界值 左边界值
margin属性值必须按照上面顺序进行排列,以空格分开。如果仅输入一个值,则4个边界值会同时设置为此值。
如果仅输入两个的值,则缺少的值会以对边的设置值进行替代。例如：
div{margin:5px 10px 15px 20px} /*上=5px,右=10px,下=15px,左=20px*/
div{margin:5px} /*上=5px,右=5px,下=5px,左=5px*/
div{margin:5px 10px} /*上=5px,右=10px,下=5px,左=10px*/
div{margin:5px 10px 15px} /*上=5px,右=10px,下=15px,左=10px*/
5. border(边框) 针对段落(p标签)、图片、表格、标题(h1-h6)、form、input等(几乎所有的元素都可以设置边框)
border面板可以设置对象边框的宽度、颜色及样式。
(1)border-width：设置元素边的宽度。可以分别设定top(上边宽)、right(右边宽)、bottom(下边宽)、left(左边宽)的值。
border-top-width border-right-width border-bottom-width border-left-width
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。
默认值: medium
(2)border-color：设置边框的颜色。你可以分别对每条边设置颜色。
注意：我们可以通过设置不同的颜色做出亮边和暗边的效果，这样元素看起来是立体的。
border-top-color border-right-color border-bottom-color border-left-color
默认值: not specified(未规定的)
(3)border-style：设置边框样式。
border-top-style border-right-style border-bottom-style border-left-style
可以设置为none(无边框)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、
groove(凹槽,3D凹线)、ridge(凸槽,3D凸线)、inset(凹边,3D嵌入线)、outset(凸边,3D浮出线)等边框样式。
默认值:none(无边框)
推荐：表单输入框：inset(凹边) 按钮：outset(凸边)
兼容性问题
比如, border:10px ridge red; 在chrome和firefox、IE中有细微差别：
如果公司里面的设计师, 处女座的, 追求极高的页面还原度, 那么不能使用css来制作边框。
就要用到图片, 就要切图了。所以, 比较稳定的就几个：solid、dashed、dotted, 其他的边框样式尽量不要用。
border可以没有： border: none;
某一条边没有： border-left: none;
也可以调整左边边框的宽度为0px： border-left-width: 0px;
注意：border-bottom-style：可以修改a链接的"下划线"的风格
border-bottom-width：可以修改a链接的"下划线"的宽度(粗细)
border-bottom-color：可以修改a链接的"下划线"的颜色