超全HTML+CSS知识点详解

铁铁爱学习

已于 2024-04-18 09:30:52 修改

阅读量1.2k

点赞数 48

分类专栏：前端文章标签： html css 前端

于 2024-02-05 16:44:35 首次发布

本文链接：https://blog.csdn.net/ndywsnd/article/details/136044395

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.基础标签

双标签：
<html></html>	根标签
<head></head>	文档头部
<title></title>	文档标题
<body></body>	文档主体
标题标签：<h1></h1> ——<h6></h6>	一级标题到六级标题
<p></p>	段落标签
单标签:
<br />	换行

文本格式化标签：

<strong></strong>	加粗 or   <b></b>
<em></em>					倾斜 or   <i></i>
<del></del>				删除线 or <s></s>
<ins></ins>				下划线 or <u></u>

div与span: div没有语义，用来装内容，相当于一个盒子，独占一行；
而span可以跨距。
图像标签：

<img scr="图像url"       />
                    scr			图片路径
                    alt			替换文本
                    title		提示文本(鼠标放到图片上，显示的文字)
                    width		设置宽度
                    heigth	设置高度
                    border	边框粗细

路径：

相对路径(以图片位置为参考）:
- 同一级路径
- 下一级路径 /
- 上一级路径 …/
绝对路径：从电脑开始的路径或完整的网络地址。

举例：

相对路径：
<h4>同一级路径</h4>
    <img src="许嵩.jpeg"/>
    <h4>下一级路径</h4>
    <img src="image/八重神子.png"/>
    <h4>上一级路径</h4>
    <img src="../12.原神网页模仿制作/image/万叶.png" alt="">

绝对路径：
 <img src="https://i0.hdslb.com/bfs/banner/d8303a8911c53c42d1944
   fa338468b015b5c72c6.jpg@976w_550h_1c_!web-home-carousel-cover.webp"/>

超链接标签：（从一个页面到另一个页面）
1. --> _blank 新窗口
文本或图像 _self 当前窗口

2.链接分类

外部链接
内部链接
空链接
下载链接许嵩高清图片下载
网页元素链接
锚点链接快速定位到页面中的某个位置目标位置标签：
…
返回顶部：

注释和特殊字符：
注释快捷键 ctrl+/
空格 &nbsp
< &lt
> &gt

行内元素与块元素

**行内元素： **和其他元素都在一行上；宽度只与内容有关；行内元素只能容纳⽂本或者其他⾏内元素。不可以设置宽⾼，其宽度随着内容增加，⾼度随字体⼤⼩⽽改变。

<a ><strong><b><em><del><span ><img><input><select>

块元素： 总是在新⾏上开始，占据⼀整⾏；⾼度，⾏⾼以及外边距和内边距都可控制；宽带始终是与浏览器宽度⼀样，与内容⽆关；它可以容纳内联元素和其他块元素。

<h1>~<h6><p><div><ul><ol><li><div><dl>

行内块元素：

和相邻的行内元素（包含行内块）在一行上，它们直接会有空白缝隙
一行可以显示多个（行内元素特点）
默认宽度就是内容的宽度（行内元素特点）
高度、宽度、内外边距都可以自定义（块元素特点）

** 行内元素和块级元素的转换：**

//定义元素为块级元素
display：block
//定义元素为⾏内元素
display : inline
//定义元素为⾏内块元素
display：inline-block

2.表

1.表格

<table>表
  <th></th>表头单元格（居中加粗）
  <tr>行
    <td>单元格中的文字</td>单元格
  </tr>
</table>

表格结构标签：
<thead></thead>	表格头部
<tbody></tbody>	表格主体

表格属性：

属性	属性值	描述
align	left,center,right	对齐方式
border	1或"数字 "	有无边框
cellpadding	"数字 "	单元边沿与其内容之间的空白
cellspacing	"数字 "	单元格之间的空白
width	"数字 "	表格宽度
height	"数字 "	表格高度

表格的细线粗细：border-collapse:collapse; 合并相邻边框

举例：

<!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>
    <style>
        table {
            width: 300px;
            height:150px;
        }
        th,td {
            text-align: center;
            /* 相邻边框合并在一起 */
            border-collapse: collapse;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0">
      <thead>
        <tr>
            <th>姓名</th>
            <th>国籍</th>
            <th>神之眼</th>
            <th>人物故事</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>芭芭拉</td>
            <td>蒙德</td>
            <td>水</td>
            <td><a href="#">人物故事</a></td>
        </tr>
        <tr>
            <td>香菱</td>
            <td>璃月</td>
            <td>火</td>
            <td><a href="#">人物故事</a></td>
        </tr>
        <tr>
            <td>五郎</td>
            <td>稻妻</td>
            <td>岩</td>
            <td><a href="#">人物故事</a></td>
        </tr>
        <tr>
            <td>艾尔海森</td>
            <td>须弥</td>
            <td>草</td>
            <td><a href="#">人物故事</a></td>
        </tr>
      </tbody>
    </table>
</body>
</html>

效果如下：

合并单元格：
跨行合并：rowspan="个数” 在最上侧为目标单元格
跨列合并：colspan="个数” 在最左侧为目标单元格
举例：

 <table align="center" border="1" cellpadding="0" cellspacing="0"
    width="500" height="500">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td></td>
            <td rowspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

效果如下：

2.列表

1.无序列表
<ul>
  <li>列表项</li>
</ul>
注：<ul></ul>中只能放<li></li>标签
    <li></li>可以放任何标签

2.有序列表
<ol>
  <li>列表项</li>
</ol>

3.自定义列表
<dl>
  <dt>名词一</dt>
  <dd>名词一解释一</dd>
  <dd>名词一解释二</dd>
</dl>
注：<dl></dl>中只能放dt和dd

去掉li前面的小圆点：list-style：none。
3.表单
标签表示表单标签，定义整体的表单区域
标签表示表单元素的文字标注标签，定义文字标注
标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
type属性

type=“text” 定义单行文本输入框
type=“password” 定义密码输入框
type=“radio” 定义单选框
type=“checkbox” 定义复选框
type=“file” 定义上传文件
type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“button” 定义一个普通按钮
type=“reset” 定义重置按钮
type=“name” 定义名称

标签表示表单元素的多行文本输入框标签定义多行文本输入框
标签表示表单元素的下拉列表标签定义下拉列表
标签与标签配合，定义下拉列表中的选项
添加required表示必须填写此字段。
**pointer-events: none;**：禁用鼠标事件，使得用户不能与 ** ** 元素进行交互。
举例： ```html Document

原神登录界面

账号:
密码:
性别男女?
拥有角色八重神子可莉凝光
我同意用户隐私条例

请输入验证码
上传图片
``` 效果如下：
![image.png](https://img-blog.csdnimg.cn/img_convert/3a9e82f85763e9301c26603a53165400.png)
举例 ```css input:focus ~ label, input:valid ~ label { top: -5px; } ```
让我逐行解释这段 CSS 代码： ``` cssCopy code h1 { font-size: 2rem; color: #fff; text-align: center; } ``` 这段代码设置了 **

标签的样式： - font-size: 2rem;：设置字体大小为 2rem（相对于根元素的字体大小）。 - color: #fff;：设置文本颜色为白色。 - text-align: center;：设置文本居中对齐。 ``` cssCopy code .inputbox { position: relative; margin: 20px 0; max-width: 300px; border-bottom: 2px solid #fff; } ``` 这段代码设置了类名为 .inputbox 的输入框容器的样式： - position: relative;：设置容器的定位为相对定位，以便内部绝对定位的元素相对于此容器进行定位。 - margin: 20px 0;：设置上下外边距为 20px，左右外边距为 0。 - max-width: 300px;：设置容器的最大宽度为 300px。 - border-bottom: 2px solid #fff;：设置容器底部的边框为 2px 宽的白色实线。 ``` cssCopy code .inputbox label { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); color: #fff; font-size: 1rem; pointer-events: none; transition: all 0.5s ease-in-out; } ``` 这段代码设置了 .inputbox 容器内的元素的样式： - position: absolute;：设置元素的定位为绝对定位。 - top: 50%;：将元素的顶部与其包含块的顶部距离设置为 50%。 - left: 5px;：将元素的左侧与其包含块的左侧距离设置为 5px。 - transform: translateY(-50%);：通过 translateY() 转换将元素沿 Y 轴向上移动自身高度的一半，从而实现垂直居中对齐。 - color: #fff;：设置文本颜色为白色。 - font-size: 1rem;：设置字体大小为 1rem。 - pointer-events: none;：禁用鼠标事件，使得用户不能与元素进行交互。 - transition: all 0.5s ease-in-out;：设置样式变换过渡效果，持续时间为 0.5 秒，采用渐变缓动。 ``` cssCopy code input:focus ~ label, input:valid ~ label { top: -5px; } ``` 这段代码定义了当输入框获得焦点或者输入内容有效时，其相邻的元素的样式： - input:focus ~ label：选择与获得焦点的输入框相邻的元素。 - input:valid ~ label：选择与输入内容有效的输入框相邻的元素。 - top: -5px;：将元素相对于其包含块的顶部上移 5px，实现浮动标签效果。 ## 3.CSS样式规范 css 的作用 1. 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。 2. 控制页面布局, 比如: 设置浮动、定位等样式。 css 的基本语法**
在head标签中嵌入
hl: 选择器 {color:red; font-size:25px; 属性：值}

css的三种引入方式

行内式
内嵌式（内部样式）
外链式

我们主要说一下外链式：
将css代码写在一个单独的.css文件中，在标签中使用标签直接引入该文件到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

伪类和伪元素

**伪类：**为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。
状态伪类：

:link 应用于未被访问过的链接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。

结构性伪类：css3新增选择器

**伪元素：**创建一些不在文档树中的元素，并为其添加样式。

css 选择器的种类

1.标签选择器
标签名：{ } 所有的某一类标签
**2.类选择器：**可以单独或选择几个标签
<div class="red"类名>…
定义样式：
.red {
color: red;
}
多类名：

…

3.id选择器
#类名 { } 只能调用一次

4.通配符选择器：
*{ } 选取页面所有标签
5.层级选择器(后代选择器)
根据层级关系选择后代标签， 以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。
举例：

<style>
        ul li {
            color: red;
        }

        ul a {
            color: green;
        }

        .nav li a {
            color: rgb(39, 175, 21);
        }
    </style>


<body>
    <ul>
        <li>我是蒙德的</li>
        <li>我是蒙德的</li>
        <li>我是蒙德的</li>
        <li><a href="#">我是风起地的</a></li>

    </ul>
    <ol class="nav">
        <li>我是璃月的</li>
        <li>我是璃月的</li>
        <li>我是璃月的</li>
        <li><a href="#">我是轻策庄的的</a></li>
    </ol>
</body>

6.组选择器
根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。
示例代码

 <style>
        p,
        div,
        .xiong li {
            color: green;
        }
    </style>

<body>
    <p>万叶</p>
    <div>琴</div>
    <span>凝光</span>
    <ul class="xiong">
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
</body>

伪类选择器
用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

<style>
        a {
            text-decoration: none;
        }
        /* a:link 未访问的更改样式 */
       a:link {
        color: black;
       }
       /* 已访问过的 */
       a:visited {
        color: green;
       }
       /* 鼠标放上时更改样式 */
       a:hover {
        color: blue;
        font-size: 20px;
       }
      /* 鼠标正在按下，还没弹起*/
       a:active {
        color:black;
       }
     </style>
</head>
<body>
    <h2>选择要玩的游戏</h2>
    <a href="#">七圣召唤</a>
    <a href="#">深渊</a>
    <a href="#">刷圣遗物</a>
    <a href="#">刷圣遗物</a>
    <a href="#">刷圣遗物</a>
</body>

: focus 伪类选择器 选择获得光标的表单

 <style>
        input:focus {
            background-color: pink;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="button">
    <input type="text">
</body>

效果如下：

子选择器：

元素1（父）>元素2（子） { } 只能选择儿子标签

单位

**px ： ⼀个固定像素单位，⼀个像素表示终端屏幕能显示的最⼩的区域
% ：**元素的宽⾼可随浏览器的变化⽽变化，实现响应式，⼀般⼦元素的百分⽐相对于直接⽗元素
em ： 作为 font-size 的单位时，代表⽗元素的字体⼤⼩按⽐例计算值，作为其他属性单位时，代表相对⾃身字体⼤⼩按⽐例计算值
rem ： CSS3新增。相对于根元素字体⼤⼩按⽐例计算值；作⽤于根元素字体⼤⼩时，相对于其出初始字体⼤⼩（16px）
vw 相对于视图窗⼝宽度，视窗宽度为100vw
**vh **相对于视图窗⼝⾼度，视窗⾼度为100vh

4.CSS属性

字体属性

font-family: ‘宋体’; body { }
字体大小 font-size:20px; 默认16px;
字体粗细 font-weight:700; normal:400 不加粗; bold:700 加粗;
文本样式 font-size: normal 正常；italic 斜体；
字间距 letter-spacing:20px;

文本属性

文本颜色 div {color : red;} 十六进制 #FF0000 ; RGB代码 rgb(255,0,0);
对齐文本 text-align: left, center, right;
装饰文本 text-decoration: none, underline(下划线), overline, line-through(删除线)
文本缩进 text-indent: 20px; em 单位相对单位
行间距 p { line-height: 26px;}
justify-content: center;: 水平方向上将内部元素居中对齐。
justify-content: space-between;：在弹性盒子中，使子元素沿着主轴（水平方向）均匀分布，两端留有空白间距。
min-height: 100vh;: 设置body元素的最小高度为视口高度的100%，以确保内容始终填充整个屏幕。
align-items: center;：在交叉轴上居中对齐内容。

小技巧：单行文字垂直居中，让文字的行高=盒子的高度 line-height = height。

Emmet语法（快速生成HTML)

标签名+Tab键
生成多个标签 div*10+Tab
包含关系 ul>li Tab ul>li *3 Tab
兄弟关系 div + p Tab
带类名 .demo
带id #id名
.demo$*5 生成5个1~5 $是自增符号
div {…} *5
css缩写右键+格式化文键对齐
快速复制一行 shift +alt +下键

CSS元素显示模式（块，行内，行内块元素)

块元素：
特性：
- 独占一行
- 可以更改宽高
- 宽度默认和父级宽度一样高
- 可以放行内元素

<h1>~<h6><p><div><ul><ol><li><div><dl>

行内元素：特性：
- 一行显示多个span
- 高宽无法设置
- 只能容纳文本，不能放块

<a ><strong><b><em><del><span ><img><input><select>

行内块元素：

特性：

           -  有行有块
           - 可以控制高宽
           - 外边距，内边距

元素显示模式转换：（例如增加链接的触发范围）

行内元素——>块元素 display:bock;
块元素——>行内元素 display:inline;
行内块元素 display:inline-block;
举例：

<!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>
    <style>
        a {
            width: 200px;
            height: 200px;
            background-color:yellow;
            /* 行内元素转换为块元素 */
            display: block;
        }
        div {
            /* width: 200px;
            height: 200px; */
            background-color: gray;
            /* 块元素转化为行内元素 */
            display: inline;
        }
        span {
            color: red;
            background-color: lightsteelblue;
            height: 60px;
            width: 50px;
            /* 转换为行内块元素 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="#">原神</a>
    <div>巴巴托斯</div>
    <span>转换为行内块元素</span>
    <span>转换为行内块元素</span>
    <span>转换为行内块元素</span>
</body>
</html>

效果如下：

CSS背景

背景颜色：background-color:
背景图片：background-image:none/url(地址)
背景平铺：background-repeat:repeat/no-repeat/repeat-x/repeat-y;
背景图片位置：background-position:x,y;(方位名称：left,right,center,top,bottom)
背景图片固定：background-attachment: scroll(滚动)/fixed(固定)
背景色半透明：rgba(0,0,0,0.3)透明度
background-size: cover;: 设置背景图像按比例缩放以填充整个元素。
backdrop-filter: blur(55px);: 应用模糊滤镜效果，模糊程度为55像素。
background: transparent;：设置背景为透明。
线性渐变：语法：background: linear-gradient(direction, color-stop1, color-stop2, …);

CSS三大特性(层叠，继承，权重）

层叠性，样式冲突，就近原则
继承性，子标签可以继承父标签的属性
优先级（权重）,!important>style>ID选择器>类选择器>元素（标签）选择器>继承/*，指定的越明确（选择器的范围越小），权重越大。

可继承 字体属性⽂本属性元素可⻅性列表布局属性光标属性
不可继承 盒⼦模型属性 display 背景属性定位属性⽣成内容、轮廓样式、⻚⾯样式、声⾳样式
权重计算：

内联样式表的权值最⾼为 1000；
ID 选择器的权值为 100
Class 类选择器、属性选择器、伪类的权值为 10
HTML 元素选择器、伪元素的权值为 1
加有!important的权值最⼤，优先级最⾼

*{} 					/*通⽤选择器，权值为0 */
p{color:red;} /*标签，权值为1*/
p span{color:green;} /*两个标签，权值为1+1=2*/
p>span{color:purple;}/*权值与上⾯的相同，因此采取就近原则*/
a:hover{}						/*标签和伪类，权值为1+10=11*/
.warning{color:white;} /*类选择符，权值为10*/
p span .warning{color:purple;} /*权值为1+1+10=12*/
h1+a[rel=up]{}								/*标签和属性选择器，权值为1+10=11*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
p{color:red!important; } 				/*优先级最⾼*/

5.CSS盒子模型

边框 border:border-width粗细 / border-style样式 dashed实线 or dotted虚线 / border-color；复合写法：border：1px solid pink; 四条边：border-left/right/top/bottom；
表格的细线粗细：border-collapse:collapse; 合并相邻边框
内边距：padding：5px；上下左右都是5px；
外边距：块级盒子水平居中：margin：0 auto； margin 纵向重叠取重叠取最⼤值，不进⾏叠加
清除内外边距：* { padding：0； margin：0；}
圆角边框：border-radius：10px；圆的半径四个角分开写：border-top-left-radius：10px；
盒子阴影：
box-shadow：h-shadow水平阴影 / v-shadow垂直阴影 / blur模糊距离（虚，实）/
spread影子尺寸 / color / insert改为内阴影
box-sizing: border-box;确保元素的宽度和高度包括边框和内边距在内。

border: none;：移除边框。
outline: none;：移除轮廓样式。

默认盒⼦属性：box-sizing: content-box; width只包含内容宽度，不包含border和padding offsetWidth = (width + padding + border)，不算 margin
```
		<br />举例:
```

<!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>
    <style>
        div {
            width: 300px;
            height: 150px;
            margin: 200px auto;
            /* 阴影设置 h-shadow 水平阴影；v-shadow 垂直阴影; */
            /* blur 虚实；spread 阴影尺寸；color；inset 内阴影; */
            /* box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3); */
        }
        div img {
            width: 100%;
            height: 100%;
        }
        div:hover {
            box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);  
            width: 310px;
            height: 160px;
        }
    </style>
</head>
<body>
    <div>
       <img src="魈.png" alt="">
    </div>
</body>
</html>

效果如下：

文字阴影：text-shadow：h-shadow水平阴影 / v-shadow垂直阴影 / blur模糊距离（虚，实）/
color
text-shadow: 8px 8px 8px rgba(0,0,0,0.3);

6.浮动

让块级盒子排成一排，或者左右对齐。
语法：选择器 { float：属性（none不浮/left左浮/right/右浮）}
特性：

脱离标准流
不再保留标准位置
浮动盒子一行内显示并顶端对齐排列，父级宽度装不下，另起一行排列
具有行内块元素特性

清除浮动原因：

父级没宽度
子盒子浮动了
影响下面布局

清除浮动方法：

选择器 { clear：属性（left/right/both）}
父级： overflow：hidden/auto
给父级添加after伪元素，尾部添加空元素

d. 使用before和after双伪元素清除浮动

7.定位

定位=定位模式+边偏移

相对定位：选择器：{ position：relative； }
相对于原先位置移动，不脱标，保留原来位置。
left：20px；
top：20px;
绝对定位：选择器：{ position：absolute； }
不再占用原来位置，元素会整体脱离普通流，
没有父元素或父元素没有定位，则以浏览器为准定位；
祖先有定位，则以最近一级有定位的父级元素为准定位。
子绝父相：子元素绝对定位，父元素相对定位。
固定定位：选择器：{ position：fixed； }
以可视窗口为参照点固定元素，不占用原来位置，是特殊的绝对定位。
定位的叠放次序：选择器：{ z-index：1； }
数值越大，盒子越靠上，盒子越在表面；没有标准，后来者居上。
绝对定位的盒子居中：
left：50%; 移到中心右侧
margin-left：-100px；让盒子向有移动自身宽度的一半。
行内元素添加固定定位，可设置高度与宽度。
块级元素添加定位，不设宽高，默认内容大小。

8.元素的显示与隐藏

display属性：
display：none；隐藏后不在占用原来位置；
display：block；显示出来。
display: flex;: 将body元素的显示模式设置为弹性盒子，以便于内部元素的对齐和排列。
visibility属性：
visibility：visible；元素可视；
visibility：hidden；元素隐藏，继续占用原先位置。
overflow溢出：
overflow：visible；溢出显示
overflow：hidden；隐藏多余部分；
overflow：scroll；显示流动条；
overflow：auto；溢出时显示流动条，不溢出不显示。
鼠标经过盒子，盒子显示出来：.box：hover .a { display：block；}
opacity指定了一个元素的透明度，其默认值为1， **opacity: 0：**将元素的透明度设置为0，以此来实现元素的隐藏。元素在⻚⾯中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute：通过使⽤绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
transform: scale(0,0)：将元素缩放为0，来实现元素的隐藏。这种⽅法下，元素仍在⻚⾯中占据位置，但是不会响应绑定的监听事件。

举例：

<!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>
    <style>
        /* display:none/block  隐藏后不在占用原来位置*/
        /* visibility:visible/hidden 隐藏后继续占用原来位置*/
        /* 溢出overflow:visible/hidden 隐藏多余部分 */
        div {
            margin: 200px auto;
            width: 200px;
            height: 200px;
            background-color:antiquewhite;
            /* overflow: hidden; */
            /* overflow: scroll;显示滚动条 */
            /* overflow: auto;需要时显示滚动条 */
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>师资力量，是一所高校高校软硬件实力的具体体现，是一所高校综合实力的重要指标。教师数量的多少，在一定程度上可以看出其高校的办学规模、师资力量等。拥有的教师越多，说明其办学规模越大，学科发展越完善，师资力量也就越强。

        那么，对于我国综合实力较强的双一流高校而言，哪些高校的教师数量相对较多呢？哪些高校的办学规模越大呢？下面，我们就来看一看2022年教师数量排名，看一看你的学校有多少的教师。仅供考生和家长参考。</div>
</body>
</html>

效果如下：

9.CSS高级技巧

更改鼠标样式：

    <ul>
        <li style="cursor: default;">默认样式</li>
        <li style="cursor: pointer;">小手</li>
        <li style="cursor: move;">十字移动</li>
        <li style="cursor: text;">文本</li>
        <li style="cursor: not-allowed;">禁止</li>
    </ul>

表单轮廓线：outline：none；
防止拖拽文本域：resize：none；
文字与行内块元素对齐：

<style>
         img {
            width:400px;
            height: 250px;
            /* vertical-align: baseline;基线对齐 */
            /* vertical-align: top;顶部对齐 */
            /* vertical-align: bottom;底线对齐 */
            vertical-align: middle;
        }
        body {
            /* 居中对齐，图片底部没有空隙 */
            border: 2px solid red;
        }
    </style>

效果如下：

文本溢出显示省略：

div {
  /* width: 100px;
  /* 强制显示一行 */
  white-space: nowrap;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 溢出显示省略号 */
  text-overflow: ellipsis;
  /*  以上是单行省略 */
  /* display: -webkit-box;
  /* 控制第几行省略号 
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;*/ 
}

10.HTML5新特性

新增语义化标签

头部标签

导航
内容

定义文档某个区域

侧边栏

尾部
音频
<audio src=“爱情转移.mp3” controls=“controls”（音频界面）>
autoplay=“autoplay”（自动播放）/ loop=“loop”（循环播放）
视频

<!-- autoplay 自动播放   muted 静音
         loop 循环播放       poster 封面 -->
    <video src="云曦.mp4" autoplay="autoplay" 
    muted="muted" controls="controls"></video>

input类型

<ul>
        <li>邮箱：<input type="email"/></li>
        <li>网址：<input type="url"/></li>
        <li>日期：<input type="date"/></li>
        <li>时间：<input type="time"/></li>
        <li>月份：<input type="month"/></li>
        <li>周：<input type="week"/></li>
        <li>数字：<input type="number"/></li>
        <li>手机号码：<input type="tel"/></li>
        <li>搜索框：<input type="search"/></li>
        <li>颜色选择表单：<input type="color"/></li>
    </ul>

效果如下：

表单属性：

<form action="">
        <!-- required 内容不能为空  placeholder 提示文本
            autofocus 自动聚焦  multiple 选择多个文件-->
        <input type="text" required="required" placeholder="请填写" autofocus="autofocus">
        <input type="file" multiple="multiple">
        <input type="submit" value="提交">
    </form>

11.CSS3新增属性

CSS3新增属性选择器：

结构伪类：

结构伪类选择器主要根据文档结构来选择元素，常用于父级选择器里面的子元素

**nth-child( n )**选择某个父元素的一个或多个特定的子元素
· n可以是数字，关键字和公式
· n如果是数字，就是选择第n个子元素，里面数字从1开始…
· n可以是关键字：even(偶数)、odd(奇数)
n从0开始，往后+1。

伪元素选择器：
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }
        div::before {
            content: '我在前面 ';
        }
        div::after {
            content: ' 我在后面';
        }
    </style>
</head>
<body>
    <div>我在中间</div>
</body>
</html>

CSS3盒子模型
CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：
1.box-sizing: content-box盒子大小为width + padding + border (以前默认的)
2.box-sizing: border-box 盒子大小为width
如果盒子模型改为box-sizing: border-box，那padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）

图片变模糊：filter：blur(5px)；数值越大越模糊。
计算盒子宽度width: calc函数calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100%-80px);
cursor: pointer;：设置光标为手型，表示可点击。
CSS3过渡，从一个状态到另一个状态：
transition：属性花费时间运动曲线(ease)可省略何时开始(os)可省略
所有属性：all，几个属性加逗号隔开。
渐变线性渐变： linear-gradient（red, green, blue）；
径向渐变：radial-gradient（red, green, blue）
阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；

举例：

<style>
        div {
            width: 200px;
            height: 150px;
            background-color: crimson;
            /* transition: 属性 花费时间 运动曲线 何时开始; */
            transition:  background-color 2s, width 4s;
        }
        div:hover {
            background-color: rgb(18, 18, 108);
            width: 400px;
        }
    </style>

<!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>
    <style>
        .box1 {
            width: 300px;
            height: 30px;
            border: red solid;
        }
        .box2 {
            width: 100%;
            height: 100%;
            background-color: red;
            transition: height 3s;
        }
        .box1:hover .box2 {
            height: 0;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

12.flex布局

弹性布局。可以简便、完整、响应式地实现各种⻚⾯布局。为盒模型提供最⼤的灵活性。
⽗容器和⼦容器构成，通过主轴和交叉轴控制⼦容器排列布局，⼦元素float、clear和vertical-align属性失效
flex布局的作用

在父内容里面垂直居中一个块内容
使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度 / 高度可用
使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同

flex 布局内的容素将按照主轴 main axis 或交叉轴 cross axis 排列。

主轴方向flex-direction

**row **（默认）：从左到右 ltr ；从右到左 rtl
**row-reverse **：从右到左 ltr ；从左到右 rtl
column: 相同， row 但从上到下
column-reverse: 相同， row-reverse 但从下到上

换行flex-wrap

**nowrap **（默认）不换行
**wrap **一行放不下时换行
**wrap-reverse **弹性项目将从下到上换行成多行

项目群对齐 justify-content align-items
justify-content 决定子元素在主轴方向上的对齐方式，认是 flex-start：

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | 
    space-evenly | start | end | left | right ... + safe | unsafe;
}

align-items 决定子元素在交叉轴方向上的对齐方式，默认是 stretch

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline 
    | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

多行对齐 align-content
当容器内有多行时，align-content 定义多行的对齐方式

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | 
  space-evenly | stretch | start | end | baseline | first baseline 
  | last baseline + ... safe | unsafe;
}

间距 gap row-gap column-gap
设置容器内项目之间的间距，只控制项目与项目的间距，对项目与容器的间距不生效

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

flex子项

 section div:nth-child(1){
           //占1份
            flex: 1;
            width: 100px;
            height: 150px;
            background-color: blue;
        }
section div:nth-child(2){
            /* 剩余空间分成n分，都给2号孩子 */
            flex: 3;
            background-color: red;
        }
        section div:nth-child(3){
            flex: 1; //占1份
            width: 100px;
            height: 150px;
            background-color: rgb(159, 159, 184);
        }
        p {
            display: flex;
            width: 60%;
            height: 500px;
            background-color: beige;
            margin: 100px auto;
            /* 生成渐变色 top从上到下 两个从左上到右下*/
            background: -webkit-linear-gradient(left top,green,blue);
        }
        p span {
            /* 盒子分成三等份 */
            flex: 3;
            border: solid 1px white;
        }

13.CSS3 2D（transform）

**transform：translate（x，y）；
**translate不会影响其他盒子，百分比是相对于自身元素的。
rotate旋转：
**transform：rotate（度数）（45deg）
**默认正值顺时针转。
设置旋转中心点：transform-origin：x，y；默认是（50%，50%）or （center，center）or（50px，50px）
scale缩放
**transform：scale（1）1就是1倍，2就是2倍。
**优点：可以设置缩放的中心点：transform-origin：x，y；
同时多个转换：
transform：translate（）rotate（）scale（）…
位移在最前面

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        div img {
            width: 100%;
            height: 100%;
            transition: all 1s;
        }
        .genshen:hover img {
            transform: translate(200px,200px) rotate(360deg) scale(1.5);
        }


    </style>
</head>
<body>
    <div class="genshen">
        <img src="../12.原神网页模仿制作/upload/原神图标.webp" alt="">
    </div>
</body>
</html>

14.CSS动画

动画基本使用：先定义动画，在调用动画。

<style>
        div img {
            width: 800px;
            height: 500px;
            /* 调用动画 */
            animation-name: go;名称
            animation-duration: 3s;持续时间
        }
        /* 定义动画 */
        @keyframes go {
            /* 开始状态 */
            0% {
                transform: translateX(1000px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(0px);
            }
        }
    </style>

动画序列：改变任意多个样式的次数
中间的坐标值对应的是整个x,y轴上的坐标。

<style>
        div img {
            width: 800px;
            height: 500px;
            /* 调用动画 */
            animation-name: go;
            animation-duration: 6s;
        }
        /* 定义动画 */
        @keyframes go {
            /* 开始状态 */
            0% {
                transform: translateX(1000px);
            }
            25% {
                transform: translateX(0px);
            }
            50% {
                transform: rotate(90deg);
            }
            75% {
                transform: translateY(500px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(-500px);
            }
        }
    </style>

常见属性：

opacity：1；透明度0~1。
速度曲线：

/* steps()动画分几步走 */
animation: do 4s forwards steps(6);分多少步
                          linear	匀速；ease	低-高-低；ease-in 低开始；
                          ease-out 低结束；ease-in-out 低开始，低结束

<style>
        div img {
            width: 600px;
            height: 400px;
            /* 调用动画 */
            animation-name: go;
            animation-duration: 3s;
            /* 运动曲线 */
            animation-timing-function: ease（默认）;linear 匀速
            /* 延时 */
            animation-delay: 0s;
            /* 重复次数 infinite无限次*/
            animation-iteration-count: 100;
            /* 是否逆向播放 normal 不反向 ；alternate 反向播放 */
            animation-direction: alternate;
            /*running 运行；paused 暂停 */
            animation-play-state:running;
            /* 结束后，backwards 回到起始状态；forwards 停在结束状态 */
            /* animation-fill-mode: forwards; */
        }
        img:hover {
            /* running 运行；pause 停顿 */
            animation-play-state: paused;
        }
        /* 定义动画 */
        @keyframes go {
            /* 开始状态 */
            0% {
                transform: translate(0px,0px);
            }
            100% {
                transform: translate(1000px,0px);
            }
        }
    </style>

举例：小熊奔跑

<style>
        body {
            background-color: blue;
        }
        div {
            position: absolute;
            width: 137px;
            height: 70px;
            bottom: 10%;
            background: url(小熊.png) no-repeat;
            animation: run 0.5s forwards steps(8) infinite,move 2s forwards;
        }
        @keyframes run  {
            0%{
               background-position: 0 0;
            }
            100% {
                background-position: -1129px 0;
            }
        }
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>

效果如下：

15.3D转换

3D移动：translate3d(x,y,x)；分开写：translateX(100px)；
透视 perspective：200px（视距，越小越立体）透视写在被观察元素的父盒子里
3D旋转 rotate3d（x,y,z,deg)；
transform：rotateX（45deg）；
3D呈现transfrom-style
写给父元素，影响子元素。

<style>
        body {
            perspective: 500px;
        }
        .box {
            perspective: 500px;
            position: relative;
            width: 200px;
            height: 200px;
            margin: 200px auto;
            transition: all 1s;
            /* 让子元素保持3D环境 */
            transform-style: preserve-3d;
        }
        .box:hover {
            transform:rotateY(60deg);
        }
        .box div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color:chartreuse;
        }
        .box div:last-child {
            background-color: coral;
            transform: rotateX(60deg);
        }

backface-visibility: hidden; 隐藏背面

两面翻转案例：

<!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>
    <style>
       .box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        transition: all 1s;
        transform-style: preserve-3d;
       }
       .box:hover {
         transform: rotateY(180deg);
       }
       .front,
       .back {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 200px;
        border-radius: 50%;
        backface-visibility: hidden;
       }
      
     .front {
        background-color: blue;
      }
      .back {
        background-color: burlywood;
        transform: rotateY(180deg);
      }
    </style>
</head>
<body>
   <div class="box">
    <div class="front">我是枫原万叶</div>
    <div class="back">我是迪卢克</div>
   </div>
</body>
</html>

16.响应式布局

1.百分比布局
百分比是相对于包含块的计量单位，通过对属性设置百分比来适应不同的屏幕
包含块：

1. 有父元素相对于父元素
1. 无父元素相对于视口
1. 或者继承于父元素

2.rem布局
rem单位是相对于字体大小的html元素，也称为根元素。默认情况下，html元素的font-size为16px。所以此时1rem = 16px，当⻚⾯的size发⽣变化时，只需要改变 font-size 的值，那么以 rem 为固定单位的元素的⼤⼩也会发⽣响应的变化。
3.媒体查询@meda screen
通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。
但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 1rem;
            font-size: .5rem;
            background-color: rgb(71, 71, 40);
            color: crimson;
            text-align: center;
            line-height: 1rem;
        }

        @media screen and (min-width:500px) {
            body {

                background-color: blue;
            }

            html {
                font-size: 50px;
            }
        }

        @media screen and (min-width:1000px) {
            body {

                background-color: rgb(6, 6, 19);
            }

            html {
                font-size: 100px;
            }
        }
    </style>
    <!-- 引入资源 -->
    <link rel="stylesheet" href="网页1" media="screen and (min-width:500px)">
    <link rel="stylesheet" href="网页2" media="screen and (min-width:1000px)">
</head>

<body>
    <div>
        打击我发我属牛
    </div>
</body>

</html>

17.BFC(块级格式化上下文)

BFC是一个块级元素，块级元素在垂直方向上依次排列。
BFC是一个独立的容器，内部元素不会影响容器外部的元素。
属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。
计算BFC高度时，浮动元素也要参与计算。

如何创建BFC?
给父级元素添加以下任意样式

overflow: hidden;
display: flex;
display: inline-flex;
display: inline-block;
position: absolute;
position: fixed;

BFC有什么作用？

解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题。
解决子级元素外边距会使父级元素塌陷的问题。
清除浮动

18.多栏布局

两栏布局

两栏布局的核心是左栏固定宽度，右栏宽度自适应
方式一：
左栏浮动+固定宽度
右栏设置overflow:hidden(目的是产生bfc,不与左栏重叠)
方式二
父级设置flex布局
左栏固定宽度
右栏flex:1
方式三
父级相对定位
左栏绝对定位
右栏设置margin-left = =左栏宽度

圣杯布局—三列布局

三列布局的核心是左右两栏固定宽度,中间一栏宽度自适应
方式一
左栏左浮动固定宽度
右栏右浮动固定宽度
中间一栏设置左右偏移并且处于html结构的最后
方式二
左右栏绝对定位
中间一栏设置偏移
方式
flex 实现

<!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>LiuQing</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      display: flex;
    }

    .left {
      width: 300px;
      background-color: red;
      color: #fff;
      height: 100%;
    }

    .center {
      flex: 1;
      background-color: pink;
      color: #fff;
      height: 100%;
    }

    .right {
      width: 300px;
      height: 100%;
      background-color: blue;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</body>

</html>

铁铁爱学习

关注

48
点赞
踩
50

收藏

觉得还不错? 一键收藏
1
评论
超全HTML+CSS知识点详解

1.基础标签双标签：<html></html> 根标签<head></head> 文档头部<title></title> 文档标题<body></body> 文档主体标题标签：<h1></h1> ——<h6></h6> 一级标题到六级标题<p></p> 段落标签单标签:<br /> 换行文本格式化标签：&
复制链接

扫一扫

专栏目录