一，border box
1，四边设置border:width style color
单边设置border-direction:width style color
-样式单位（常用）：
%：不同大小浏览器自动适应
px：不同屏幕看到的是同样的大小
em：调整行间距时采用
-颜色
#rrggbb
#rgb 上者1、2位或3、4位或5、6位值相同时可以缩写为#rgb
rgb（x%,x%,x%）rgb百分比值，如rgb（100%,0,0）
表示颜色的英文单词：red，gold，silver，blue..
-overflow：当内容溢出元素框（长宽固定）时如何处理
-visible：直接显示在框外
-hidden：隐藏溢出的文字
-scroll：直接在右面和下面显示滚动条（不管是否溢出）
-auto：没溢出不加滚动，溢出加滚动条
2，box
width和height指内容区域的宽度和高度，改变内边距、边框和外边距
不会影响内容区域的尺寸，影响元素框总尺寸。
元素实际占宽：width+2padding+2border+2margin
元素实际占高：height+2padding+2border+2margin
四边设置padding margin:20px
单边设置padding margin:20px 30px 20px 30px（上右下左）
单边设置padding margin -top、right、bottom、left
单边设置padding margin:20px auto（横向居中对齐，针对水平设置）
二，背景
-背景色background-color:#aaa
-背景图片background-image:url("../../xxx.png");
常用属性：
background-repeat：
- repeat(水平竖向重复值)
- repeat-x
- repeat-y
- no-repeat(仅显示一次)
background-position:
x% y% x y left center right top bottom
background-attachment
默认值scroll，背景随文档滚动
可取 fixed，背景图像固定，不随页面其余部分滚动
三，文本格式化
文本：
指定字体：font-family：'字体1','字体2',..;
字体大小：font-size：？px;
字体加粗：font-weight：normal/bold;
文本格式：
文本颜色：color：value；
文本排列：text-align：left、right、center；
文字修饰：text-decoration:none、underline；
行高： line-height：value；
首行文本缩进：text-indent：value；
四，表格样式
表格可以使用box模型（边框、内边距、宽高）以及文本格式化属性
表格特有属性：border-collapse，合并相邻边框，separate/collapse
五，定位
定位简介：定义元素框相对于其正常该出现的位置，或者相对于父元素，另一个
元素甚至浏览器窗口本身的位置。
1，流定位
页面中块级元素都会从上到下一个接一个垂直排列(<p><div>等）
注意：块级元素间垂直距离是由框的垂直外边距计算出来的
页面中行内元素都在一行中从左到右水平排列（<span><a>等）
可以使用水平内边距、边框和外边距调整它们间距。
2，浮动定位
1)让元素脱离普通流定位
2)将浮动元素放置在父元素的左边或右边，左移右移直到外边缘碰到父元素或
另一个浮动框边框
3)浮动元素依旧位于父元素之内
4)任何元素都可以浮动
5)float：none、left、right。
6)clear：用于清除浮动带来的影响
<head>
<title>左浮动</title>
<style type="text/css">
#d1,#d2,#d3{
float:left;
}
</style>
</head>
<body>
<div id="outter">
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div style="border:0;clear:left;"></div>//这段话可以使外边框包住子元素框
</div>
<p>张三、李四、王五</p>
</body>
3，相对定位
元素框相对于它原来位置偏移某个距离
设置相对定位：
-首先设置position属性为relative
-然后使用left属性/right属性设置水平方向偏移
-也可使用top属性/bottom属性设置垂直方向偏移
4，绝对定位
将元素内容从当前定位中移除，释放空间
使用偏移属性来固定元素的位置
-首先要定义一个relative的祖先元素
-如果没有定义relative的祖先元素，那他的位置是相对于body元素
设置绝对定位：
-首先设置position属性为absolute
-然后使用left属性/right属性设置水平方向位置
-也可使用top属性/bottom属性设置垂直方向位置
（代码）
5，堆叠顺序
元素可能发生堆叠。
z-index属性:
-数值，数值越大表示堆叠顺序越高，离用户越近，可以设为负值，表示离用户更远。
（代码）
6，固定定位
将元素内容固定在页面的某个位置，当用户向下滚动页面时元素框不会随着移动
设置固定定位（相对于窗口固定不动）
-首先要设置position属性为fixed
-通过left、top、right、bottom这些偏移属性定义元素位置
<style type="text/css">
.top{
position:fixed;
bottom:10px;
right:10px;
}
</style>
<div class="top">
<a href="#">TOP</a>
</div>
六，列表样式
1，list-style-type用于控制列表中列表项标志的样式
-无序列表前原点会变为：
-none：无标记
-disc：实心圆，为默认值
-circle：空心圆
-square：实心方块
-有序列表前数字会变为：
-none：无标记
-dicimal：数字，默认值
-lower-roman：小写罗马数字（i iv v）
-upper-roman：大写罗马数字（I IV V）
2，list-style-image用于使用图像来替换列表项的标记
取值 url(),指定图像作为有序或无序列表项的标志
（代码）
七，显示方式
元素默认显示方式：
-块元素(<p>、<div>等）
从上至下，可设置宽高
-行内元素（<span>、<a>等）
从左至右，不能设置宽高
-行内块（<input>、<img>等）
从左至右，能设置宽高
可以使用display属性修改元素框的显示方式
display取值：
-none：不显示该元素，释放占用位置
-block：将元素显示方式设置为块。如：可将行内元素<a>转换为块元素
-inline：将元素显示方式设置为行内。如：可将块元素<p>转换为行内元素
-inline-block：将元素显示方式设置为行内块。如：将行内元素<span>转换为行内块。
（代码）
八，鼠标形状
可以使用cursor属性指定显示给用户的鼠标光标形状（根据可视化暗示，提示进行的操作）
cursor属性值：
-default:默认箭头
-pointer:手型
-crosshair:十字
-text:I
-wait:等待（window现为转着的圆）
-help:箭头加小问号转载于:https://my.oschina.net/u/1393072/blog/512107
2536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
