华清远见重庆中心——HTML和CSS基础阶段技术总汇

本文链接：https://blog.csdn.net/m0_65710129/article/details/127944231

HTML和CSS

HTML

HTML结构

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>

</body>
</html>

常用标签

上下标签

上标签sup —让元素显示在右上角
下标签sub ----让元素显示在右上角

文本格式化标签

加粗
- b标签加粗
- strong标签加粗 --‘strong’（强壮）语义更强烈
倾斜
- i标签倾斜
- em标签倾斜 --‘emphasize’（强调）语义更强烈
删除线
- s标签删除线
- del标签删除线 --‘delete’（删除）语义更强烈
下划线
- u标签下划线
- ins标签下划线 --‘inserted’（插入）语义更强烈

转义字符

语法：&字符名

常用转义字符：

空格：&nbsp；
< : &lsaquo
< : &rsaquo

块元素，行内元素

块元素：

特点：

独占一行，可以包含其他块元素或其它元素
注意:p元素不放块元素

常见块级元素:

行内元素：

特点：

不独占一行，可以包含其他块元素或其它元素
注意:p元素不放块元素

常见行内元素:

b u i del 等文本格式化的标签
span 标签：本身没有语义，常用来帮助处理文本

标签的属性

格式：

属性名：“属性值”

位置

开始标签里

作用

设置标签的附加信息

img标签

作用

显示图片

属性

src属性，必要属性，定位图片的路径
alt属性，图片的描述信息，在图片无法正常显示的文字信息
title属性，图片的标题，在鼠标悬停在图片上显示
width和height属性，设置图片的宽高

路径

相当于电子路线，定位到计算机上的资源文件

相对路径

相对当前文件的位置，寻找目标资源的路径
./或者文件名当前文件的相同目录下
./xxx 进入下一级文件
…/xxx进入上一级目录下

绝对路径

文件在计算机的完整地址，通常以盘符开头
注意：
- 通过根据运行的html页面通过它的内置服务器显示的，浏览器为了安全，不允许服务器上发html页面访问本机文件

列表

有序列表ul

li为列表项。注意：li可以放其他任何标签，比如a标签等
无序列表前是项目符合，可以通过ul中type属性值改变项目符号
- disc实心小圆点
- circle空心圆
- square正方形

有序列表ol

li标签为列表项
可以通过ul中type属性值修改序号
- 阿拉伯数字1（默认）
- A/a英文字母
- I/I罗马数字

自定义列表dl

dt 术语标题
dd 对术语的解释

超链接a标签

属性：

herf 定义超链接跳转路径
target 定义跳转的方式
- blank 新起一页
- self （默认）在本窗口显示跳转的内容
- parent 在父页面的窗口显示跳转之后的内容

锚点

定位的点
设置id属性，a标签的herf属性=“对应锚点的id属性值”

表格table

必要标签table

table’常用属性

border=“1” 加上边框
cellspacing=“0” 表格之间的间隙为0，单位px
align=“center” 表格在中间（还有right，left）

table必要标签

tr （table row）表示一行
td （table data）表示一个单元格，没有加粗效果的
th （table header cell）表示表头单元格，有加粗效果

表格的结构

thead
tbody
tfoot
显示的顺序固定，不会因为在html中的顺序改变

合并单元格

rowspan 合并行
- rowspan=“2“，合并2行，保留目标单元格的数据
colspan 合并列
- colspan=”2“，合并2列，保留目标单元格的数据

表单

需要放在表单域中

type属性

text 输入框
password 密码框
radio 单选按钮框
chekbox 复选框
data 日期框 -----------yyyy-mm-dd
datatime-local 年月日时分秒
color 颜色框
file 文件框
button 按钮框，在按钮中有字体用value
submit 提交按钮
reset 重置按钮

其他属性

name属性
- 定义元素的名字，它的值来自输入框的值，或者value中设置的值
- 注意：
  - 一组单选按钮的name属性值应该设置为用一个值，获取到的是被选择的值，被选中的那个值赋给value
  - 一组复选框的name属性值应该设置为同一个值，被选中的复选框的value值构成一个数组
value 设置元素的值
palceholder 设置输入框的默认值
requied 设置必填项，如果不填将会弹出
cheked 打开页面时，让元素是默认选择状态
readonly 设置元素只读
disabled 设置元素不可用（比如在验证码发送倒计时不可再点击）

label标签

在表单中，为元素设置标注（一般的提示用词：用户、密码）
label的for属性可以绑定一个元素，当点击label时，被绑定的元素会获取到焦点
- for”被绑定的id值“ 注意没有#

select标签

下拉列表
select>option搭配使用，option包裹选项
name属性写在select中，选项值value写在option中
注意
- 想得到默认”请选择“，第一个option包裹一个”请选择“选择项

多行文本框textarea

内联框架iframe

在页面中嵌入另一个页面，通过src属性设置嵌入页面的url地址
width height设置宽高
实现点击链接切换页面
- 1为iframe页面设置name属性
- 2 a链接的target=”iframe的name属性值“
- 3 a链接的herf中写将要跳转的页面url属性值

audio音频标签

播放音频
属性src设置音频的url地址
属性
- control=”control“设置后才可以观看，设置显示音频控件
- autoplay=”autoplay“设置自动播放
- muted=”muted“设置音频为禁音
- width和height设置宽高

vedio音频标签

播放视频
属性src设置视频的url地址
属性
- control=”control“设置后才可以观看，设置显示视频控件
- autoplay=”autoplay“设置自动播放
- muted=”muted“设置音频为禁音
- width和height设置宽高

CSS

CSS简介

什么是css

css (cascading style sheet):层叠样式表
cascading: 级联（层叠），有点加的含义
style: 样式，风格，可以理解为元素的风格
sheet: 表，代表一种表状结构
给页面结构穿衣服一样

css的作用

如果把一个页面比作是一个人的话，那么html就相当于人的骨架，css就是皮肤。

所以说css的作用，就是决定元素的外观张什么样。

使用

三种引入样式的方式

通过元素样式属性，使用css(行内或内联样式)
通过style标签，使用css
1. 直接写样式表
2. 通过 @import 引入外部文件
通过 link 标签引入外部文件，使用css

不同位置引入的样式的优先级:

        内联样式 > style标签 > 外部文件

样式的具体写法

举例如下：

.box1 {
    color: white;
    margin: 20px;
    padding: 20px;
    border: 4px solid red;
}

整个样式由两部分组成

第一部分：.box1 叫做css选择器，css选择器的作用是通过选择器可以选中html页面中的指定元素。
第二部分：选择器后的花括号部分，是我们的样式表，其中包括很多样式属性。

选择器—基础选择器

标签选择器

/* 标签选择器：选中相同标签的所有元素 */
        li {
            border: 5px solid red;
        }

id选择器

必须唯一
- 在js操作中会产生影响，或者对a标签进行锚点跳转会产生影响（就近原则）
用法
- 在样式中写选择器的位置，通过#设置的id名{样式属性：样式属性 }
css样式

/* id 选择器：选中元素中id值为该选择器的元素 */
        #box {
            border: 5px solid black;
        }

 <!-- id 属性在页面中是不可重复命名的 -->
    <div id="box">hello</div>

class类选择器

css样式

 /* 类选择器: 选中相同类名的所有元素 */
        .list-item {
            border: 5px solid green;
        }

html

<ol>
        <!-- class: 给标签分门别类，指定类别
            有时一个元素不止一个类，多个类的情况，中间用空格隔开
        -->
        <li id="id-list" class="list-item list-box">1</li>
        <li>2</li>
        <li class="list-item">3</li>
    </ol>

选择器–派生选择器

在基础选择器的基础上衍生出来的选择器

后代选择器

用空格隔开

css

/* 语法 selector selector selector ... */
        /* form div label input {
            border: 5px solid violet;
        } */

html

  <form>
        <div class="form-item">
            <label>
                姓名：<input />
            </label>
        </div>
        <div>
            <label>
                性别：<input />
            </label>
        </div>
        <div>
            <label>
                年龄：<input />
            </label>
        </div>
    </form>

子代选择器

用>隔开,选择子代元素的选择器

css

/* 语法：selector>selector ...  */

        /* label>input {
            border: 5px solid violet;
        }
 /* form>div {
            border: 5px solid green;
        }

        form>div>label>input {
            border: 5px solid violet;
        } */ */

html

<form>
        <div class="form-item">
            <label>
                姓名：<input />
            </label>
        </div>
        <div>
            <label>
                性别：<input />
            </label>
        </div>
        <div>
            <label>
                年龄：<input />
            </label>
        </div>
    </form>

混合使用派生选择器

css

 /* 选择body标签中的后代的label的子代的input */
        body label>input {
            border: 5px solid gold;
        }

html

 <form>
        <div class="form-item">
            <label>
                姓名：<input />
            </label>
        </div>
        <div>
            <label>
                性别：<input />
            </label>
        </div>
        <div>
            <label>
                年龄：<input />
            </label>
        </div>
    </form>

兄弟选择器

html

 <ul>
        <li>
            <div class="item1">1</div>
            <div class="item2">2</div>
            <div class="item1">3</div>
            <div class="item1">4</div>
        </li>
        <li>
            <div class="item1">1</div>
            <div class="item2">2</div>
            <div class="item3">3</div>
            <div class="item1">4</div>
        </li>
        <li>
            <div class="item1">1</div>
            <div class="item2">2</div>
            <div class="item1">3</div>
            <div class="item1">4</div>
        </li>
    </ul>

用+隔开

选择前面的一个兄弟+紧挨着的兄弟关系

/* 兄弟选择器
            选择复合条件的兄弟级别的下一个元素
        */
        /* 语法：selector+selector */
        /* .item2+.item1 {
            border: 5px solid gold;
        } */

用~隔开

哥哥后面的所有弟弟

 /* 选择所有的兄弟节点 */
        /* 选择class为item2的标签的兄弟标签，且该兄弟标签出现在item2后面，且是所有的class为item1的标签 */
        .item2~.item1 {
            border: 5px solid gold;
        }

选择器–属性选择器

语法：
- selector[attrname=value]
css

 /* 从左到右读选择器，该选择器的含义为：input标签中含有name属性且属性值为name的标签 */
        input[name='name'] {
            border: 5px solid pink;
        }

        /* 选择input标签中包含name属性，且属性值以ag开头的所有标签 */
        input[name^='ag'] {
            border: 5px solid rgb(0, 238, 255);
        }

        /* 选择input标签中包含name属性，且属性值以end结尾的所有标签 */
        input[name$='end'] {
            border: 5px solid rgb(255, 153, 0);
        }

        /* 若同为属性选择器，优先级取决于前面的selector的基础选择器类型 */
        .de[name*='good'] {
            border: 5px solid rgb(245, 11, 11);
        }

        /* 选择input标签中包含name属性，且属性值包含good的所有标签 */
        input[name*='good'] {
            border: 5px solid rgb(245, 11, 225);
        }

        /* 优先级相同的选择器，写在后面的样式会覆盖前面的样式 */
        /* input[name^='good'] {
            border: 5px solid rgb(11, 245, 42);
        } */

html

 <form>
        <div>
            <label>
                姓名：<input name="name" />
            </label>
        </div>
        <div>
            <label>
                age：<input name="age" />
                <input name="agc" />
                <input name="agb" />
            </label>
        </div>
        <div>
            <label>
                班级：<input name="legend" />
                <input name="agend" />
                <input name="lagend" />
            </label>
        </div>
        <div>
            <label>
                部门：<input name="goodfoot" />
                <input class="de" name="handgood" />
                <input name="hegoodad" />
            </label>
        </div>
    </form>

选择器–伪类选择器

伪类
- 指的是一类标签，但是这类标签不一定需要具备class属性
动态伪类
- ：link 给未点击一个样式
- ：visited 给点击之后一个样式
- ：hover 给鼠标悬停时一个样式
- ：active 给点击时一个样式
nth-child
- 先找到指定位置的节点，再判断节点是否是指定类型
nth-of-type
- 先找到指定类型的元素，再判断位置是第几个节点
n代表第n个

css

 /* hover: 鼠标悬停时的伪类 */
        /* 语法：selecor:hover */
        .box {
            border: 5px solid black;
            width: 200px;
            height: 100px;
        }

        /* 当鼠标悬停到.box上的选择器 */
        .box:hover {
            border: 5px solid pink;
        }


        /* link 元素中的连接样式，这里指的是a标签中的文本 */
        .baidu:link {
            /* 去掉a标签的底部装饰线 */
            text-decoration: none;
            background-color: green;
        }

        .baidu:visited {
            color: pink;
        }

        .baidu:hover {
            color: gold;
        }

        /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited */
        /* visited 的样式有所限制，可以查看mdn了解详情 */
        .bsite:visited {
            color: red;
        }

        /* active 元素激活时的伪类(鼠标点住不放) */
        .baidu:active {
            background-color: indigo;
        }

        .box:active {
            background-color: gold;
        }

        /* 使用注意：对于a标签链接的处理，active必须在hover后，hover必须在link和visited后 */


        /* nth-child(n) 选择某个选择器所指标签的指定位置的子标签 */
        /* 该函数的参数，代表第几个子节点 */
        /* ul li:nth-child(2) {
            color: gold;
        } */

        /* first-child 第一个子节点 */
        /* ul li:first-child {
            color: red;
        } */

        /* last-child 最后个子节点 */
        /* ul li:last-child {
            color: red;
        } */

        /* nth-of-type(n) 第几个指定类型的节点 */
        /* ul li:nth-of-type(2) {
            color: blue;
        } */

        /* nth-child 和 nth-of-type 的区别 */
        /* nth-child 先找到指定位置的节点，再判断节点是否是指定类型 */
        /* nth-of-type 先找指定类型的元素，再判断位置是第几个节点 */

        /* nth-child 和 nth-of-type 可以使用n来代表所有的子元素 */
        ol li:nth-child(2n-1) {
            color: greenyellow;
        }


        /* empty 代表空元素（标签体是空的标签） */
        div:empty {
            background-color: black;
        }

        /* 根节点 也就是 html 标签 */
        :root {
            border: 10px solid goldenrod;
        }

html

<div class="box">hello world</div>
    <div>
        <a class="baidu" href="https://www.baidu.com">百度</a>
        <a class="bsite" href="https://www.bilibili.com">b站</a>
    </div>
    <ul>
        <li>1</li>
        <div>2</div>
        <li>3</li>
        <li>4</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ol>

    <div class="box">hello</div>
    <div class="box"></div>
    <div class="box">world</div>

选择器的优先级

有时会出现一种情况：同一个元素被多种选择器选中，且选择器中应用了相同的样式属性，那么该元素到底应该使用哪个选择器的样式？

这就涉及到选择器优先级，优先级高的选择器样式属性将被应用到标签上

基础选择器的优先级

优先级由大到小排列如下：

id选择器 > class类选择器 > tag标签选择器

其他选择器

从左到右的看选择器，判断当前位置选择器的基础选择器类型的优先级，若优先级相同，就看第二组选择器的优先级

.box label .inp {
    color: blue;
}

/* 从选择器的左侧看起，#box的优先级高于.box，所以说将应用该选择器的样式 */
#box label .inp {
    color: red
}

.box label .inp {
    color: blue;
}

/* 从选择器的左侧看起，由于第一组选择器优先级相同，所以查看第二组，.lab优先级大于label，所以应用该样式 */
.box .lab .inp {
    color: red
}

还有种情况，所有选择器的优先级相同，但选择器数量不同，选择器数量多的将被应用

form input {
    color: blue;
}

/* 该选择器的个数比上面的选择器多，所以应用该样式 */
body form label input {
    color: red;
}

若两选择器优先级完全相同时，样式将采用写在后面的那个

.box[name='tap'] {
    color: blue;
}

/* 由于此处的两个选择器优先级一样，所以将采用后面这个样式 */
.box[name^='ta']{
    color: red;
}

背景常见样式

 /* 背景色 */
            background-color: #ff0000;

            /* 背景图 */
            background-image: url(../img/1.jpg);

            /* 背景图的重复方式 */
            /* 待选项：
                no-repeat: 不重复
                repeat: 横纵方向都重复
                repeat-x: 横向重复
                repeat-y: 纵向重复
                round: 让图片正好填充满整个背景，但图片可能被拉伸
                space: 有间距的铺满背景，但图片不会拉伸也不会被裁剪
             */
            background-repeat: no-repeat;

            /* 背景图尺寸 */
            /* 待选项：
                auto: 保持图片原始大小
                cover: 让图片完整覆盖整个背景，但宽高比不变
                contain: 让背景完全包含整个图片，但宽高比不变
             */
            /* background-size: contain; */

            /* 图片左上角对齐的位置 */
            /* 待选项：
                content-box: 图片左上角对齐内容区域的左上角
                padding-box: 图片左上角对齐内边距的左上角
                border-box: 图片左上角对边框的左上角
                若不设置概述性，默认情况是padding-box
             */
            /* background-origin: border-box; */

            /* 设置背景图的裁剪区域，超过该区域的不部分将被裁剪掉 */
            /* 待选项：
                content-box: 超出内容区域的部分将被裁剪掉
                padding-box: 超出内边距区域的部分将被裁剪掉
                border-box: 超出边框区域的部分将被裁剪掉
             */
            /* background-clip: border-box; */

            /* 设置背景图在背景中的位置 */
            /* 待选项：
                top: 向上对齐左右居中
                bottom: 向下对齐左右居中
                left: 向左对齐上下居中
                right: 向右对齐上下居中
                center: 居中
                数字：第一个数字代表图片左上角x坐标，第二个数字代表图片左上角y坐标
             */
            background-position: center center;
            background-position: 50px 100px;

            /* 背景是个复合属性，可以添加多个值 */
            background: #00ff00 url(../img/1.jpg) no-repeat center center;

单位

px 像素值
百分比相对父元素
em 当前元素的字符宽度 1em=1个字符宽
rem 根节点（html元素）的字符宽 1rem=html元素的一个字符宽
ex 当前元素的半高 2ex=1个字符高
vh（viewport-height）：相对于视口高度的百分比
vw（viewport-width）：相对于视口宽度的百分比

 .box1 {
            /* px: 像素值 */
            width: 100px;
            height: 100px;
        }

        .box2 {
            /* 百分比: 相对父元素的百分比 */
            width: 50%;
            height: 33%;
        }

        .box3 {
            width: 100px;
            /* height: 100px; */

            /* em: 当前元素的字符宽度 1em = 1个字符宽 */
            /* rem: 根节点(html元素)的字符宽 1rem = html元素的一个字符宽 */
            text-indent: 2em;
            text-indent: 2rem;

            /* ex: 当前元素字符的半高 2ex = 1个字符高 */
            /* height: 2ex; */

            white-space: nowrap;
            line-height: 6ex;
        }

        .container {
            background-color: #0f0;

            /* vh(viewport-height): 相对于视口高度的百分比 */
            height: 100vh;
            /* vw(viewport-width): 相对于视口宽度的百分比 */
            width: 50vw;
        }

盒模型

什么是盒模型
- 盒模型是浏览器对html元素的宽高大小，元素间间距的解析方式
  - 解析方式：
    
    1 ie盒模型：ie浏览器解析盒模型的方式，width height 设置宽高内容+内边距
    
    2 标准盒模型：width height 解析为内容宽高
盒模型的四个组成部分
- 内容 content
- 内边距padding
- 边框 border
- 外边距 margin

.box1 {
            background-color: #ff00ff;

            /* 内容 */
            width: 100px;
            height: 50px;

            /* 内边距 */
            /* 当设置一个值的时候代表每一边内边距都为 30px */
            padding: 30px;
            /* 第一个值代表上下内边距 第二个值代表左右内边距 */
            padding: 20px 50px;
            /* 设置 上 右 下的内边距 左侧内边距等于右侧内边距 */
            padding: 10px 20px 30px;
            /* 设置上右下左的四边内边距 */
            /* padding: 10px 20px 30px 40px; */

            /* 单独设置一边的内边距 */
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px;
        }

边框

 .box2 {
            width: 300px;
            height: 300px;

            /* 设置四边的边框 */
            border: 20px solid #00ffff;
            /* 以下边框属性都可以设置多个参数 */
            /* 边框宽度 */
            border-width: 10px 20px 30px 40px;
            /* 边框样式
                值类似于文本装饰线
                solid
                double
                groove
                ridge
                dashed
                dotted
                none: 没有边框
            */
            border-style: solid dashed double dotted;
            /* 边框颜色 */
            border-color: #ff0000 #ffff00 #0000ff #00ff00;

            /* 指定单独一边的样式 */
            border-top: 50px ridge #7ece23;

            /* 边框弧度 */
            border-radius: 20px;

外边距

 .box3 {
            border: 5px solid #000000;

            width: 100px;
            height: 100px;

            /* 外边距
                设置方法和内边距完全一样
            */
            margin: 50px;
            margin: 30px 20px;
            margin: 10px 20px 30px;
            margin: 10px 20px 30px 40px;

            /* 单独设置一边的外边距 */
            margin-top: 10px;
            margin-right: 20px;
            margin-bottom: 30px;
            margin-left: 40px;
        }

border-sizing:规定width height属性如何解析

待选项
- content-box：内容盒
- border-box：边框盒添加内外边距不会撑大盒子

行内元素内外边距问题

行内元素无法设置宽高，宽高由内容决定
行内元素上下内边距设置无效，左右内外边距有效

salc（）计算函数

函数中可以由任意单位的尺寸进行运算
注意：计算函数左右有空格

计算属性常用来设置元素宽高或者元素位置

  /* 设置元素宽度 */
            width: calc(100% - 4em);

position: absolute;

            /* 使用计算函数设置位置 */
            left: calc(50% - 100px / 2);

通过边框画三角形

<style>
        .box {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 50px;
            border-color: #ff0000 #ffff00 #0000ff #00ff00;
        }

        .box1 {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 50px;
            border-color: transparent #ffff00 transparent transparent;
        }

        .box2 {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 50px 20px;
            border-color: #ffff00 #ffff00 transparent transparent;
        }
    </style>
</head>

<body>
    <div class="box">1</div>
    <div class="box1">2</div>
    <div class="box2">3</div>
</body>

外边距穿透和合并问题
第一个子元素设置margin-top会穿透到父元素的外面
- 若希望子盒子与父元素box间有上间距，可以通过padding内边距实现
水平排列的两个元素
- 左右外边距融合时，两元素距离为外边距和
竖直排列的两个元素
- 上下外边距融合时，两元素谁大取谁的值

文本

文本对齐方式text-align

 /* 文本对齐方式 */
            /* 待选项：
                left: 文本靠左对齐
                center: 文本居中
                right: 文本靠右对齐
            */
            /* text-align: right; */

修改字体

            /* 修改字体 */
            /* font-family的值是字体名称，必须是操作系统中或浏览器中存在的字体 */
            /* font-family: 'abc', '华文琥珀'; */

/* 字体大小 */
            font-size: 16px;

修改文本粗细font-weight

            /* 修改文本粗细 */
            /* 待选项：
                数字：数字越大越粗
                normal: 正常粗细 
                bolder: 加粗
                lighter: 细
            */
            font-weight: bolder;

修改字体颜色color

/* 修改文本颜色 */
            /* 常见：red black white green blue */
            color: rgb(216, 28, 28);

            /* 不常见样式 */
            /* 单词间距离，指的是英文单词 */
            /* word-spacing: 16px; */

字符间距letter-spacing

 /* 字符间距 */
            letter-spacing: 16px;

修改英文的大小写text-transform

  /* 修改英文的大小写 */
            /* 待选项：
                uppercase: 所有字母大写
                lowercase: 所有字母小写
                capitalize: 单词的首字母大写
            */
            text-transform: capitalize;
        }

段落缩进text-index

 /* 段落缩进 
                1em = 1个字符宽
            */
            text-indent: 2em;

设置行高line-height
- 设置竖直上居中可以使行高=盒子高度

  /* 设置行高
                行高会影响文本 行内元素 行内块级元素
            */
            line-height: 100px;
            width: 200px;
            border: 5px solid #000;

垂直方向的排列方式vertical-align

 /* 垂直方向的排列方式
                参考系为本行的行高
                行高可以使用 line-height 进行修改
                待选项:
                    top: 顶部
                    bottom: 底部
                    middle: 居中
                    baseline: 文本排列在同一线上
            */
            vertical-align: middle;

文本装饰线text-decoration-style

/* 文本装饰线 */
            /* 文本上出现的装饰用的横线 */
            /* 装饰线由以下几部分组成：样子 + 位置 + 颜色 */

            /* 样子 */
            /* 待选项：
                dashed: 虚线
                dotted: 圆点
                doubled: 双实线
                solid: 单实线
                wavy: 波浪线
            */
            text-decoration-style: dashed;

文本装饰线的位置text-decoration

 /* 位置 */
            /* 待选项：
                overline: 文本上面
                underline: 文本下面
                line-through: 文本中间
                none: 隐藏装饰线
            */
            text-decoration-line: overline;

+ 文本装饰线颜色

/* 颜色 */
text-decoration-color: #00ff00;

+ 文本装饰线复合属性text-decoration

        /* 复合属性（缩写） */
        /* 复合属性的特点：位置可以随意调整，值的个数可以由任意个 */
        /* text-decoration: double underline #00ffff; */
        text-decoration: underline;

        /* 必须设置 位置 装饰线才会出现 */

装饰线是否遮挡文本text-decoration-skip-ink

        /* 装饰线是否遮挡文本 */
        /* 待选项：
            auto: 装饰线不会遮挡文本
            none: 装饰线会遮挡文本
        */
        text-decoration-skip-ink: auto;

+ <mark>要求文本内容一行显示，显示不下的内容用省略号代替</mark>

/* 可以使用以下样式满足上述需求 /
/ 文本溢出的显示方式
隐藏溢出内容
/
overflow: hidden;
/ 让内容强制不换行 /
white-space: nowrap;
/ 文本溢出样式
ellipsis 省略号
*/
text-overflow: ellipsis;

### 显示与隐藏元素的几种方法

/* 隐藏元素的几种方法: */

        /* 1. display: none 元素性质直接设为无 */
        /* display: none; */

        /* 2. opacity: 0 通过透明度 */
        /* opacity: 0; */

        /* 3. transform: scale(0) 元素缩放为0 */
        /* transform: scale(0); */

        /* 4. visibility: hidden 可见性设为不可见 */

### 颜色值

        /* 参考: https://www.w3schools.com/css/css_colors.asp
            https://www.w3schools.cn/css/css_colors.asp
        */

        /* 颜色值的表达方式有多种： */

        /* 预置文本: 代表颜色的英文单词 */
        /* transparent: 透明 */
        background-color: transparent;

        /* rgb值: 在计算机图形学中，红(red)绿(green)蓝(blue)是计算机的三原色 */
        /* 使用rgb函数来定义一个颜色值，其中第一个参数代表红色，第二个参数代表绿色，第三个参数代表蓝色 */
        /* 每个参数的取值范围是：0~255 (256是一个字节的大小Byte)*/
        background-color: rgb(13, 247, 212);

        /* rgba值: rgb代表红绿蓝，a(alpha通道)代表透明度，取值范围0~1，值越大，越不透明 */
        background-color: rgba(0, 0, 0, 0.2);

        /* HSL值: H色调 S饱和度（灰度） L代表亮度 */
        background-color: hsl(0deg, 100%, 50%);

        /* 十六进制值: 以井号开头 */
        /* 十六进制数由1~10超过10的部分由A~F表示 */
        /* 前两个数代表红色，中间两个数代表绿色，最后两个数代表蓝色 */
        /* background-color: #2233ff; 如果颜色值成对出现，可以简写为： #23f */
        background-color: #f00;

        /* 带透明度的十六进制 */
        background-color: #ff00ff7b;

### 样式继承

##### 几乎所有文本相关样式都可以继承

+ ###### 子元素可以继承父元素的样式



###

鼠标形状cursor

鼠标样式来自于系统样式

 /* cursor 鼠标形状
                鼠标样式来自于系统样式
            */
            /* 待选项:
                default: 系统默认样式
                move: 移动样式，是一个十字
                not-allow: 禁止符号
                pointer: 小手指
                wait: 等待符号
                text: 文本编辑光标
            */
            cursor: move;

滚动条

满足条件

内容区域大小>容器区域的大小

显示滚动条

    <style>
        /* 自定义滚动条网站: https://codepen.io/stephenpaton-tech/full/JjRvGmY */

        /* 若希望页面出现滚动条，则需要满足以下条件:
            内容区域的大小 > 容器区域的大小
         */

        .container {
            height: 500px;
            border: 5px solid #000;
            box-sizing: border-box;

            /* 添加溢出效果 */
            /* 超出容器部分隐藏 */
            overflow: hidden;
            /* 内容超出容器就产生滚动条 否则没有滚动条 */
            overflow: auto;
            /* 无论什么情况都显示滚动条 */
            overflow: scroll;
        }

        .content {
            height: 1000px;
            background-color: #f00;
        }

        /* ===== Scrollbar CSS ===== */
        /* Firefox */
        * {
            scrollbar-width: auto;
            scrollbar-color: #ff4d00 #9c9c9c;
        }

        /* Chrome, Edge, and Safari */
        *::-webkit-scrollbar {
            width: 32px;
        }

        *::-webkit-scrollbar-track {
            background: #9c9c9c;
        }

        *::-webkit-scrollbar-thumb {
            background-color: #ff4d00;
            border-radius: 16px;
            border: 7px solid #04ff00;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>

定位

定位是css中用于确定元素位置的属性

定位的类型

绝对定位
相对定位
固定定位
粘性定位

绝对定位 —position:sbsolute

参考系：默认参考视口

注意：绝对定位的元素会浮出文档流

.box1 {
            background-color: #f00;
            /* 1. 绝对定位
                参考系: 默认参考视口(viewport)
                绝对定位的元素将浮出文档流
            */
            position: absolute;
            /* 可以通过 top bottom left right 来设置坐标
                他们表示元素离视口 上下左右 距离多少
            */

            /* top: 100px;
            left: 200px; */

            /* 若元素宽度为自动 */
            width: auto;
            /* 那么设置互斥的定位信息，可以用于确定元素的大小 */
            left: 100px;
            right: 200px;



        }

注意：绝对定位的参考系可以修改

给绝对定位的先祖元素添加一个非static的定位就可以将该先祖元素变成参考系
static表示没有定位

相对定位 —position：relative

参考系：自己

 .box2 {
            background-color: #0f0;

            /* 2. 相对定位
                参考系: 自己
            */
            position: relative;

            /* top bottom left right 代表的含义为 相对自己的上边缘下边缘左边缘右边缘多少距离 */

            left: 100px;
        }

固定定位 —position：fixed

参考系：视口

特点：该定位的方式，当滚动条发生变化时，位置不会变化

.box4 {
            background-color: #00f;
            /* 3. 固定定位
                参考系: 视口
                该定位方式，当滚动条发生变化时，位置不会变化
            */
            position: fixed;
            bottom: 64px;
            right: 64px;
        }

粘性定位 —position：sticky

比如一般的顶部导航栏，在滑动页面时，一直在顶部

 .box5 {
            background-color: #f0f;
            /* 4. 粘性定位 */
            position: sticky;
            top: 100px;
        }

定位元素的层叠关系

默认情况后面的内容会盖住前面的内容
可以通过z-index：数字；修改定位的层叠关系，数字越大，层级越高，叠在上面
注意：必须是定位关系才可以使用

浮动

文档流

html文档中的元素会自动的向能够放下自己的区域自动填充像水流一样形成文档流

什么是浮动？

使元素从文档结构中浮出（漂浮出来），摆脱文档结构（成为独立浮空单位）

作用

浮动主要用于一批元素的页面布局

用法

在元素上加入float属性就可以浮动了

.item {
    /* float属性，两个备选项：left，right */
    float: left; 
}

浮动的特点

浮动会漂浮出文档，后续元素将填充到当前浮动元素的位置上来。
浮动的元素前面，如果还有块级元素，那么浮动出来的元素距离窗口顶部的距离，保持不变
当多个元素向相同方向浮动时，文档中上面一个元素会放在下面一个一个元素的前面。

应用场景

局部的一批元素需要进行横向排列时，可以考虑使用浮动

清除浮动

由于浮动元素不会再占据文档中的高度，所以浮动元素后面的元素会进行向上补位。

然而有时，我们不希望后面元素自动补位，而是希望浮动出去的元素依旧占据自身的高度。

此时就可以使用清除浮动属性

清除浮动的方法

给需要清除浮动的元素（一般来说是浮动元素下面的元素），添加 clear 样式，如：

.box3 {
    clear: both;
}

伪元素

 /* 伪元素： */
        /* 在html文档中，并非真实的文档元素，而是一个 "::" 由两个冒号组成的符号，具备了部分文档元素的功能 */

        /* 特点：伪元素默认情况是个行内元素 */

        /* before 元素标签体前的一个元素 */
        .box::before {
            /* content 必填 */
            content: 'before';

            display: block;
            width: 100px;
            height: 100px;
            background-color: #f00;
            color: #fff;
        }

        /* after 元素标签体后的一个元素 */
        .box::after {
            /* content 必填 */
            content: '';
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: #00f;
            color: #fff;
        }

        ul>li::after {
            content: '>'
        }
    </style>
</head>

<body>
    <div class="box">
        hello world
    </div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

布局

按照功能设计页面，进行页面区域的划分，这个过程叫做布局

常见布局

三段式

三段式：按照头身脚的部分，进行三段划分的布局

应用场景：广泛应用于各大网站的首页

布局形式如下：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <!-- 页头 -->
        <div>header</div>
        <!-- 内容 -->
        <div>content</div>
        <!-- 页脚（脚注） -->
        <div>footer</div>
    </body>
</html>

各部分作用：

header: 存放导航栏、搜索栏、用户信息
content: 内容数据的展现
footer: 存放版权信息和营业执照、合作伙伴、技术支持、客服

后台

参考用后台地址：AdminLTE 2 | Dashboard

什么是后台？后台用于维护操作一个系统的数据。一般不是用户访问的，而是企业管理员访问的。

布局形式如下:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <!-- 页头 -->
        <div>header</div>
        <!-- 内容 -->
        <div>
            <div>sidebar</div>
            <div>content</div>
        </div>
        <!-- 页脚（脚注） -->
        <div>footer</div>
    </body>
</html>

各部分作用：

header: 显示后台名称，用户信息
侧边栏sidebar: 充当内容页面的导航，点击导航按钮时，浏览器路径发生变化，但整体页面不会跳转，内容页面发生跳转
content: 内容数据的展现
footer: 版权或后台提供者的名称和联系方式

设计布局时候的原则

从大到小，从外向内进行布局

布局方法有哪些

div + css 布局: div 用于划分功能区域，css 用于设置元素大小和位置
table 表格布局: 使用表格对页面进行区域划分
flex 弹性盒布局: 按照主要轴和交叉轴方式进行元素排列
grid 栅格网格布局: 将页面按行列进行布局划分

flex布局

什么是flex以及作用是什么？

flex是一个对容器里的元素，进行纵向或横向排列的工具。

容器与子元素

在 flex 当中，有些属性是应用于容器的属性，有些属性是应用于容器中的子元素的属性。

主要轴和较差轴

flex 布局由横轴和纵轴组成，我们可以规定任一一个轴为主要轴，那么另一个就是较差轴

flex作用

用于元素布局

flex布局开始

必须在父元素上写display：flex开启flex功能

在父元素上的属性：

 /* 参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html */

        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
            color: #fff;
            font-size: 32px;
        }

        .container {
            width: 500px;
            height: 400px;
            border: 5px solid #000;

            /* 必须在父元素上写display:flex 来开启flex功能 */
            display: flex;

            /* 规定主要轴 */
            /* 默认情况，主要轴就是横轴 */
            /* 待选项：
                row: 默认值，规定横向为主轴
                column: 规定纵向为主轴
                row-reverse: 规定横向为主轴，同时反向
                column-reverse: 规定纵向为主轴，同时反向
             */
            flex-direction: row;

            /* 设置换行方式 */
            /* 待选项：
                wrap: 换行
                nowrap: 不换行
                wrap-reverse: 换行且反向
             */
            flex-wrap: wrap;

            /* 这个属性是 flex-direction + flex-wrap */
            /* flex-flow: nowrap column; */

            /* 定义元素在主要轴上的排列方式 */
            /* 待选项：
                flex-start: 对齐主轴起始点
                flex-end: 对齐主轴结束点
                center: 在主轴上居中
                space-around: 每个子元素两侧的间隔相等
                space-between: 两端对齐，中间平均分布
                space-evenly: 平均分布
             */
            justify-content: flex-start;

          /* 定义元素在交叉轴上的排列方式 */
          /* 待选项：
              flex-start: 对齐次要轴起始点
              flex-end: 对齐次要轴结束点
              center: 在次要轴上居中居中
              baseline: 根据子元素中的文本进行文本高度对齐
              stretch: 当不设置宽或高时，子元素的宽度或高度会自动占满整个容器
           */
          align-items: flex-start;

          /* 使用条件：子元素在主轴上必须换行 */
          /* 作用：多行子元素在交叉轴上的对齐方式 */
          /* 待选项和 justify-content 相同 */
          align-content: center;
      }
  </style>

+ #### 在子元素上的属性

/* 参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html */

    .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        color: #fff;
        font-size: 32px;
        border: 5px solid #000;
        box-sizing: border-box;
    }

    .container {
        width: 450px;
        height: 500px;
        border: 5px solid #000;

        /* 必须在父元素上写display:flex 来开启flex功能 */
        display: flex;

        justify-content: space-evenly;

        align-items: center;
    }

    .box1 {
        /* 排序
            数字越小越靠近主要轴的起始位置
        */
        /* order: 3; */
        /* flex-grow: 1; */

        /* 设置元素在flex容器中的宽度或高度 */
        /* 待选项：
            0: 不设置元素宽或高
            auto: 元素本身的宽或高
            其他长度: 设置元素宽或高，优先级高于width或height
         */
        /* 在flex当中直接将其作为宽或高使用即可 */
        flex-basis: 200px;
    }

    .box2 {
        /* order: 1; */

        /* 当主要轴上没有铺满时 设置flex-grow的元素会填满剩余区域 
            flex-grow 的值代表撑宽之后的元素 占主要轴大小的比例值，数字越大比例越大
        */
        /* flex-grow: 2; */

        /* 当元素占满整行时才能看出效果 */
        /* 该属性的效果是当元素沾满整行时压缩元素 */
        /* 值为0: 不压缩 */
        /* 大于零的值，元素将被压缩，且值越大压缩得越厉害 */
        flex-shrink: 2;


        /* 设置子元素在交叉轴上的排布方式 */
        /* 其待选项和 align-items 相同 */
        align-self: flex-end;
    }

    .box3 {
        /* order: 2; */
        /* flex-grow: 3; */


        /* flex 复合属性，代表了 flex-grow; flex-shrink; flex-basis */
        /* 赋值顺序不可调换 */
        /* 待选项:
            auto: (1 1 auto)
            none: (0 0 auto)
            任意其他值 
         */
        flex: 1 0 auto;
    }
</style>

### 回流和重绘

参考: [浏览器的回流与重绘 (Reflow & Repaint) - 掘金](https://juejin.cn/post/6844903569087266823)

回流和重绘是浏览器在页面元素发生变化时，更新元素的两种方案

#### 回流

当一个元素发生以下变化则触发回流:

1. 大小

2. 文档流中的位置

3. 内容

4. 结构


回流时浏览器将更新整个页面或部分区域

table 表格标签的修改会触发回流，所以 table 表格布局不推荐使用

#### 重绘

当一个元素变化但没有触发回流时，将触发重绘

例如: 修改 color 属性 background-color 属性 等

重绘只会重修渲染当前被修改的元素

### grid布局

/*
知识点
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid

        基本用法
            display: grid
            grid-template-rows
            grid-template-columns
        通过网格线设置单元格位置和大小
            grid-row-start
            grid-row-end
            grid-row
            grid-column-start
            grid-column-end
            grid-column
        通过命名区域的方式进行布局
            grid-template-areas
            grid-area
        网格间距
            row-gap
            column-gap
            gap
     */

    .grid-container {
        background-color: blue;

        height: calc(100vh - 16px);

        /* 父元素上使用 display: grid 开启网格布局 */
        display: grid;

        /* 行高
            每个参数代表每行的高度
            参数的个数代表有多少行
            单位 fr 代表 一行或一列 占总长度的多少份
        */
        grid-template-rows: 1fr 1fr;
        /* 列宽
            每个参数代表每列的宽度
            参数的个数代表有多少列
        */
        grid-template-columns: 1fr 1fr 1fr;

        /* 网格区域图 
            . 点运算符代表空单元格
        */
        /* grid-template-areas: 'Aa Aa Aa Dd . '
            'Aa Aa Aa Dd .'
            'Ee Ee .  Dd Cc'; */

        /* 行间距 */
        row-gap: 20px;

        /* 列间距 */
        column-gap: 40px;

        /* 行列间距
            第一个参数是行间距
            第二个参数是列间距
        */
        gap: 10px 50px;
    }

    .grid-item {
        border: 5px solid #000;

        background-color: aqua;
    }

    .f {
        /* 网格线的起始行线 */
        grid-row-start: 2;
        /* 网格线的结束行线 */
        grid-row-end: 3;

        /* 网格线的起始列线 */
        grid-column-start: 3;
        /* 网格线的结束列线 */
        grid-column-end: 4;
    }

    .b {
        /* 同时设置网格线的起始和结束行线 */
        grid-row: 1/3;
        /* 同时设置网格线的起始和结束列线 */
        grid-column: 2/3;
    }

    .a {
        /* 给单元格取名，用于填充 grid-template-areas 中划分的区域 */
        grid-area: Aa;
    }

    .c {
        grid-area: Cc;
    }

    .d {
        grid-area: Dd;
    }

    .e {
        grid-area: Ee;
    }
</style>

```

补充

快捷键

快速移动：选中（光标所在地）要移动的代码行 按住alt+上/下键
单行复制：alt+shift+上/下键
删除：退格键往前删除 delete键往后删除 
换界面alt+tab换
直接换行：ctrl+回车
删除一整行：ctrl+shift+k
标签更换：双击第一个标签名按ctrl+d（多行选中相同的代码）
格式化方法：alt+shift+f

面试考点

1）Link标签和@import的异同

相同：都能引入css文件

不同：link既可以引入css文件，也可以引入其他内容

@import只能引入css样式，较新的浏览器可以使用

2）盒模型的解析方式：

1 ie盒模型：ie浏览器解析盒模型的方式，解析为：width height 设置的宽高为内容+内边距

2 标准盒模型：width height 解析为内容宽高

盒模型四个组成部分：

内容 content

内边距 padding

边框 border

外边距 margin

3）隐藏元素的方法

1 display=none；将元素性质直接设为无，用的最多

2opacity：0；通过透明度为0.但是元素还是会占位置

3transform：scale（0）；设置元素缩放，元素还是占位置

4visibility：hidden；可见性设置为0；元素还是会占位置

4）清楚浮动对元素的影响

1给高度坍塌的父元素添加overflow：hidden；

2给浮动元素的父元素的下一个元素添加：clear：both；

布局方法有哪些

1div+css布局：div用于划分功能区域，css设置元素大小位置

2表格布局对页面进行区域划分

3 flex布局（弹性盒布局）：按照主要轴和交叉轴布局

4 栅格（网格）布局即grid布局：按照网格布局

5）回流和重绘

—都是浏览器在页面元素发生变化时，更新元素的两种方案

回流：当一个元素发生以下变化会触发回流

1大小

2 文档流中的位置

3 内容

4 结构

回流时，浏览器将更新整个页面或者部分页面。

经典的修改表格的标签会触发回流，所以table表格布局不推荐使用。

重绘：当一个元素变化但没有触发回流时，将触发重绘，例如修改color属性、background-color等属性，重绘只会重新渲染当前被修改的元素。

华清远见重庆中心——HTML和CSS基础阶段技术总汇

HTML和CSS

HTML

HTML结构

常用标签

上下标签

文本格式化标签

转义字符

语法：&字符名

常用转义字符：

块元素，行内元素

块元素：

特点：

常见块级元素:

行内元素：

特点：

常见行内元素:

span 标签：本身没有语义，常用来帮助处理文本

标签的属性

格式 ：

属性名：“属性值”

位置

开始标签里

作用

设置标签的附加信息

img标签

作用

显示图片

属性

src属性，必要属性，定位图片的路径

alt属性，图片的描述信息，在图片无法正常显示的文字信息

title属性，图片的标题，在鼠标悬停在图片上显示

width和height属性，设置图片的宽高

路径

相当于电子路线，定位到计算机上的资源文件

相对路径

绝对路径

注意：

列表

有序列表ul

li为列表项。注意：li可以放其他任何标签，比如a标签等

有序列表ol

li标签为列表项

自定义列表dl

dt 术语标题

dd 对术语的解释

超链接a标签

属性：

herf 定义超链接跳转路径

target 定义跳转的方式

锚点

设置id属性，a标签的herf属性=“对应锚点的id属性值”

表格table

必要标签table

table’常用属性

border=“1” 加上边框

cellspacing=“0” 表格之间的间隙为0，单位px

table必要标签

表格的结构

thead

tbody

tfoot

合并单元格

表单

需要放在表单域中

type属性

其他属性

label标签

select标签

多行文本框textarea

内联框架iframe

audio音频标签

vedio音频标签

CSS

CSS简介

什么是css

css的 作用

使用

三种引入样式的方式

不同位置引入的样式的优先级:

格式：

css的作用