边框样式
border-style:
{border-style:none;}无边框
{border-style:dotted;}点线边框
{border-style:dashed;}虚线边框
{border-style:solid;}实线边框
{border-style:double;}双边框
{border-style:groove;}凹槽边框
{border-style:ridge;}垄装边框
{border-style:inset;}嵌入边框
{border-style:outset;}外凸边框
{border-style:hidden;}隐藏边框border-width:指定长度值或关键字，必须使用border-style才可用border-width
{border-width:thick}
{border-width:medium}
{border-width:thin}border-color:必须使用border-style才可使用border-color
单独设置各边的样式，顶部，右部，下部，左部
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;轮廓outline
元素周围的一条线，起突出作用，使用方法同boeder
1.outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）
2.outline有可能是非矩形的（火狐浏览器下）外边距margin
margin:auto;设置浏览器边距，依赖浏览器
margin:length;固定的长度
margin:top,right,bottom,left;填充padding
padding:length,&;
padding:top,right,bottom,left;行高
line-height:normal;默认，合理的行间距
line-height:inherit;从父元素继承line-height属性的值
line-height:number数字设置 line-height:2
line-height:length,%diaplay显示visibility可见性
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/ padding-bottom)和外边距的top/bottom(margin-top/margin- bottom)都不可改变，就是里面文字或图片的大小;主要用的CSS样式有以下三个：
display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性我们常将ul元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：
1、display:none 元素不再占用空间。
2、visibility: hidden 使元素在网页上不可见，但仍占用空间。poition定位
position:static;静态
position:relative;相对其正常位置
position:fixed;相对于浏览器窗口是固定的
position:absolute;绝对定位
position:sticky;基于滚动条的定位
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
}
z-index:-1;堆叠属性，负值，在后面，正值，在前面
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);剪裁元素大小
}
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;使用滚动条显示溢出内容
overflow:hidden;隐藏溢出内容
overflow:auto;浏览器自动处理溢出内容
overflow:visible;默认，溢出内容显示
overflow:inherit;
}Overflow-x指定是否要剪辑的左/右边缘的内容.
Overflow-y指定是否要剪辑的顶部/底部边缘的内容
visible 不裁剪内容，可能会显示在内容框之外。
hidden 裁剪内容 - 不提供滚动机制。
scroll 裁剪内容 - 提供滚动机制。
auto 如果溢出框，则应该提供滚动机制。
no-display 如果内容不适合内容框，则删除整个框。
no-content 如果内容不适合内容框，则隐藏整个内容。鼠标光标
请把鼠标移动到单词上，可以看到鼠标指针发生变化：
auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
浮动
float:left,right,none,inherit;指定盒子（元素）可以浮动
clear:left,fight,both,none,inherit;不允许元素周围有浮动元素对齐
div 水平居中 margin:auto;
文本水平居中 text-align:center;
img{margin:auto;}图片居中
左右对齐：
position:absolute;
flow:right;
垂直居中padding:top,right,bottom,left
line-height:200px;
水平和垂直都居中：
padding:
text-align:center;
或
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);导航栏标准代码
aaaaaaa
li {color:}设置点的颜色
li span {color:}设置字的颜色垂直导航栏
水平导航栏
使用内联(inline)或浮动(float)的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。
横向导航栏
li
{
display:inline;
}
浮动列表项
li
{
float:left;
}背景
background-color背景颜色
background-image：url('');背景图片
background-repeat:no-repeat;不平铺
repeat-x;水平方向平铺
background-attachment：scroll;默认，背景图片随页面其余部分滚动
fixed;背景图像固定
inherit;从父元素继承
background-position：定位图像的位置背景属性简写
body {background:#ffffff url('img_tree.png') no-repeat right top;}当使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position文本
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
{text-align:justify;}上划线 中划线 下划线
{text-decoration:overline;}
{text-decoration:line-through;}
{text-decoration:underline;}删除链接下面的下划线
链接到: runoob.com
全部大写 全部小写 首字母大写
{text-transform:uppercase;}
{text-transform:lowercase;}
{text-transform:capitalize;}文本左缩进
{text-indent:50px;}链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */四种链接形式
表格中文字
txet-align水平对齐，left,right,center
td
{
text-align:right;
} vertical-align垂着对齐，top,middle,bottom
td
{
height:50px;
vertical-align:bottom;
}表格空隙，每个格之间的空隙
td
{
padding:15px;
}表格背景色绿色，字体白色
th
{
background-color:green;
color:white;
}caption-side设置表格标题top,bottom
Table 1.1 Customers
Company
块元素
h1-h6，p，div,ul,li,dl,dt,dd
内联元素
span,a,b,strong,em,input
两种元素转换
块-内联
display:inline;
内联-块
display:block;
display:inline-block;
同一行的内容，前面内容与后面对齐方式
vertical-align: top/middle/bottom;
使内容始终固定在一个地方，不随页面动
<外盒子 style="margin:0 auto;width:200px;height:200px;">
<内盒子 style="position:fixed;left: 50%;top:50%;margin-top:-100px;margin-left:-100px;border:1px solid #000;text-align: center ">