边框样式
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 如果内容不适合内容框，则隐藏整个内容。
鼠标光标
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
浮动
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%);
导航栏标准代码
<li><span>aaaaaaa</span></li>
li {color:}设置点的颜色
li span {color:}设置字的颜色
垂直导航栏
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}每个链接居中，并给每个列表选项添加边框。
li a {
display: block; 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
background-color: #555;
color: white;
}
li a.active {
background-color: #4CAF50;
color: white;
}在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
水平导航栏
使用内联(inline)或浮动(float)的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。
横向导航栏
li
{
display:inline;
}
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
浮动列表项
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;}
删除链接下面的下划线
<style>
a {text-decoration:none;}
</style>
<body>
<p>链接到: <a href="http://www.runoob.com/">runoob.com</a></p>
</body>
全部大写 全部小写 首字母大写
{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;} /* 鼠标点击时 */
四种链接形式
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
表格中文字
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
<style>
caption {caption-side:bottom;}
</style>
</head>
<body>
<table border="1">
<caption>Table 1.1 Customers</caption>
<tr>
<th>Company</th>
</tr>
块元素
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 ">
</div>
</div>
