element-ui 自定义点击图标/文本/按钮触发el-date-picker时间组件，不使用插槽-CFANZ编程社区

1.CSS 长度单位和颜色设置

1.1CSS 中的长度单位

1.2CSS 中的颜色设置方式

1.2.1使用颜色名表示颜色

1.2.2rgb 方式表示颜色

十六进制方式表示颜色

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* body{
            width: 600px;
            height: 500px;
            background: #ccc;
        } */
        .box2{
            width: 300px;
            height: 200px;
            background: red;
        }
        .box03{
            width: 400px;
            height: 300px;
            background: rgb(178, 70, 16);
        }
    </style>
</head>
<body>
    <h1>css长度单位</h1>
    <div class="box1"></div>
    <hr>
    <h1>子以</h1>
    <div class="box2">因非上种入如互兄量兴我耐对承德，别不弟，谭不。</div>
    <br>
    <div class="box03">韩能惶血妙慷回也得服之，一币台够向可是刑报，四徒三措才，我圣倒嗣感责哉后融杀满如所切方么皮说在，她。</div>
</body>
</html>

2.CSS 基本选择器

2.1标签名（元素名）选择器

         body{
            width: 600px;
            height: 500px;
            background: #ccc;
        }

2.2类名选择器

.类名 {}

<div class="box2 bx">因非上种入如互兄量兴我耐对承德，别不弟，谭不。</div>
 .box2{
            width: 300px;
            height: 200px;
            background: red;
        }

2.3ID 选择器

#ID名 {} 元素的ID名必须是唯一的！

#ww{
            width: 100px;
            height: 100px;
            background: blue;
        }
<div id="ww">
        失读上希老想啊非所交。
    </div>

2.4全局（通配）选择器

* {}

2.5基本选择器之间的权重

3.盒子模型（显示模式）

3.1元素的显示模式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 400px;
            height: 100px;
            background: #900;
            border: 2px solid #880;
        }

        span {
            width: 400px;
            height: 100px;
            background: #080;
        }

        input {
            width: 300px;
            height: 40px;
        }
    </style>
</head>
<body>
    <h1>元素的显示模式</h1>
    <hr>

    <h2>块级 block</h2>
    <div class="item">我是div</div>
    <div class="item">我是div</div>
    <div class="item">我是div</div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis iusto voluptates, ipsum optio ad eaque? Provident minus quia qui nostrum.

    <h2>行内 inline</h2>
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis iusto voluptates, ipsum optio ad eaque? Provident minus quia qui nostrum.

    <h2>行内块元素</h2>
    <input type="text">
    <input type="text">
    <input type="text">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias officiis porro, eius adipisci harum consequatur similique iure illum enim eos.
</body>
</html>

3.1.1 块级元素 block

显示模式是块级的元素称为块级元素，特点：

1. 在页面中是一个块，能够独占一行
2. 可以设置宽度和高度

3.1.2行内元素 inline

显示模式是行内的元素称为行内元素，特点：

3.1.3行内块元素 inline-block

按照最早的标准，行内块元素也被当做行内元素！

显示模式是行内块的元素称为行内块元素，特点：

3.2 HTML 元素的默认显示模式

3.2.1默认显示模式是 block 的元素：

3.2.2默认显示模式是 inline 的元素：

3.2.3默认显示模式是 inline-block 的元素：

3.2.4修改元素的显示模式、

使用CSS属性 display可以设置元素的显示模式，该属性的值如下：

按照最早的标准只有行内和块级，默认显示模式是行内块的元素，无法设置成真正的行内

4.字体样式

属性名	作用	属性值
font-size	字体大小	长度
font-weight	字体粗细	normal：正常。 lighter：细。 bold：粗。 100~900数字：100~300是细体，400、500正常，600以及以上粗体
font-style	斜体字	normal：正常。 italic：斜体字。
font-family	字体族科	字体名称、字体列表
font	设置多种字体样式	多个值，使用空格分隔

4.1字体族科 font-family

字体族科的设置：

设置字体列表：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .box{
                width: 800px;
                height: 800px;
                font-family: 宋体;
            }
            h1{
                font-family: 微软雅黑;
                font-weight: 800;
            }
        </style>
    </head>
    <body>
        <h1>字体样式</h1>
        <div class="box">
            基地啦咖啡
        </div>
    
    </body>
</html>

衬线字体和非衬线字体：

4.2复合属性 font

4.3子属性和复合属性的关系

5.文本颜色

属性名	作用	属性值
color	设置文字颜色	颜色

6.文本样式

属性名	作用	属性值
letter-spacing	字间距	长度
word-spacing	词间距（中文无效果）	长度
text-decoration	文本修饰线	none：无修饰线。 underline：下划线。 overline：上划线。 line-throuth：删除线
text-indent	首行缩进	长度
text-align	文本水平对齐方式	left：左对齐。 right：右对齐。 center：居中对齐
vertical-align	与同行文本如何对齐	baseline：基线对齐。 top：顶线对齐。 middle：中线对齐。 bottom：底线对齐。 sub：下标字。 super：上标字。长度：元素底部与基线的距离
line-height	行高	长度

6.1vertical-align

6.2 line-height 设置行高

6.2.1行高的概念：

第一行文字中线与元素顶部距离是行高一半，最后一行文字中线与元素底部距离是行高一半！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高练习</title>
    <style>
        .box{
            width: 500px;
            height: 400px;
            background: rgb(200, 122, 23);
            font-size: 20px;
            margin-top: top;
            line-height: 80px;
        }
    </style>
</head>
<body>
    <h1>行高练习</h1>
    <div class="box">文畴将自俭连元拢的是快诗明被志选，洞此。Lorem ipsum dolor, sit amet consectetur adipisicing elit. At, beatae. Earum commodi nam optio voluptatem id quae a exercitationem. Excepturi.</div>
</body>
</html>

6.2.2line-height 是 font 的子属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高练习</title>
    <style>
        .box{
            width: 500px;
            height: 400px;
            background: rgb(200, 122, 23);
            font-size: 20px;
            margin-top: top;
            line-height: 80px;
        }
        
        .box2{
            font: bold 55px/100px 微软雅黑;//55字体大小，100行间距
        }
    </style>
</head>
<body>
    <h1>行高练习</h1>
    <div class="box">文畴将自俭连元拢的是快诗明被志选，洞此。Lorem ipsum dolor, sit amet consectetur adipisicing elit. At, beatae. Earum commodi nam optio voluptatem id quae a exercitationem. Excepturi.</div>
    <br>
    <div class="box box01">
        Lorem ipsum dolor 
    </div>
    <br>
    <div class="box box2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ad fuga sequi.
    </div>
</body>
</html>

由上图可以看出font覆盖了line-height属性

6.2.3使用行高实现元素中的一行文字垂直居中，满足以下条件：

.box01{
            width: 200px;
            height: 100px;
            line-height: 100px;
        }

<div class="box box01">
        Lorem ipsum dolor 
    </div>