css基础知识

非布局样式：

字体(多平台下的字体适配：fallback机制)、字重、颜色、大小、行高

字体适配：

/*多平台下的字体适配：fallback机制*/
.text { font-family: Menlo, Monaco, Consolas,
"Courier New", monospace, Arial, "Microsoft YaHei",
"黑体", "宋体", sans-serif; }

行高：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{font-size: 10px;vertical-align: middle}
        .two{font-size: 20px;vertical-align: middle}
        .three{font-size: 30px;vertical-align: middle}
        img{vertical-align: bottom}
    </style>
</head>
<body>
<div style="background:greenyellow">
    <!--默认以文字的基线对齐 添加 vertical-align 可以改变文字的对齐方式-->
    <span class="one">第一段</span>
    <span class="two">第二段</span>
    <span class="three">第三段</span>
    <!--图片设置 vertical-align:bottom 可以消除图片的缝隙-->
    <img src="./img/5.png">
</div>
</body>
</html>

背景、边框

背景：纯色背景、渐变色背景、多背景叠加、图片背景（雪碧图）{雪碧图可以减少http请求优化性能}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变色背景</title>
    <style>
        .div1,.div2,.div3{
            height: 200px;
            width: 200px;
            line-height: 50px;
            font-weight: bolder;
            float: left;
            margin: 20px;
        }
        .div1{ background: linear-gradient(to right,yellow,green);}
        .div2{ background: linear-gradient(45deg,green,yellow);}
        .div3{ background: linear-gradient(45deg,red 0, yellow 30% , green 70%);}
    </style>
</head>
<body>
<div class="div1">背景色按方向渐变</div>
<div class="div2">背景色按角度渐变</div>
<div class="div3">背景色以某个角度开始多段颜色渐变</div>
</body>
</html>

边框：线型，大小，颜色　　边框背景图　　边框衔接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框的衔接和用边框做三角形e</title>
    <style>
        .div1{
            width: 0px;
            border-bottom: 30px solid red;
            border-right: 30px solid blue;
            border-top: 30px solid green;
            border-left: 30px solid yellow;
        }
        .div2{
            width: 0px;
            border-bottom: 30px solid red;
            border-right: 30px solid transparent;
            border-left: 30px solid transparent;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

滚动： visibel 当内容的体积超出容器时内容直接溢出容器

　　　 hidden 当内容的体积超出容器时超出部分隐藏　

　　 scroll 当内容的体积超出容器时滚动条显示

　　 auto 当内容的体积超出容器时滚动条显示内容体积小于容器时滚动条隐藏

粗体：font-weight ( 可以以数字的形式规定字体的粗细、bold 和 normal项目中比较常用 )

斜体：font-style: itatic

下划线：text-decoration ：underline

指针 : cursor : pointer (指针变手)

其它

图标引入方式：引入在网上下载图标的css包再使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
</head>
<body>
    <i class="iconfont icon-aixin"></i>
</body>
</html>