HTML基础

最新推荐文章于 2026-06-17 22:45:00 发布

原创最新推荐文章于 2026-06-17 22:45:00 发布 · 182 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端

HTML基础

1.初始框架

<!DOCTYPE html>
<!-- 文档类型：html5 -->
<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>
    <!-- 网页标题 -->
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <!-- 标题图标 -->
</head>
<body>
    
</body>
</html>

2.标签分类

2.1 单双标签

单标签

<标签名称/>

hr(横线)

br(换行)

img(图片标签)

input(输入字段)

双标签

<标签名称></标签名称>

html

head

body

title

h(标题)

p(段落)

b/strong(加粗,strong有强调语义)

i/em(倾斜,em有强调语义)

u/ins(下划线，ins有强调语义)

s/del(删除线，del有强调语义)

div(分区，结合css，独占一行)

span(文本标签，一行展示)

a(链接)

ul(无序列表)：li(列表项) ul里面只能嵌套li，li里面可以嵌套任何内容

ol(有序列表)：li(列表项) ol里面只能嵌套li，li里面可以嵌套任何内容

dl(自定义列表)：dt(名词) dd(名词解释)

table(定义表格)：tr(定义表格行) td(定义表格列) th(表头，自动加粗) caption(表格标题)

form(表单)：lable(使文字可点)

select(下拉菜单)：option(选项)

textarea(多行文本域)

2.2 块级元素，行内元素，行内块级元素

块级元素

独占一行，设置宽高生效

块级元素的宽度默认是父元素的100%，高度由内容撑开

display:block; 将其他类型元素转化为块级元素

h，p，div，ul，li，ol，dl，dt，dd，table，tr，td，th，form

行内元素

在一行显示，设置宽高不生效，宽高由内容展开

display:inline; 将其他类型元素转化为行内元素

b，i，u，s，span，a，br，label，select

行内块级元素

在一行显示，设置宽高生效

display:inline-block; 将其他类型元素转化为行内块级元素

img，input，textarea

隐藏元素

display:none;

visibility:hidden;

opacity:0;(透明度，0：完全透明，-1：完全不透明)

    <!-- 隐藏图片 -->
    <style>
        .btn {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px  solid black;
        }
        img:last-child {
            display: none;
        }
        .btn:hover ~ img:last-child {
            display: block;
        }
        .btn:hover + img {
            display: none;
        }
    </style>
    <div class="imgbox">
        <div class="btn">隐藏图片</div>
        <img src="../../01-day/img/3.jpg" alt="">
        <img src="../../01-day/课堂/img/1.jpg" alt="">
    </div>

2.3 嵌套规则

（1）行内元素只能嵌套文本或行内元素，不能嵌套块级元素

（2）h标签不能嵌套h标签

（3）p标签不能嵌套p标签

（4）ol/ul只能嵌套li标签

（5）table只能嵌套tr tr只能嵌套td

（6）a标签可以嵌套其他标签，但不能嵌套a

3.标签使用

3.1 标题标签h使用

    <h1>标题标签1</h1>
    <h2>标题标签2</h2>
    <h3>标题标签3</h3>
    <h4>标题标签4</h4>
    <h5>标题标签5</h5>
    <h6>标题标签6</h6>
<!-- 快速创建标题标签：1.h3*6 2.h$*6 3.h${内容}*6 4.h${内容$}*6-->

3.2 图片标签img使用

    <img src="./img/1.jpg" alt="" title="风景照">
    <img src="./img/2.jpg" alt="这是一只狗">
    <img src="../img/3.jpg" alt="">
<!-- 
        src图片路径：
        绝对路径：网络路径
        相对路径：
        ./: 当前文件所在文件夹
        ../: 当前文件所在文件夹的上一级文件夹
        ../../: 上两级

        alt:图片加载不出来时显示的文字

        title:鼠标移上去显示的文字
-->

3.3 链接标签a使用

    <a href="https://www.baidu.com/">百度一下</a>
    <a href="./img/1.zip">下载图片</a>
    <a href="" target="_blank">测试</a>
    <a href="">百度一下</a>
<!--
        href链接地址：1.外部链接 2.内部链接 3.下载链接
        target打开新标签页：_self：默认，打开当前页  _blank：新标签页打开当前页面
-->

    <!-- 锚点定位 -->
    <span id="top">
        <a href="#first">开始</a><br>
        <a href="#second">中场</a><br>
        <a href="#third">结束</a>
    </span>
    

    <h3 id="first">开始</h3>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h3 id="second">中场</h3>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h3 id="third">结束</h3>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#top">返回顶部</a>

3.4 无序列表ul使用

    <ul type="circle">
        <li>惊人爆料！与特朗普关系不一般的他人设崩了</li>
        <li>这个春天，他们困在过敏里</li>
        <li>高龄老人，与失去耐心的儿女们</li>
        <li>“富贵病”不治，酷派难回第一梯队</li>
        <li>这次来到中国，马克龙不由发出这两个感慨</li>
    </ul>
<!-- 
        列表头样式：type=""  square:实心方框  circle:空心圆  默认:实心圆
-->

3.5 有序列表ol使用

    <ol>
        <li>惊人爆料！与特朗普关系不一般的他人设崩了</li>
        <li>这个春天，他们困在过敏里</li>
        <li>高龄老人，与失去耐心的儿女们</li>
        <li>“富贵病”不治，酷派难回第一梯队</li>
        <li>这次来到中国，马克龙不由发出这两个感慨</li>
    </ol>
<!-- 
        列表头样式：type=""  A:ABCD  a:abcd  i:i ii iii(罗马数字)
-->

3.6 自定义列表dl使用

	<dl>
        <dt>名词</dt>
        <dd>名词解释1</dd>
        <dd>名词解释2</dd>
    </dl>

3.7 表格table使用

	<table border="1" width="500px" height="200px" cellspacing="0">
        <caption>表格</caption>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
<!-- 
        border：边框
        cellspacing：单元格之间间距
        cellpadding：单元格内容与边框的间距
        align：表格对齐方式 center
-->

3.8 合并单元格

	<table border="1" width="500px" height="200px" cellspacing="0">
        <caption>合并表格</caption>
        <tr>
            <td rowspan="2">单元格</td>
            <td>单元格</td>
            <td colspan="2">单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
<!-- 
        合并单元格：
        1.确定跨行(rowspan)还是跨列(colspan)
        2.确定目标单元格
            跨行：最上面单元格
            跨列：最左侧单元格
        3.目标单元格上写rowspan/colspan
        4.删除多余单元格
-->

3.9 表单form使用

	<form action="../作业/合并单元格.html">
        账号：<input type="text" name="username" placeholder="请输入账号"><br>
        密码：<input type="password" name="psd" maxlength="6"><br>
        性别：
        <label>
            男<input type="radio" name="sex" value="male">
        </label>
        <!-- lable:使文字可点 -->
            女<input type="radio" name="sex" value="female"><br>
        爱好：
            看书<input type="checkbox" name="like" value="book">
            旅游<input type="checkbox" name="like" value="trival">
            运动<input type="checkbox" name="like" value="execise">
        <!-- username=122344&psd=22222&sex=male&like=book&like=trival -->
        <input type="submit">
        <input type="reset">
        <input type="button" value="加1">
        <input type="file" multiple>
    </form>
<!-- 
        form属性：
            action:表单数据提交路径
            method:提交方法
        表单控件：
            input输入框:
                type(输入框类型)：
                    1.text(文本) 
                    2.password(密码框) 
                    3.submit(提交按钮) 
                    4.reset(重置按钮) 提交和重置按钮需要在form标签内部
                    5.button(按钮)
                    6.image(图片按钮)
                    7.file(文件上传按钮)
                    8.radio(单选框)
                    9.checkbox(复选框)
                value(按钮上的字)
                multiple(多选文件)
                name(标识符,提交数据到服务器的标识符)
                maxlength:最大输入字数
                placeholder:输入框提示信息
                checked：针对单选框和复选框的默认值
-->

3.10 下拉菜单select使用

	<select name="city" id="">
        <option value="" disabled selected>请选择所在城市</option>
        <option value="">成都</option>
        <option value="">上海</option>
        <option value="">北京</option>
        <option value="">三亚</option>
    </select>
<!-- 
        下拉菜单：
            多选:multipe
            禁止选择:disabled
            默认选中:selected
-->

3.11 多行文本域textarea使用

<textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea>
<!-- 
        多行文本域：
            cols:一行多少字
            rows:多少行
            style="resize: none;":禁止拉伸
-->

HTML5

1.框架

	<header>定义网页头部 页眉</header>
    <nav>定义导航链接部分</nav>
    <section>定义区域</section>
    <article>定义文章</article>
    <aside>定义侧边栏</aside>
    <footer>定义网页底部 页脚</footer>

2.常用标签及案例

	<fieldset>
        <!-- 边框 -->
        <legend>学生档案</legend>
        <form action="">
            姓名：<input type="text" placeholder="请输入学生名字"><br>
            手机号：<input type="text"><br>
            邮箱：<input type="email"><br>
            <!-- 选项列表 -->
            所学专业：<input type="text" list="lesson" placeholder="请输入所学专业">
            <datalist id="lesson">
                <option>法律</option>
                <option>计算机</option>
                <option>数学</option>
                <option>语文</option>
            </datalist>
            <br>
            出生年月：<input type="date"><br>
            成绩：<input type="number"><br>
            <input type="submit">
            <input type="reset">
        </form>
    </fieldset>

    <!-- mark：标记 -->
    <p><mark>“苏州科技大学凌晨4点发考研待录取通知”</mark>一事引发关注，据澎湃新闻报道，该校材料科学与工程学院院长李长明表示，“面试时学院老师就告知学生当晚将发放待录取通知”，“据我了解学校通过研招网发送待录取通知的时候也电话通知了各位考生”。</p>

    <!-- meter：度量衡  min最小值  max最大值  value当前值 -->
    <meter min="20" max="60" value="30"></meter>

    <!-- progress：进度条 -->
    <progress value="20" max="100"></progress>

    <form action="">
        邮箱:<input type="email"><br><br>
        url: <input type="url"><br><br>
        数字:<input type="number"><br><br>
        搜索:<input type="search"><br><br>
        滑块: <input type="range"><br><br>
        时分:<input type="time"><br><br>
        年月日:<input type="date"><br><br>
        年月日 时分:<input type="datetime-local"><br><br>
        年月:<input type="month"><br><br>
        <!--星期: <input type="week"><br><br>
        颜色:<input type="color"><br><br> -->
        <input type="submit">

    </form>

HTML多媒体控件

	<!-- 音频或视频等资源 -->
    <embed src="" type="">

    <!-- 音频 controls:控件(有控件才能播放) loop:循环播放-->
    <audio src="" controls loop></audio>

CSS样式

1.含义

层叠样式表或级联样式表

2.CSS引入方式

2.1 行内样式

开始标签加style属性 style="属性名：属性值;"

2.2 内联样式

head标签中的style标签，使用标签选择器

2.3 外联样式

link标签引入外部css文件，使用标签选择器

2.4 优先级

行内优先级最高，而内联和外联执行更靠近下方(就近原则)

3.样式设置

3.1 字体属性

字体颜色color

取值:

red，blue，...

16进制

rgb(0,0,0)~rgb(255,255,255)

rgba(0,0,0,0)~rgb(255,255,255,1) 0~1表示透明度

字体大小font-size

px(默认为16px，最小为12px)

字体font-family

取值:'宋体','微软雅黑'，...

字体粗细font-weight

取值:100(最细)-900(最粗) 100整数倍

字体风格font-style

取值:italic(倾斜)，oblique(倾斜)，normal(正常)

3.2 文本属性

文本水平方向对齐方式text-align

只针对于块级元素

取值:left，center，right

文本修饰符text-decoration

取值:overline(上划线)，line-through(删除线)，underline(下划线)，none(删除默认样式)

文本缩进text-indent

取值:20px

文本阴影text-shadow

格式：水平方向的阴影距离垂直方向的阴影距离 (阴影模糊距离) 阴影颜色

取值:3px 3px 1px red

文本转换text-transform

取值:uppercase(转为大写字母)，lowercase(转为小写字母)，capitalize(首字母大写)

文本方向direction

取值:rtl，ltr

字符距离letter-spacing

针对中文字符

单词间距word-spacing

针对英文字符

行高line-height

文本上空隙+文本高度+文本下空隙

单行文本垂直方向居中:line-height = height

height(盒子高)，width(盒子宽)，background-color(盒子背景颜色)

3.3 背景

背景颜色background-color

取值:red，blue，...

16进制

rgb(0,0,0)~rgb(255,255,255)

rgba(0,0,0,0)~rgb(255,255,255,1) 0~1表示透明度

背景图片background-image及设置

background-image:url(图片地址)

background-repeat:

取值：

repeat 默认值，x轴和y轴都平铺

no-repeat 不平铺

repeat-x x轴平铺

repeat-y y轴平铺

background-position:

图片位置，取值：

top/bottom/center left/right/center(只写一个值时，另一个值默认center)

也可像素值：

第一个值x轴第二个值y轴

background-size:

背景图大小，取值：

像素值：第一个值x轴第二个值y轴

百分比：相对于盒子的宽高

cover：背景完整

contain：图片完整

background-attachment:

背景附着，取值：

fixed：当页面的其余部分滚动时，背景图像不会移动。

scroll：默认值。背景图像会随着页面其余部分的滚动而移动。

多背景图：

通过逗号分隔多个背景，写在前面的更接近用户的眼睛

background-image:url(图片地址),url(图片地址)

其他设置同理

	<style>
        .imgbox {
            background-color: pink;
            width: 500px;
            height: 200px;
            border: 1px solid transparent;
            background-image: url(./img/img_flwr.gif),url(./img/paper.gif);
            background-repeat: no-repeat,repeat;
            background-position: bottom right,center;
            background-size: 180px 130px,100%;
        }
    </style>
	<div class="imgbox">
        <h3>#岸田文雄露面#</h3>
        <p>日本共同社报道，15日日本首相岸田文雄的演讲场地传出爆炸声，随后岸田更换了演讲场地，于当地时间15日下午发表演讲。</p>
        <p>岸田向听众表示，“让你们感到担心和困扰，对此表示抱歉”。</p>
    </div>

精灵图：

很多小图合成的一张大图

若需要取其中一张图，则

把盒子设置大小符合小图大小，使用background-position调整位移，且都为负数

	<style>
        .imgbox {
            width: 108px;
            height: 38px;
            background-image: url(./img/common_sprite.png);
            background-position: -400px -137px;
        }
    </style>
	<div class="imgbox"></div>

背景渐变：

线性渐变：background:linear-gradient(渐变方向to right/bottom/right bottom,两个或两个以上颜色，逗号分隔);

径向渐变：background:radial-gradient

css基本选择器

1.标签选择器

标签 {

}

2.id选择器

开始标签设置id属性

#id {

}

3.class类选择器

开始标签设置class属性

.class {

}

4.*通配符

所有标签

*{

}

通常(消除浏览器默认样式): margin:0; padding:0;

5.链接伪类选择器

a:link {

}

取值：

a标签独有：

:link(链接未点击前状态)

:visited(链接点击后状态)

所有标签都有：

:hover(鼠标移上去的状态)

:active(鼠标按住状态)

必须按照该顺序设置

6.位置伪类选择器

6.1 第一种

div:first-child {

}

1.看位置

2.看选择器

取值：

:first-child

:last-child

:nth-child() 取值：数字，2n或2n+1

:nth-last-child() 倒数

6.2 第二种

span:first-of-type {

}

1.过滤其他选择器(看选择器)

2.看位置

取值：

:first-of-type

:last-of-type

:nth-of-type()

:nth-last-of-type()

7.目标伪类选择器

:target {

}

用于锚点定位，点击链接后，样式改变

8.排除选择器

标签:not(选择器) {

}

例：

span:not(:last-child)::after {

content: "|";

} 排除最后一个span标签设置，在结尾加上|

	<!-- 小米导航栏 -->		
	<style>
        .box {
            width: 100%;
            height: 35px;
            line-height: 35px;
            color: #B0B0B0;
            background-color: #323232;
            font-size: 12px;
        }
        span:hover {
            color: white;
            cursor:pointer;
        }
        span:not(:last-child)::after {
            content: " |";
            color: #42403e;
        }
        .first {
            padding-left: 80px;
            float: left;
        }
        .second {
            float: right;
            padding-right: 200px;
        }
        .purchase {
            background-image: url();
        }
        .purchase:hover {
            cursor:pointer;
            display: inline-block;
            color: #FF6700;
            background-color: white;
        }
    </style>
	<div class="box">
        <div class="first">
            <span>小米官网</span>
            <span>小米商城</span>
            <span>MIUI</span>
            <span>loT</span>
            <span>云服务</span>
            <span>天星数科</span>
            <span>有品</span>
            <span>小爱开放平台</span>
            <span>企业团购</span>
            <span>资质证照</span>
            <span>协议规则</span>
            <span>下载APP</span>
            <span>Select Location</span>
        </div>
        <div class="second">
            <span>登录</span>
            <span>注册</span>
            <span>消息通知</span>
            <span class="purchase">购物车 (0)</span>
        </div>
    </div>

9.聚焦选择器

选择器:focus {

}

例：

input:focus {

color:red;

outline:none;

} 输入框输入时字体颜色为红色，并去除外轮廓线

10.优先级

id具有唯一性(身份证号)

class(名字)

id > class(伪类) > 标签 > *

11.多类名

一个标签可以有多个类名，使其具有多个类的样式，若样式重复，就近原则(style内就近)

CSS复合选择器

1.交集选择器

两个选择器写在一起，表示并且

注意：若其中一个是标签选择器，标签选择器放前面

	<style>
        .box#box {
            color: aqua;
        }
    </style>

2.并集选择器

用逗号分隔两个选择器，表示和

	<style>
    	.box,
        .inner {
            color: azure;
        }
	</style>

3.子代选择器

使用>，表示子代，只找儿子，不找孙子

父选择器 > 子选择器 {

}

	<style>
    	.nav > li {
            	color: aliceblue;
        }
        	/* nav下的子代li */
    </style>

4.后代选择器

使用空格，表示后代，选择所有满足条件的后代选择器

父选择器子选择器 {

}

	<style>
        .nav li {
            color: antiquewhite;
        }
        /* nav下的所有li */
    </style>

5.兄弟选择器

使用+，表示下一个兄弟，只找下一个兄弟，若不满足(+号后面的)条件，则不生效

使用~，找到当前元素下所满足条件的所有兄弟

	<style>
        .inner + div {
            color: aquamarine;
        }
    </style>

CSS属性选择器

[attr]：存在属性

[attr=val]：存在属性并且值相等

[attr*=val]：存在属性并且包含值

[attr^=val]：存在属性并且以值开头

[attr$=val]：存在属性并且以值结尾

	<style>
        [name] {
            color: aqua;
        }
        /* 拥有name属性的标签设置属性 */
        [type='text'] {
            color: red;
        }
        /* 拥有type属性且值为text */
        [type='e'] {
            color: yellow;
        }
        /* type属性中含有字母e */
        [type='p'] {
            color: blue;
        }
        /* type属性中以p开头 */
    </style>

伪元素选择器

::after 在元素后面新增内容

::before 在元素前面新增内容

::first-line 第一行的样式

::first-letter 第一个字的样式

	<style>
        .person::after {
            content: '这是新增的内容';
            color: red;
        }
        .person::before {
            content:'这是前面的';
        }
        .person::first-line {
            color: pink;
        }
        .person::first-letter {
            color: aqua;
            font-size: 30px;
        }
    </style>

	<body>
    	<div>西游记</div>
    	<div class="person">主角：唐三藏、</div>
    </body>

CSS三大特性

1.层叠性

当一个属性通过两个选择器设置在同一个元素上，那其中一个属性就会被另一个替换掉。

2.继承性

有些属性可以继承，如color，font-，line-，text

a的color，text-decoration:none不能继承，只能单独设置

h的font-size，font-weight不能继承

3.优先级

同类型的选择器：就近原则

不同类型的选择器，按照优先级层叠

!important > 行内 > id > class/伪类/属性 > 标签/伪元素 > 通配符 > 继承 > 浏览器默认属性

!important只针对单个属性

使用多个选择器时，需要计算权重

	<style>
        /* 
        权重计算：
        行内 1000
        id 0100
        class/伪类/属性 0010
        标签/伪元素 0001
        */
        a {
            /* 0001 */
            color: yellow;
        }

        div a {
            /* 0001+0001 = 0002 */
            color: green;
        }

        .demo a {
            /* 0010+0001 = 0011 */
            color: black;
        }

        .demo input[type="text"] {
            /* 0010+0001+0010 = 0021 */
            color: blue;
        }

        .demo *[type="text"] {
            /* 0010+0000+0010 = 0020 */
            color: grey;
        }

        #demo a {
            /* 0100+0001 = 0101 */
            color: orange;
        }

        div#demo a {
            /* 0001+0100+0001 = 0102 */
            color: red;
        }
    </style>
	<a href="">第一条应该是yellow</a>
    	<div class="demo">
        	<input type="text" value="第二条应该是bule" />
        	<a href="">第三条应该是black</a>
    	</div>
    <div id="demo">
        <a href="">第四条应该是red</a>
    </div>

盒子模型

content(内容)，padding(内边距)，border(边框)，margin(外边距)

1. border(边框)：

border-width：宽

border-style：边框样式 solid单实线 dotted点线 double双实线

border-color：颜色 transparent表示透明

综合设置：border: 1px solid red;

border-top/bottom/right/left分别设置

border-radius:圆角

border-bottom-left-radius 设置左下角圆角

使用border-radius画圆，值为盒子宽高的一半

2. padding(内边距)：

盒子边框到内容间的距离

-left：左内边距

-right：右内边距

-bottom：下内边距

-top：上内边距

一个值：上下左右

两个值：上下左右

三个值：上左右下

四个值：上右下左(顺时针)

3. margin(外边距)：

盒子和盒子之间的距离

-left：左外边距

-right：右外边距

-bottom：下外边距

-top：上外边距

一个值：上下左右

两个值：上下左右

三个值：上左右下

四个值：上右下左(顺时针)

auto：

在水平方向，表明最大值

left和right都为auto，在其父元素中居中

在垂直方向，等于0

margin: 0 auto;盒子水平居中，条件：盒子需要是块级元素，且盒子一定有宽度

兄弟关系盒子外边距合并：

1.两个外边距，正值，取最大值

2.一正一负，相加

3.两负值，取绝对值较大的值

父子关系盒子外边距塌陷：

子元素设置外边距时，父元素跟着塌陷了

解决：

1.给父元素加一个边框

2.给父元素加overflow：hidden;

4.盒模型分类

4.1 标准盒模型

width = width + padding-left + padding-right + border-left + border-right

height = height + padding-top + padding-bottom + border-top + border-bottom

4.2 ie盒模型

标准盒模型转化为ie盒模型：box-sizing:border-box;

width = width

height = height

overflow

取值：

visible 默认值

hidden 隐藏

auto 内容超出出现滚动条

scroll 无论内容是否超出都有滚动条

浮动

标准文档流

从上到下，从左到右

开启浮动

浮动元素脱离标准文档流，不会在标准文档流中占位

左浮动 float:left

右浮动 float:right

特点：

1.浮动元素会尽量向左或向右排列，直到遇到包含框或其他浮动元素

2.浮动元素不会占位置

3.浮动元素不会超过它前面的兄弟，会排成一行，若一行排不下，则换行

4.浮动元素不会超过上面标准文档流的块级元素

5.浮动元素不会遮挡文字，会形成文字环绕

影响：

浮动元素脱离标准文档流，撑不开父元素的高

解决：

1.给父元素直接设置高度

2.清除浮动最后一个浮动元素后面加一个【块级元素】(空的div)，为该元素添加clear:both;

3.给父元素添加 overflow:hidden;

定位

1.偏移量

top，left，top，bottom
定位元素在没有偏移量之前不会位移
设置偏移量时，top和left优先级比bottom和right高

2.相对定位

position: relative;
相对于自己原来的位置定位
保留了原来的位置，依然在标准文档流中，没有浮动(定位元素仍然占据原来位置，后续元素在其下方开始(看代码))

	<style>
        .fa {
            width: 200px;
            height: 200px;
            background: linear-gradient(pink,red);
            position: relative;
            top: 200px;
            left: 100px;
        }
        .bro {
            width: 200px;
            height: 200px;
            background: linear-gradient(blue,yellow);
            /* position: relative;
            top: 0px; */
        }
    </style>
    <div class="fa"></div>
    <div class="bro"></div>

内容跟着移动
定位元素比没有定位的元素层级高，会覆盖在没有定位的元素上
同为定位元素，后来居上

3.绝对定位

position: absolute;
相对于【有定位】的【父元素/祖先元素】进行定位，若父元素/祖先元素没有定位，则相对于body定位
没有保留原来的位置，脱离标准文档流
内容跟着移动
定位元素比没有定位的元素层级高，会覆盖在没有定位的元素上
同为定位元素，后来居上

4.盒子完美居中

4.1 子绝父相

水平垂直方向移动父元素宽高的一半

left: ;

top: ;

子元素自身宽高的一半(负数)

margin-left: ;

margin-top: ;

	<style>
        .outer {
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: relative;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 100px;
            left: 100px;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

4.2 第二种方法

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

5.层级

只针对于定位元素
决定哪个元素显示在上方
z-index: 1/2/3/...;(可为负数)
值越大，越靠上；同层级，后来居上
父子元素的层叠关系不能通过z-index改变
子元素层级与父元素层级相同，如果父元素层级小于父元素的一个兄弟，则子元素无论多大，都不能超过

6.固定定位

position: fixed;
相对于屏幕进行定位，滑动滚动条时，仍然不动
没有保留原来的位置，脱离标准文档流

	<!-- 小米侧边栏 -->
	<style>
        .box {
            width: 70px;
            height: 400px;
            position: fixed;
            right: 0px;
            bottom: 50px;
        }
        .box div {
            width: 70px;
            height: 70px;
            margin-top: 10px;
            background-repeat: no-repeat;
        }
        .first {
            background-image: url(./img/1.png);
        } 
        .first:hover {
            background-image: url(./img/1..png);
        }
        .second {
            background-image: url(./img/2.png);
        }
        .second:hover {
            background-image: url(./img/2..png);
        }
        .third {
            background-image: url(./img/3.png);
        }
        .third:hover {
            background-image: url(./img/3..png);
        }
        .forth {
            background-image: url(./img/4.png);
        }
        .forth:hover {
            background-image: url(./img/4..png);
        }
        .fifth {
            background-image: url(./img/5.png);
        }
        .fifth:hover {
            background-image: url(./img/5..png);
        }
    </style>
	<div class="box">
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
        <div class="forth"></div>
        <div class="fifth"></div>
    </div>

7.粘性定位

position: sticky;
以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）

弹性盒模型

1.定义

display: flex;
容器：定义弹性盒模型
项目：盒子的【子元素】
主轴：默认主轴方向为水平方向
交叉轴：垂直于主轴方向，默认y轴
让子元素在主轴方向一行显示

2.容器属性

2.1 设置主轴方向

flex-direction:
取值：

row：水平方向

column：垂直方向

row-reverse：水平反向

2.2 设置换行

flex-wrap:
取值：

nowrap 不换行(默认)

wrap 换行

2.3 设置主轴方向的对齐方式

justify-content:
取值：

flex-start 主轴方向向开始方向对齐(默认)

flex-end 主轴反向向结束方向对齐

center 主轴方向居中

space-between 两边对齐，剩余空间平均分配到元素之间

space-around 分散对齐，剩余空间平均分配到元素的两端

space-evenly 剩余空间完全均分

2.4 设置交叉轴方向的对齐方式

align-items
取值：

flex-start 交叉轴的开始方向

flex-end 交叉轴的结束方向

center 居中

	<style>
        .box {
            width: 1000px;
            height: 350px;
            border: 1px solid red;
            display: flex;
            justify-content:space-between;
            margin: 0 auto;
        }
        .box > div {
            width: 200px;
            height: 350px;
            border: 1px solid blue;
            box-sizing: border-box;
        }
        .second {
            display: flex;
            flex-direction: column;
            justify-content:space-evenly;
        }
        .second div {
            width: 200px;
            height: 200px;
            border: 1px solid green;
            box-sizing: border-box;
        }
        .forth {
            display: flex;
            flex-direction: column;
            justify-content:space-evenly;
        }
        .forth > div {
            width: 200px;
            height: 200px;
            border: 1px solid green;
            box-sizing: border-box;
        }
        .three {
            display: flex;
            justify-content:space-evenly;
        }
        .three > div {
            width: 100px;
            height: 175px;
            border: 1px solid yellow;
            box-sizing: border-box;
        }
    </style>
	<div class="box">
        <div class="first"></div>
        <div class="second">
            <div class="one"></div>
            <div class="two"></div>
        </div>
        <div class="third"></div>
        <div class="forth">
            <div class="three">
                <div class="start"></div>
                <div class="end"></div>
            </div>
            <div class="four"></div>
        </div>
    </div>

3.项目属性

3.1 单个项目在交叉轴上对齐方式

**align-self**
取值：

flex-start 主轴方向向开始方向对齐(默认)

flex-end 主轴反向向结束方向对齐

center 主轴方向居中

3. 2 放大比例

默认0
**flex-grow**
将剩余空间平均分配

3.3 缩小比例

默认1

转换

1. transform：转换

平移

translate(x,y) 可为负值
translateX() translateY() translateZ() (离眼睛的距离)
translate3d(x,y,z) 可为负值
perspective 视距设置z轴需要提前设置视距，在被观察元素的父元素上

旋转

rotate(单位deg)
rotateX() rotateY() rotateZ()
先平移后旋转

缩放

scale(无单位) 比1大就是放大，比1小就是缩小
scaleX() scaleY()

倾斜

skew(单位deg)

设置3d

transform-style: preserve-3d; 在父元素设置3d效果

	<!-- 3d骰子 -->
	<style>
        body {
            perspective: 800px;
        }
        .box {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            position: relative;
            transform: rotateX(45deg) rotateY(45deg);
            transform-style: preserve-3d;
        }
        .box .item {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .box .item:nth-child(1) {
            background-color: lightgreen;
            transform: translateZ(100px);
        }
        .box .item:nth-child(2) {
            background-color: pink;
            transform: translateZ(-100px);
        }
        .box .item:nth-child(3) {
            background-color: aqua;
            transform: translateX(-100px) rotateY(90deg);
        }
        .box .item:nth-child(4) {
            background-color: lightblue;
            transform: translateX(100px) rotateY(90deg);
        }
        .box .item:nth-child(5) {
            background-color: lightcoral;
            transform: translateY(100px) rotateX(90deg);
        }
        .box .item:nth-child(6) {
            background-color: lightgoldenrodyellow;
            transform: translateY(-100px) rotateX(90deg);
        }
    </style>
	<div class="box">
        <!-- 前后 -->
        <div class="item"></div>
        <div class="item"></div>
        <!-- 左右 -->
        <div class="item"></div>
        <div class="item"></div>
        <!-- 上下 -->
        <div class="item"></div>
        <div class="item"></div>
    </div>

2.transition：过渡

取值：

要过渡的属性花费时间运动曲线何时开始;
例：

transition: transform 2s;/transition: width 2s;

全部属性：transition: all 2s;

运动曲线：

linear 线性

ease-in 慢入

ease-out 慢出

ease-in-out 慢入慢出

	<style>
        .box {
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 2s;
            margin: 200px auto;
        }
        .box:hover {
            width: 300px;
            height: 300px;
            transform: rotate(45deg);
            background-color: lightgreen;
        }
    </style>
	<div class="box"></div>

	<!-- 百叶窗 -->
	<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: black;
        }
        .box {
            margin: 200px auto;
            position: relative;
        }
        /* 去掉列表项的点 */
        ul {
            list-style: none;
        }
        .box img {
            width: 600px;
            height: 300px;
            border: 2px solid white;
        }
        /* 设置左浮动，让其在一行显示，宽高由文字内容撑开 */
        .box li {
            /* 宽度给值，当hover时才会出现一个值到另一个值的过渡效果 */
            width: 40px;
            float: left;
            position: relative;
        }
        /* 脱离标准文档流，宽高失效 */
        li img {
            position: absolute;
        }
        .box li:hover {
            width: 620px;
            transition: all 1s;
        }
    </style>
	<ul class="box">
        <li>
            <img src="./img/b1.jpg" alt="">
            <div class="flag">scenery</div>
        </li>
        <li>
            <img src="./img/b2.jpg" alt="">
            <div class="flag">scenery</div>
        </li>
        <li>
            <img src="./img/b3.jpg" alt="">
            <div class="flag">scenery</div>
        </li>
        <li>
            <img src="./img/b4.jpg" alt="">
            <div class="flag">scenery</div>
        </li>
    </ul>

动画

1.定义动画

@keyframes 动画名称 {

from {开始状态}

to {结束状态}

}

可以通过百分数来设置过程变化，from相当于0%，to相当于100%

2.使用动画

animation: name duration timing-function delay iteration-count direction fill-mode;
name(动画名称)
duration(动画持续时间)
timing-function(动画运动曲线)

linear 线性

ease-in 慢入

ease-out 慢出

ease-in-out 慢入慢出
delay(延迟时间)
iteration-count(动画执行次数) 数字/infinite无限次
direction(动画方向)

normal 默认 from->to from->to

reverse to->from to->from

alternate from->to->from

alternate-reverse to->from->to
fill-mode(填充)

forwards 动画结束以to状态填充

backwards 动画结束以from状态填充

both forwards + backwards

	<style>
        .box {
            width: 300px;
            height: 200px;background-color: pink;
            animation: Bounce_a_flash 1s ease-in 1s infinite normal forwards;
        }
        /* 固定搭配，定义动画名称 */
        @keyframes Bounce_a_flash {
            from {
                width: 300px;
            }
            to {
                width: 500px;
            }
        }
    </style>
	<div class="box"></div>

	<!-- 动画实现轮播图 -->
	<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: black;
        }
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid red;
            overflow: hidden;
        }
        .content-box {
            width: 2400px;
            height: 300px;
            animation: swiper 5s infinite linear;
        }
        img {
            width: 600px;
            height: 300px;
            /* 消除图片间的间隙 */
            float: left;
        }
        @keyframes swiper {
            /* 第一张图 */
            0% {
                transform: translateX(0px);
            }
            /* 展示第一张图 */
            20% {
                transform: translateX(0px);
            }
            /* 第二张图 */
            /* 第一张图向第二张图转换 */
            25% {
                transform: translateX(-600px);
            }
            45% {
                transform: translateX(-600px);
            }
            /* 第三张图 */
            50% {
                transform: translateX(-1200px);
            }
            70% {
                transform: translateX(-1200px);
            }
            /* 第四张图 */
            75% {
                transform: translateX(-1800px);
            }
            99% {
                transform: translateX(-1800px);
            }
            100% {
                transform: translateX(0px);
            }
        }
    </style>
	<div class="box">
        <div class="content-box">
            <img src="./img/b1.jpg" alt="">
            <img src="./img/b2.jpg" alt="">
            <img src="./img/b3.jpg" alt="">
            <img src="./img/b4.jpg" alt="">
        </div>
    </div>

Grid网格布局

1.容器属性

1.1 定义grid布局

display: grid;

1.2设置行数，行高

grid-template-rows:

px px px; (三行，每行的行高，也可以使用百分比)

repeat(重复的个数,重复的值);

repeat(2,100px 200px); (表示重复一个循环，第一行100px，第二行200px，第三行100px，第四行200px)

1fr 3fr 2fr; (比例关系，第一行占一份，第二行占三份...)

px auto px; (第一行固定高，第三行固定高，第二行将父元素填充完)

1.3 设置列数，列宽

grid-template-columns:

px px px; (三列，每列的列宽，也可以使用百分比)

同上

1.4 设置网格线名称

grid-template-rows:

[c1] px [c2] px [c3] px [c4];

1.5 设置间距

gap:<row-gap> <column-gap>;

	<!-- 小米网格布局 -->
	<style>
        .box {
           width: 228px;
           height: 164px;
           display: grid;
           grid-template-rows: repeat(2,82px);
           grid-template-columns: repeat(3,auto);
        }
        img {
            width: 24px;
            height: 24px;
            margin-left: 23px;
            margin-top: 20px;
        }
        span {
            margin-top: 5px;
            margin-left: 12px;
            font-size: 12px;
            color: white;
        }
        .box div {
            background-color: #605750;
        }
    </style>
	<div class="box">
        <div>
            <img src="./img/x1.png" alt=""><br>
            <span>保障服务</span>
        </div>
        <div>
            <img src="./img/x2.png" alt=""><br>
            <span>企业团购</span>
        </div>
        <div>
            <img src="./img/x3.png" alt=""><br>
            <span>F码通道</span>
        </div>
        <div>
            <img src="./img/x4.png" alt=""><br>
            <span style="margin-left: 17px;">米粉卡</span>
        </div>
        <div>
            <img src="./img/x5.png" alt=""><br>
            <span>以旧换新</span>
        </div>
        <div>
            <img src="./img/x6.png" alt=""><br>
            <span>话费充值</span>
        </div>
    </div>

1.6 定义区域

grid-area: ; 在单个网格上定义区域名称
若有九个3*3网格，且名称分别为a，b，c，... 则

grid-template-areas:

'a b c'

'd e f'

'g h i'; 正常显示

'a a a'

'b b b'

'c c c'; 第一行显示同一个网格，二三行同理，即单元格合并

'a a .'

'b b .'

'c c c'; 点表示占位

	<style>
        .box {
            height: 230px;
            width: 630px;
            display: grid;
            grid-template-rows: 50px 50px 50px 50px;
            grid-template-columns: 150px 150px 150px 150px;
            background-color: #FFC0CB;
            gap: 10px;
            grid-template-areas: 
            'a b c d'
            'a b c d'
            'a b e d'
            'a b e f';
        }
        .box div {
            border: 1px solid red;
        }
        .box div:nth-child(1) {
            grid-area: a;
        }
        .box div:nth-child(2) {
            grid-area: b;
        }
        .box div:nth-child(3) {
            grid-area: c;
        }
        .box div:nth-child(4) {
            grid-area: d;
        }
        .box div:nth-child(5) {
            grid-area: e;
        }
        .box div:nth-child(6) {
            grid-area: f;
        }
    </style>
	<div class="box">  
        <!-- 总共几个单元格就有几个格子 -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

1.7 排列顺序

grid-auto-flow: ;

row 先行后列，放不下，自动换行

column 先列后行，放不下，自动换行

row dense 先行后列，放不下，由剩余的尽量填充

column dense 先列后行，放不下，由剩余的尽量填充

2.项目属性

2.1 定义开始结束行列(网格线)

grid-row-start 定义开始行

grid-row-end 定义结束行

grid-row 简写

grid-column-start 定义开始列

grid-column-end 定义结束列

grid-column 简写

值可以用数字，也可以用网格线的名称

可用于合并单元格

2.2 内容位置

justify-items: 设置单元格内容的水平位置;
align-items: 设置单元格内容的垂直位置;
取值：

start 对齐单元格的起始边缘

end 对齐单元格的结束边缘

center 单元格内部居中

stretch 拉伸，占满单元格的整个宽度(默认)

iconfont小图标使用

1.阿里巴巴矢量图库

Scss基础

css预处理器

1.变量

// 变量：声明变量，保存值，以供之后使用。有字符串，数字，颜色值，布尔值，列表，null值
// 变量名：大小写，英文，数字。不能以数字开头，$变量名: 变量值;
// 作用域 全局变量/局部变量 先定义后使用
// !global 将局部变量提升为全局变量
$w: 300px; 
$color: aqua;
// 全局变量
div {
    $s: 10px !global;
    // 局部变量
    border: $s;
    color: $color;
    font: $w;
}

div {
  border: 10px;
  color: aqua;
  font: 300px;
}

2.嵌套规则

// 嵌套规则
// 选择器嵌套
$r: red;
.header {
    // 后代
    .left {
        color: $r;
    }
    // 子代
    > div {
        background-color: linear-gradians($r,blue);
    }
    // 兄弟
    + span {
        color: $r;
    }
    ~ div {
        color: $r;
    }
    // 伪类、伪元素 &：父选择器
    &:hover {
        color: greenyellow;
    }
    &::after {
        content: '';
    }
}
// 属性嵌套
.nav {
    font: {
        size: 12px;
        weight: 700;
    }
}

.header .left {
  color: red;
}
.header > div {
  background-color: linear-gradians(red, blue);
}
.header + span {
  color: red;
}
.header ~ div {
  color: red;
}
.header:hover {
  color: greenyellow;
}
.header::after {
  content: "";
}

.nav {
  font-size: 12px;
  font-weight: 700;
}

3.import

// import文件
* {
    padding: 0;
    margin: 0;
}

// import用于引入其他的scss文件
@import './import.scss';

* {
  padding: 0;
  margin: 0;
}

4.混入样式

/* 
    混入功能模块样式
        @mixin 名称{}
        @include 名称
    1.不带参数 
    2.带单个参数
    3.带多个参数
*/
// 不带参数
@mixin jichu { 
    width: 200px;
    height: 200px;
    color: aqua;
}
.box {
    @include jichu;
}
// 带单个参数
@mixin jichu($o) {
    width: $o;
    height: 200px;
    color: aqua;
}
.box1 {
    @include jichu(100px);
}
// 带多个参数
@mixin jichu($o,$i) {
    width: $o;
    height: $i;
    color: aqua;
}
.box1 {
    @include jichu(100px,100px);
}

.box {
  width: 200px;
  height: 200px;
  color: aqua;
}

.box1 {
  width: 100px;
  height: 200px;
  color: aqua;
}

.box1 {
  width: 100px;
  height: 100px;
  color: aqua;
}

5.继承

/*
    继承
        @extend 选择器;
        继承选择器的样式，若有不一样的样式，直接写在下面
        继承与之相关的所有样式
*/
.fa {
    width: 200px;
    height: 200px;
    background-color: aqua;
    .child {
        color: red;
      }
}
.bro {
    @extend .fa;
    background-color: pink;
}

.fa, .bro {
  width: 200px;
  height: 200px;
  background-color: aqua;
}
.fa .child, .bro .child {
  color: red;
}

.bro {
  background-color: pink;
}

Git部署项目

在git中创建项目仓库
新建一个空的项目文件夹，在该文件夹中打开Git Bush Here
git clone 项目仓库地址
在该文件夹中写入项目
再从该文件夹打开Git Bush Here
git add .
git commit -m 'create index.html'(引号内为注释)
git push
项目内容有更新时，重复，即
git add .
git commit -m 'add 头部导航条'
git push

媒体查询

screen: 电脑，手机，平板

and 条件：

max-width 最大宽度

min-width 最小宽度

max-height 最大高度

min-height 最小高度

	/*内联*/
	<style>
        /*当页面宽度小于600px显示*/
        @media screen and (max-width: 600px) {
            div {
                width: 500px;
                height: 100px;
                background-color: aqua  ;
            }
        }
        /*当页面宽度大于1000px显示*/
        @media screen and (min-width: 1000px) {
            div {
                width: 1000px;
                height: 100px;
                background-color: red  ;
            }
        }
    </style>

	/*外联*/
	/*外部css写入样式，link引入*/
	<link rel="stylesheet" href="" media="screen  and (min-width: 600px)">

移动端布局

1.省略号

	<style>
        /* 单行省略号 */
        .box1 {
            width: 100px;
            height: 60px;
            border: 1px solid red;
            /* 强制一行显示 */
            white-space: nowrap;
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 超出部分省略号 */
            text-overflow: ellipsis;
        }
    </style>

	<style> 
        .box2 {
            width: 200px;
            height: 80px;
            border: 1px solid red;
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 超出部分省略号 */
            text-overflow: ellipsis;
            /* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 元素现实的文本行数 */
            -webkit-line-clamp: 3;
            /* 必须结合的属性，设置伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>

2.像素单位

px：像素；

%：百分比，相当于父元素宽的百分比；

vw：100vw整个视口宽度；

vh：100vh整个视口高度；

em：相对于父元素font-size而言；

rem：相对于html的font-size而言；

3.移动端单位

1.设置html整体的font-size（alt+s调整参数）

	/* 375是相对于iphone 6/7/8 而言 */
	<style> 
        html {
            font-size: calc(100vw*16/375);
        }
    </style>

2.所有布局单位均使用rem