边框样式

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-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;}

    删除链接下面的下划线


    链接到: 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








    块元素

    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 ">

    Table 1.1 Customers
    Company