【前端】HTML+CSS 纯干货基础知识分享！

阳光穿透心脏的1/2处 2022-12-13 14:03 524阅读 0赞

### HTML+CSS 基础知识分享 ###

*  img标签
 *   *  img的alt和title属性区别
     *  img和background-image
 *  a标签
 *  基本的文本标签
 *  HTML5 音视频标签
 *  HTML5列表标签
 *  CSS选择器
 *  颜色样式
 *  文本样式
 *  水平垂直居中的方案
 *  盒子模型 > 响应式设计 > rem等单位
 *   *  标准盒模型和怪异盒模型（IE盒模型）
     *  弹性盒子
     *  响应式设计
     *  使用自适应布局的时候用rem，为什么可以实现自适应布局？
     *  px rem em vh vw 的区别
 *  HTML标签间区别
 *   *  块状标签、行内标签、行内块状标签的区别
 *  n个导航栏均分效果
 *  让元素隐藏，你可以怎么做？
 *  阴影效果
 *  圆角
 *  浮动
 *  定位
 *  背景相关样式
 *   *  Background-size: cover 和 contain的区别
 *  渐变效果
 *  表单项
 *  过渡transition、变形transfrom、动画animation
 *   *  过渡效果
     *  变形效果
     *  动画效果
 *  CSS实现一个div向右平移100px的动画
 *  非替换元素和替换元素的区别
 *  meta标签的作用，常用meta标签
 *  src与href的区别
 *  CSS中link和@import的区别
 *  CSS优化、提高性能的方法
 *  ::before和:after中双冒号和单冒号有什么区别?
 *  CSS选择器的优先级
 *  在学习过程中，发现的一些可以留意的问题

--------------------

最近忙着找工作，在这期间的复习过程中，为了方便查阅，总结了很多我常用到的基础内容和面试题。在这里分享给大家，大家也可以参考复习。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_center]

--------------------

# img标签 #

基础用法：`<img width="200" src="./img/1.gif" alt="松鼠">`  
![在这里插入图片描述][20201012094008718.png]

## img的alt和title属性区别 ##

alt属性是为了给不能看到图像的浏览者提供文字说明的。所以alt属性的本意是用于替换图像，而不是为图像提供额外说明的。而title是对图片的说明和额外补充，如果需要在鼠标经过图片时出现文字提示应该用属性title。

## img和background-image ##

最开始学习的时候，我觉得img是使用图片的最好方法，但是当遇到越来越多的需求的时候，我发现background-image的方式更应该被灵活运用，而且可以解决很多麻烦。

如果该图片是和文字在一行中或者一列中排列的，那么使用img是比较好的（从代码量上来看，性能方面未知）。因为用div设置背景，除去定位，一定要设置宽度高度，background-size和background-image。而对于img，除去定位，只需要设置宽度 / 高度 其中一项，图片就可以等比例缩放、放大。

（对于行内元素，只有在标签内写了一些内容，背景才会显示，而且无法设置背景相关信息。因此如果想把行内元素变成块元素，那不如直接用div设置）

比如：  
![在这里插入图片描述][2020101209524812.png]  
在这种用法里，外部容器div被我用红色背景显示。这个外部容器在这种情况下，可以不用设置height，除非项目中指定高度。那么这样一来，div的高度会被内容撑起。这里能设置的样式就很多了，比如文字和图片之间有间距，只需要设置margin；文字和图片使用居中方案；又或是修改图片大小并定位。

如果是把图片当作背景，确实是使用background会更好，因为外部容器div设置了背景，那么内部所有元素都只需要在这外部容器中操作。但是当然img也能当背景，只不过这些元素肯定是不能放在img标签内了，只能再另建一个容器，把内容放在img上，让img的z-index更小，那显然这种方式不利于维护。

也就是说，其实这两种在任何情况下都还算是可以转换使用的，但是使用background显然是可以设置更多属性的去解决很多问题的。

区别也还是有一些的：

如果图片事先知道尺寸大小，且想完整显示，那么就需要设置根标签的宽度、高度。如果不知道却依然坚持用background，要不就是自己手动调整宽度高度，要不就是用background-size: cover 图片多出的部分会删去，background-size: contain 标签中会出现空白的部分。那么用img就可以设置宽度 / 高度 任一属性，就可以在不知道尺寸大小的情况下，等比例缩放。

如果遇到CSS Sprites(css精灵图)，那么只能使用background。  
如果遇到能点击的图片，那么只能使用background。

比如：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]

--------------------

# a标签 #

a{ 
      text-decoration: none; /*超链接无下划线*/
    }
    a:hover{  /*鼠标移入效果*/
      color: red;
    }
    a:active{  /*鼠标选中效果*/
      color: green;
    }
    a:visited{  /*超链接已被访问过的效果*/
      color:purple;
    }

– href ：指向一个链接地址，这个地址可以是一个外部网站的地址，也可以写一个内部页面的地址。  
– target：设置打开目标页面的位置，可选值：\_blank新窗口、\_self当前窗口。

基础用法：

<a href="https://www.baidu.com" target="_block">去百度，新建页</a>
    <br><br>
    <a href="NewFile.html" target="_self">自身网页，当前页</a>
    <br><br>
    
    <a href="#bottom">去底部</a>
    <br><br>
    
    <a id="bottom" href="#">回到顶部</a>
    <br><br>
    
    <a href="javascript:;">这是一个新的超链接</a>

--------------------

# 基本的文本标签 #

< em >和< strong >  
em显示为斜体，而strong显示为粗体

< i >和< b >  
• i标签会使文字变成斜体。  
• b标签会使文字变成粗体。  
• 这两个标签和em和strong类似，但是这两个标签没有语义。

< sup >和< sub >  
sup和sub用于定义上标和下标。

< small >  
• small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。  
• 浏览器在显示small标签时会显示一个比父元素小的字号。

比如：

--------------------

# HTML5 音视频标签 #

详细内容：[音视频标签详细讲解][Link 1]

基础用法：

`<video>`:Html5提供的播放视频的标签。  
标签的属性：  
src:要嵌到页面的视频的URL  
controls:显示或隐藏用户控制界面  
width :视频显示区域的宽度，单位是CSS像素  
height :视频展示区域的高度，单位是CSS像素  
poster :一个海报帧的URL，用于在用户播放或者跳帧之前展示  
autoplay : 媒体是否自动播放  
loop : 媒体是否循环播放  
muted : 是否静音  
preload : 该属性旨在告诉浏览器，作者认为达到最佳的用户体验的方式是什么  
none: 提示，作者认为用户不需要查看该视频，服务器也想要最小化访问流量； 换句话说就是提示浏览器该视频不需要缓存。  
metadata: 提示，尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。  
auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。  
空字符串：也就代指 auto 值。

`<audio>`:Html5提供的播放音频的标签。  
标签的属性：  
src:要嵌到页面的音频的URL  
controls:显示或隐藏用户控制界面  
autoplay: 媒体是否自动播放  
loop : 媒体是否循环播放  
muted : 是否静音  
preload : 该属性旨在告诉浏览器，作者认为达到最佳的用户体验的方式是什么

音视频在JS中可以使用到的属性  
duration : 媒体总时间(只读)  
currentTime : 开始播放到现在所用的时间(可读写)  
muted : 是否静音(可读写,相比于volume优先级要高)  
volume : 0.0-1.0的音量相对值(可读写)  
paused : 媒体是否暂停(只读)  
ended : 媒体是否播放完毕(只读)  
error : 媒体发生错误的时候，返回错误代码 (只读)  
currentSrc : 以字符串的形式返回媒体地址(只读)  
以上为音视频都有的属性，以下为视频独有的部分属性:  
poster : 视频播放前的预览图片(读写)  
width、height : 设置视频的尺寸(读写)  
videoWidth、 videoHeight : 视频的实际尺寸(只读)

使用方法：

音视频在JS中使用到的函数  
play() : 媒体播放  
pause() : 媒体暂停  
load() : 重新加载媒体

window.onload=function(){ 
      var video = document.querySelector("video");
      var audio = document.querySelector("audio");
    
      video.play();
      audio.play();
    
      setTimeout(function(){ 
        video.pause();
        audio.pause();
      },5000)
    }

--------------------

# HTML5列表标签 #

datalist:会包含一组option元素，这些元素表示其表单控件的可选值。它的id必须要和input中的list一致。

<input type="text" placeholder="你最喜欢的女明星是？" list="zdy"></input>
    <datalist id="zdy">
      <option value="1">10岁的周冬雨</option>
      <option value="2">20岁的周冬雨</option>
      <option value="3">30岁的周冬雨</option>
    </datalist>

修改颜色：

input::-webkit-input-placeholder{ 
      color: pink;
    }

--------------------

# CSS选择器 #

元素选择器：`标签名 { }`

类选择器：`.className { }`

ID选择器：`#id { }`

复合选择器：  
可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。  
• 语法：`选择器1选择器2{}`  
• 例如`div.box1`会选中页面中具有box1这个class的div元素。

群组选择器：  
可以同时使用多个选择器，多个选择器将被同时应用指定的样式。  
• 语法：`选择器1,选择器2,选择器3 { }`  
• 比如`p,.hello,#box`会同时选中p元素，class为hello的元素，id为box的元素。

后代选择器：  
可以根据标签的关系，为处在元素内部的代元素设置样式。  
• 语法：`祖先元素 后代元素 后代元素 { }`

个人常犯问题：后代选择器和复合选择器区分不清。  
注意，复合选择器中间没有空格，它代表着符合所有要求的元素；  
而后代选择器中间有空格，它代表着寻找符合要求的后代元素

子元素选择器：  
可以给另一个元素的子元素设置样式。  
• 语法：`父元素 > 子元素{}`  
• 比如`body > h1`将选择body子标签中的所有h1标签。

兄弟选择器：  
• 语法:  
– 查找后边一个兄弟元素 `兄弟元素 + 兄弟元素{}`  
– 查找后边所有的兄弟元素 `兄弟元素 ~ 兄弟元素{}`

其他子元素选择器：  
`:first-child`选择第一个子标签  
`:last-child`选择最后一个子标签  
`:nth-child`选择指定位置的子元素

ul > li:first-child{ 
      color: red;
    }
    
    ul > li:last-child{ 
      color: red;
    }
    
    ul > li:nth-child(2n+1){ 
      color: red;
    }

--------------------

# 颜色样式 #

便捷查看颜色RGB方法：QQ截图，上面首先显示的是RGB颜色。按下Ctrl就会出现\#颜色

HSL值 HSLA值：  
H 色相(0 - 360)  
S 饱和度，颜色的浓度 0% - 100%  
L 亮度，颜色的亮度 0% - 100%  
A 透明度，一个0-1之间的值。0表示完全透明，1表示完全不透明，.5半透明 。

RGBA：  
RGBA表示一个颜色，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明，1表示完全不透明，.5半透明 。

基础用法：

background-color: red;
    background-color: rgb(255,255,255);
    background-color: #ffff00;
    background-color: #ff0;
    background-color: rgba(106,153,85,.5);
    background-color: hsla(98, 48%, 40%, 0.658);

--------------------

# 文本样式 #

指定大小：`font-size`  
指定斜体：`font-style:italic`  
指定粗体：`font-weight:bold`  
指定字体：`font-family:Arial , Helvetica , sans-serif`  
浏览器会优先使用第一个，如果没有找到则使用第二个  
![在这里插入图片描述][20201012102436803.png]

设置行高：`line-height`  
所有字母大写：`text-transform:uppercase`  
所有字母小写：`text-tansform:lowercase`  
所有单词首字母大写：`text-transform:capitalize`

`text-decoration`属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。  
![在这里插入图片描述][20201012100054905.png]  
![在这里插入图片描述][20201012100130563.png]

`text-align`用于设置文本的对齐方式。  
• 可选值：  
– left：左对齐  
– right：右对齐  
– justify：两边对齐  
– center：居中对齐

`vertical-align` 设置元素垂直对齐的方式  
• 可选值：  
\-baseline 默认值 基线对齐  
\-top 顶部对齐  
\-bottom 底部对齐  
\-middle 居中对齐

--------------------

# 水平垂直居中的方案 #

推荐方法：

display: flex;
    justify-content: center;
    align-items: center;

其他法：  
一、  
父元素开启相对定位，需要水平垂直居中的子元素开启绝对定位，让它的top和left为50%，然后margin-top和margin-left再往回减子元素宽高的一半即可；

该方法的缺点很明显，即一定要知道具体的宽高，才能设置。

二、  
父元素开启相对定位，需要水平垂直居中的子元素开启绝对定位，让它的top，left，buttom，right四方向全设为0，然后margin:auto即可；

该方法与方法一相比虽然在计算时没涉及到宽和高，但是在子元素中一定要设置宽高才行，否则margin:auto无法生效。

三、  
父元素开启相对定位，需要水平垂直居中的子元素开启绝对定位，让它的top和left为50%，然后transform设为translate(-50%,-50%)即可；

该方法与前两种方法相比，就可以完全不需要涉及宽高，唯一的缺点就是兼容性不好。

四、虽然推荐方法也有不兼容问题，但是我通常会选用这种方法。

--------------------

# 盒子模型 > 响应式设计 > rem等单位 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]  
（margin同理）  
padding:10px 20px 30px 40px  
– 这样会设置元素的上、右、下、左四个方向的内边距  
padding:10px 20px 30px;  
– 分别指定上、左右、下四个方向的内边距  
padding:10px 20px;  
– 分别指定上下、左右四个方向的内边距  
padding:10px;  
– 同时指定上左右下四个方向的内边距

## 标准盒模型和怪异盒模型（IE盒模型） ##

box-sizing：  
content-box 默认值，标准盒模型；  
border-box怪异盒模型。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]  
在标准盒模型下，width和height是内容区域即content的width和height。  
而盒子总宽度 = width + margin(左右) + padding(左右) + border(左右)

而怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border。即盒子的总宽度为 = width + margin(左右)

在我看来，我们本应该遵循w3c标准使用标准盒模型，但后来经过不断地使用和思考，就可以发现怪异盒模型也有它的优势所在：如果我们使用标准盒模型设置width和height，调整好了一切参数后，一旦需要我们修改其中的参数，比如调整border，那么盒子模型的位置也就必然出现偏移，即：每次修改border、padding后，你都需要手动修改width和height的值。在css3中就允许我们使用怪异盒模型，这次我们设置width和height，那么盒子大小就是这个值，不管我们怎么调border、padding，它会通过自动缩放内容，来帮我们保证这个width和height值不变。

那如果把这个问题放到移动端，在移动端因为各种问题，一定需要自适应布局，这就需要用到大量的百分数。这时候如果用标准盒模型，可想而知，做加上边框等操作，一定会使情况变得复杂，对自适应布局很不友好。所以这也许就是很多框架使用怪异盒模型的原因吧。

## 弹性盒子 ##

Flex意为”弹性布局”，采用Flex布局的元素，称为Flex容器，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目，简称”项目”。

容器默认存在两根轴：水平的主轴和垂直的交叉轴。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]  
更多详细Flex布局参考内容：[布局神器Flex][Flex]

## 响应式设计 ##

页面的设计和开发应当根据用户行为以及设备环境进行相应的响应和调整，比如：能够自动切换分辨率、图片尺寸及相关脚本功能等。换句话说，页面应该有能力去自动响应用户的设备环境。

响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport：

然后使用css媒体查询去设置页面中根元素的font-size属性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 5]

## 使用自适应布局的时候用rem，为什么可以实现自适应布局？ ##

rem是CSS3新增的一个相对单位，它相对的是HTML根元素。通过这种方式就可以做到只修改根元素就可以成比例地调整所有字体大小。这样就可以根据不同的手机端（终端）作出合适调整，从而不影响布局。即：1rem等于html根元素设定的font-size的px值。如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

## px rem em vh vw 的区别 ##

px：像素。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em：相对长度单位。em相对于当前对象内文本的字体尺寸。如果未设置，则相对于浏览器的默认字体尺寸。

rem是CSS3新增的一个相对单位，它相对的是HTML根元素。

vh和vw是相对于视口的高度和宽度  
1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度

--------------------

# HTML标签间区别 #

什么是标签语义化

合理的标签干合理的事情。

这样做会有以下好处：  
有利于搜索引擎的建立索引、抓取。  
有利于不同设备的解析。  
有利于构建清晰的结构，有利于团队的开发和维护

都有哪些标签

块状标签：`<div> <p> <nav> <h1~h6> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <footer> <header> <main> <section> <artical>…`

行内标签：`<a> <i> <span> <em> <u> <br> <strong>…`

行内块状标签：`<input> <img> <label> <textarea> <select> <option>…`

## 块状标签、行内标签、行内块状标签的区别 ##

块状标签：能独自占据一行，可以对其设置宽度、高度、对齐等属性。它可以容纳行内标签和其他块状标签。但是 p,h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

行内标签：不能独自占据一行，默认在一行中排列，不能对其设置宽度、高度、对齐等属性，仅仅靠自身的字体大小和图像尺寸来支撑结构。行内元素只能容纳文本或其他行内元素。（a特殊: a标签可以放div块级标签）

行内块状标签：和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。默认宽度就是它本身内容的宽度。高度，行高、外边距以及内边距都可以控制。

上述三类标签怎么转换

(1)display:inline;转换为行内元素  
(2)display:block;转换为块状元素  
(3)display:inline-block;转换为行内块状元素

display中还有哪些值

display:none  
display:flex  
display:table

--------------------

# n个导航栏均分效果 #

按照如下实现后，li就可以在整个ul设计的区域中，平均分配，各自占据部分空间。

父类容器必有样式：

ul{ 
    display: table;
    table-layout: fixed;
    }

子类容器必有样式：

ul li{ 
    display: table-cell;
    /*居中*/
    line-height: ？px;
    text-align: center;
    }

--------------------

# 让元素隐藏，你可以怎么做？ #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener]  
过滤元素filter也可使用opacity值设置透明度，不过filter现在的兼容性不好，只支持webkit内核。opacity是用来设置元素透明度的，但当设置成0的时候也就相当于隐藏元素了。因此，元素依然存在原来的位置，占据空间也可响应事件。换句话说，元素的行为就和它们不透明时一致。  
![在这里插入图片描述][20201012110718902.png_pic_cener]  
假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互）。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，又能让元素保持可以操作。  
![在这里插入图片描述][20201012110744684.png_pic_cnter]

--------------------

# 阴影效果 #

`box-shadow`用来设置元素的阴影效果，阴影不会影响页面布局

第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动  
第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动  
第三个值 阴影的模糊半径  
第四个值 阴影的颜色

基础用法：

box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;

--------------------

# 圆角 #

`border-radius`: 用来设置圆角

`border-radius` 可以分别指定四个角的圆角  
四个值 左上 右上 右下 左下  
三个值 左上 右上/左下 右下  
两个值 左上/右下 右上/左下

可以选择具体的方向：  
border-top-left-radius  
border-top-right-radius  
border-bottom-left-radius  
border-bottom-right-radius

基础用法：

/* 将元素设置为一个圆形 */
    border-radius: 50%;
    /* 给元素添加圆角 */
    border-radius: 10px;

--------------------

# 浮动 #

浮动（float）使元素脱离原来的文本流，在父元素中浮动起来。  
• 可选值：  
– none：不浮动  
– left：向左浮动  
– right：向右浮动

• 块级元素和行内元素都可以浮动。当一个行内元素浮动以后将会自动变为一个块级元素，即使设置display:inline以后其依然是个块元素。

• 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。

• 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕在元素的周围。

• 浮动会使元素完全脱离文本流，也就是不再在文档中占用位置。

• 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素。

• 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。

解决高度塌陷的问题  
![在这里插入图片描述][20201012111229769.png_pic_cener]  
子元素使用浮动，父元素会因为子元素的浮动而导致高度的丢失。这时在父元素中，overflow:hidden，即可解决问题。

兄弟元素之间，如果在前的元素使用了浮动，显然在后面的兄弟元素会受到浮动的影响，位置发生改变。如果不想改变，clear:both，即可解决问题。

![在这里插入图片描述][20201012111333159.png_pic_ceter]  
BFC

overflow: hidden可以解决高度塌陷问题，是因为它触发了BFC机制。  
BFC:块级格式化上下文，创建了BFC的元素就是一个独立的盒子，且这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。计算BFC的高度时，浮动元素也参与计算，从而避免了高度塌陷问题。

--------------------

# 定位 #

`position`可选值：

relative 开启元素的相对定位  
absolute 开启元素的绝对定位  
fixed 开启元素的固定定位  
sticky 开启元素的粘滞定位

固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。

粘滞定位的元素的可以在元素到达某个位置时将其固定。

--------------------

# 背景相关样式 #

`background-color`属性用来为元素设置背景颜色

`background-image`可以为元素指定背景图片

background-image: url("./img/1.gif");

`background-repeat`用于控制背景图片的重复方式。  
可选值：  
– repeat：默认值，图片左右上下平铺  
– no-repeat：只显示图片一次，不会平铺  
– repeat-x：沿x轴水平平铺一张图片  
– repeat-y：沿y轴水平平铺一张图片

`background-position`用来精确控制背景图片在元素中的位置。  
可选值：  
– 关键字：top right bottom left center  
– 百分比  
– 数值

background-position: center; 
    background-position: -50px 300px;

`background-attachment`用来设置背景图片是否随页面滚动。  
可选值：  
– scroll：随页面滚动  
– fixed：不随页面滚动

## Background-size: cover 和 contain的区别 ##

1.  在no-repeat情况下，如果容器宽高比与图片宽高比不同，  
    cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；  
    contain:图片宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；
2.  在repeat情况下：cover:与上述相同；contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。

--------------------

# 渐变效果 #

线性渐变，颜色沿着一条直线发生变化。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 1]

background-image: repeating-linear-gradient(to right ,red, yellow 50px);
    background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px);
    background-image: linear-gradient(red,yellow,#bfa,orange);

径向渐变(放射性的效果)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter]

background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)

H5中更高级的canvas用法：[更多h5新增canvas的用法（1）][h5_canvas_1]、[新增canvas的用法（2）][canvas_2]

--------------------

# 表单项 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 1]  
• `input`可以根据不同的type属性呈现不同的状态。  
• 可选值：  
– text：文本框  
– password：密码框  
– submit：提交按钮  
– radio：单选按钮  
– checkbox：多选框  
– reset ：重置按钮

• `select`用于创建一个下拉列表。  
• `option`表示下拉列表中的列表项。

• `textarea`用来创建一个文本域，实际效果和文本框类似，只是可以输入多行数据。  
• 可用属性：  
– cols：文本域的列数  
– rows：文本域的行数

`placeholder`:设置文本框中默认的内容，且内容并不是实际存在的  
修改它的样式：

input::-webkit-input-placeholder{ 
      color:#0F0;
    }

`value`：设置文本框中默认的内容，且内容是实际存在的

作者想说的话：对于html中的表单项部分，在我最开始学习的时候，并不知道之后还会遇到更好用的ElementUI（之后在Vue的文章中会说到），或者使用其他的一些UI组件库，当然这些UI库肯定也是对这部分最基础表单项的扩展。所以在最开始学习的时候为了修改这些基本表单项的样式也是费了很多的时间。不过之后通过学习就发现了，完全不需要拘泥于对它们的样式设计，使用这些UI库并对其修改样式将轻松的多。

--------------------

# 过渡transition、变形transfrom、动画animation #

## 过渡效果 ##

过渡可以指定一个属性发生变化时的切换方式。

`transition-property` 指定要执行过渡的属性。多个属性间使用,隔开（遇事不决用all）  
大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡。

transition-property: height , width; 
    transition-property: all;

`transition-duration`: 指定过渡效果的持续时间（设置单位：s / ms）

transition-duration: 2s;

`transition-delay`: 过渡效果的延迟，等待一段时间后在执行过渡 。

transition-delay: 2s;

`transition-timing-function`: 过渡的时序函数，指定过渡的执行的方式  
可选值：  
ease 默认值，慢速开始，先加速，再减速  
linear 匀速运动  
ease-in 加速运动  
ease-out 减速运动  
ease-in-out 先加速 后减速  
cubic-bezier() 来指定时序函数 ：[时序函数实现网站][Link 2]  
steps() 分步执行过渡效果  
可以设置一个第二个值：  
end ， 在时间结束时执行过渡(默认值)  
start ， 在时间开始时执行过渡

transition-timing-function: cubic-bezier(.24,.95,.82,-0.88);
    transition-timing-function: steps(2, start);

过渡的具体使用方法：

.test2{ 
      width: 100px;
      height: 100px;
      background-color: greenyellow;
      transition-property: all;
      transition-duration: 2s;
      transition-delay: 1s;
      transition-timing-function: cubic-bezier(.24,.95,.82,-0.88);
    }
    .test2:hover{ 
      margin-left: 100px;
      transform: rotateX(180deg);
    }

对于过渡效果，一定需要设计“触发条件”才行，比如hover效果。因为显然的是，我们需要指定过渡效果运动的路线，而transition的用法显然没有涉及到路线的规划。

除此以外，transition效果最好是和hover搭配在一起，只有这样它才会有一个返程的效果。也就是说，我们把鼠标移入元素，元素就会根据过渡效果移动，到达位置后我们把鼠标移开，它就会根据过渡效果回到起点。

而如果我们想实现的是，点击按钮它就根据过渡效果移动，那么绑定事件后肯定能办到，但是没办法直接让元素返程（当然可以自己去设计，但是肯定比其他方法繁琐一些。比如用一个数据记录点击按钮次数，就可以根据次数设计移动路径）。

再如果，在接触到vue后就会出现另一个需求，点击按钮后元素根据设计的效果缓慢出现，这时候过渡效果是无法实现该功能的。（后续在Vue中就会介绍更好用的transition标签）

## 变形效果 ##

transform 用来设置元素的变形效果。变形不会影响到页面的布局

*  可选值：  
    translateX() 沿着x轴方向平移  
    translateY() 沿着y轴方向平移  
    translateZ() 沿着z轴方向平移  
    rotateX() 沿着x轴方向旋转  
    rotateY() 沿着y轴方向旋转  
    rotateZ() 沿着z轴方向旋转  
    scaleX() 水平方向缩放  
    scaleY() 垂直方向缩放  
    scale() 双方向的缩放

transform: translateZ(400px) rotateY(180deg) ;
    transform: rotateZ(.25turn);
    transform: scale(2)

## 动画效果 ##

设置动画效果，必须先要设置一个关键帧@keyframes，关键帧设置了动画执行每一个步骤。

`animation-name`: 要对当前元素生效的关键帧的名字

animation-name: test;

`animation-duration`: 动画的执行时间

animation-duration: 2s;

`animation-delay`： 动画的延时

animation-delay: 1s;

`animation-timing-function`：过渡的时序函数，指定过渡的执行的方式  
可选值：  
ease 默认值，慢速开始，先加速，再减速  
linear 匀速运动  
ease-in 加速运动  
ease-out 减速运动  
ease-in-out 先加速 后减速

`animation-iteration-count` 动画执行的次数  
可选值：  
次数  
infinite 无限执行

animation-iteration-count: 3;

`animation-direction`：指定动画运行的方向  
可选值：  
normal 默认值 从 from 向 to运行 每次都是这样  
reverse 从 to 向 from 运行 每次都是这样  
alternate 从 from 向 to运行 重复执行动画时反向执行  
alternate-reverse 从 to 向 from运行 重复执行动画时反向执行

animation-direction: alternate;

`animation-play-state`: 设置动画的执行状态  
可选值：  
running 默认值 动画执行  
paused 动画暂停

animation-play-state: paused;

`animation-fill-mode`: 动画的填充模式  
可选值：  
none 默认值 动画执行完毕元素回到原来位置  
forwards 动画执行完毕元素会停止在动画结束的位置  
backwards 动画延时等待时，元素就会处于开始位置  
both 结合了forwards 和 backwards

animation-fill-mode: forwards;

Css样式：实现了hover效果

.test2{ 
      width: 100px;
      height: 100px;
      background-image: linear-gradient(red,yellow,#bfa,orange);
      animation-name: test;
      animation-duration: 2s;
      animation-delay: 1s;
      animation-iteration-count: 3;
      animation-direction: alternate;
      animation-fill-mode: forwards;
      animation-play-state: paused;
    }
    .test2:hover{ 
      animation-play-state: running;
    }
    @keyframes test { 
      /* from表示动画的开始位置 也可以使用 0% */
      from{ 
        margin-left: 0;
      }
      /* to动画的结束位置 也可以使用100%*/
      to{ 
        margin-left: 100px;
      }
    }

个人遇到的问题：过渡、变形、动画三者的使用和区别

过渡效果的出现是需要条件的，也就是说一定需要触发，比如hover的方式，它不会自动触发，就相当于过渡效果就如同它的名字一样，提供的只是触发之后，变到另一种样式的，这个过程中间的效果。

但是变形和动画都是可以不需要触发就可以实现效果的，也就是说如果不把变形和动画效果放在hover里或者是其他方式去触发，它可以去自动触发，只不过如果我们不设置过渡效果，它就不会出现过渡，就会直接出现那个效果。

比如：  
（1） 过渡效果和普通样式的结合使用。那么我们知道过渡效果是不会自己触发的，那么一定需要设置hover。再把普通样式放入hover中。比如在hover中设置margin-left，那么在你触发的时候，就会实现这个过渡效果。

（2） 过渡效果和变形效果的结合使用。首先我们知道变形效果是可以不用触发的，可以直接写在样式中的。但是直接写在样式中是没有过渡效果的。如果需要看到过渡效果，就可以用hover触发。把变形效果写在hover中。当触发的时候，就会实现这个过渡效果。

（3） 而动画是不需要结合使用的，它通常自己就能够实现效果，而且不需要触发就可以实现。动画效果和过渡效果到底有什么不同呢？其实从目前来看区别已经很明显了，因为过渡是一定需要手动触发的，那么这么一来问题就出现了，过渡是需要条件的，比如鼠标放在div中才会实现，这就很麻烦。而动画效果是可以自己设置动画循环次数等其他更复杂的操作，同时可以手动触发，也可以自动触发。因此从目前来看，动画效果的用处要大于过渡效果。

（4） 在使用动画效果的时候，一定要设置一个关键帧@keyframes。这个关键帧的作用就相当于之前hover的作用，之前是把过渡后的效果放在hover中，同时hover是鼠标触碰触发。而这个关键帧中存放的不仅仅是过渡后的效果，还需要设置起始的效果（from和to），也就是这个关键帧中存放的就是本次动画效果移动的“路线”。而动画效果为什么会自动触发，是因为动画效果中有一个属性，animation-play-state，这个属性默认是running，即自动运行。如果需要实现hover触发效果，就可以在样式中设置为pause，然后在hover中设置为running，就可以实现hover的动画效果了。

--------------------

# CSS实现一个div向右平移100px的动画 #

/*方法一：过渡效果*/
    #test{ 
      width: 200px;
      height: 200px;
      background-color: red;
      transition-property: all;
      transition-duration: 2s;
      transition-delay: 1s;
      transition-timing-function: cubic-bezier(.24,.95,.82,-0.88);
    }
    #test:hover{ 
      transform: translateX(100px);
    }
    
    /*方法二：动画效果*/
    #test{ 
      width: 200px;
      height: 200px;
      background-color: red;
      animation-name: test;
      animation-duration: 2s;
      animation-delay: 1s;
      animation-iteration-count: 3;
      animation-direction: alternate;
      animation-fill-mode: forwards;
      animation-play-state: paused;
    
    }
    #test:hover{ 
      animation-play-state: running;
    }
    @keyframes test { 
      from{ 
        margin-left: 0;
      }
      to{ 
        margin-left: 100px;
      }
    }

--------------------

# 非替换元素和替换元素的区别 #

替换元素：就是浏览器根据其标签的元素属性来判断显示具体的内容的元素，且元素一般拥有固定的尺寸。比如：img标签，浏览器根据src来显示内容； input标签，浏览器根据type值选择显示输入框还是选择框或者其他类型。

非替换元素：就是直接将内容告诉浏览器，直接显示出来。例如：p标签，浏览器会直接显示p标签里的内容。

--------------------

# meta标签的作用，常用meta标签 #

`<meta>` 标签提供关于HTML文档的元数据。它不会显示在页面上，可用于告诉机器该如何解析这个页面。

meta标签里可以实现很多功能：  
`<meta http-equiv="参数" content="具体的参数值">`  
定义页面使用语言（charset），自动刷新并指向新的页面（refresh），实现网页转换时的动态效果（page-enter，page-exit），控制页面缓冲（set-cookie）。

`<meta name="参数" content="具体的参数值">`  
keywords用来告诉搜索引擎你网页的关键字是什么，description用来告诉搜索引擎你的网站主要内容。

更多具体的使用方法：[meta标签的作用及使用方法][meta]、[常用meta标签总结][meta 1]

--------------------

# src与href的区别 #

区别: src 用于替代这个元素,而href用于建立这个标签与外部资源之间的关系。

`<link href-="style.css" rel="stylesheet"/>`浏览器加载到这里的时候，html 的渲染和解析不会暂停，css文件的加载是同时进行的

`<script src="script.js"></script>`当浏览器解析到这句代码时，页面的加载和解析都会暂停直到浏览器拿到并执行完这个js文件

--------------------

# CSS中link和@import的区别 #

link属于XHTML标签，@import完全是CSS提供的一种方式，只能加载CSS。当一个页面被加载的时候, link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。除此以外，@import是CSS2.1提出的，所以老的浏览器不支持，而link标签无此问题。

--------------------

# CSS优化、提高性能的方法 #

1、 移除空的css 规则  
2、 避免使用复杂的选择器，层级越少越好  
3、 提取公共样式，减少代码量  
4、 不使用@import  
5、 将样式写在单独的css文件里，在head元素中引用  
6、 尽量减少页面重排、重绘  
7、 遵守盒模型规则  
8、 不滥用浮动、web 字体  
9、 不声明过多的font-size

--------------------

# ::before和:after中双冒号和单冒号有什么区别? #

首先需要说，在CSS中伪类一直用单冒号表示，而伪元素在CSS3之前也是用单冒号，现在为了区分伪元素和伪类，开始使用双冒号表示。如果为了兼容各浏览器，现在依然可以使用单冒号来表示伪元素。

before和after的主要作用是在元素内容前后加上指定内容。

详细使用：[before和after的使用][before_after]

--------------------

# CSS选择器的优先级 #

!important > 内联样式 > ID选择器 > 类选择器 = 伪类选择器 > 元素选择器 = 伪元素选择器 > 通配符选择器

更多内容：[CSS选择器优先级][CSS]

--------------------

# 在学习过程中，发现的一些可以留意的问题 #

个人常见问题：盒子模型真的是个十分重要的东西，涉及到布局可以考虑如下步骤：首先给盒子模型增加背景色，增加突出的背景色可以让我们看到盒子在页面中所处的位置。因为如果不加背景色，就我个人而言，可能会找不到盒子的边界，从而干预了其他盒子的布局。增加背景色之后，如果盒子本身是有大小的，而不是根据放入盒子中的元素来决定的（即盒子不是靠元素来撑起大小的），建议先给盒子设置大小。在这里尤其尤其不要着急给盒子定位。这也是我个人经常遇到的问题。因为我最开始想的是先给盒子定位，然后将元素放入其中，但是有些时候会因为元素的加入，而导致盒子的定位失效，这样一来可能需要不断的移动位置，甚至找不到错误的原因，而导致心态爆炸。

所以划重点，就我个人而言：一定不要先考虑布局和复杂样式。而是设置好盒子的基本样式后，把盒子中存放的所有元素先放入其中，再根据具体的细节，去调整样式。也就是说，先去设计布局十分关键。  
![在这里插入图片描述][202010121439415.png_pic_ceter]  
如上图的小例子，来总结一下自己的思路。根据之前我个人的见解，首先需要先写html部分，也就是说外部肯定是一个列表ul，每个li中存放的肯定就是每个图片，同时为了图片能够点击，img标签外肯定还有一层a。因此html部分为：

当html部分构建完成之后，我们有时会发现，图片是很大的，而这时这个盒子是靠这三个图片而撑起的大小。这时再根据我之前的思路，先给盒子添加背景色和宽度大小。因为图片是竖向，同时图片的大小，其实也就是盒子的宽度大小，因为图片只设置宽度，那么另一个高度会等比例缩放，也就是说有时我们不需要给图片设置大小，当然也可以单独给图片设置大小，需要视情况而定，什么情况？就是看盒子中还有没有其它元素了，如果只有这三个图片，当然也可以给图片设置大小，但是给盒子设置大小，让图片的width为100%，会更好。这其中，如果只给盒子设定大小，图片没有样式，那么图片就会溢出。

当这部分弄好之后，就可以考虑复杂样式 / 布局结构。图片下的白边因为只有最后一个图片没有，所以：

.img-list li:not(:last-child){ 
        margin-bottom: 9px;
    }

这些布局就需要一定要能分得清margin、border、padding，详细看盒子模型。  
就相当于margin是将整个盒子移动到网页的对应位置，border就可以显示当前盒子的边框，padding主要是控制盒子中每个子元素在盒子中的位置。

当这些都弄好了之后，还需要考虑一个，就是让盒子居中。这可以参考之前提到的方法，但是我常用的居中方式display:flex，是会有一定问题的。本例中，是要让盒子居中，而不是三个图片，这个一定要分清，只要盒子居中，那么图片自然而然就能居中。如果设置图片居中，那显然没有效果，因为图片的居中也就相当于只是在盒子中居中，不可能出现在页面中间。而我个人之前就会经常遇到这样的问题，还在考虑为什么给图片设置居中却没有居中，原因所在就是没把它看成是一个盒子。对于display:flex在我使用时就会发现，如果盒子本身设置了宽度或者高度，那么这个居中方法就会失效，原因暂时不明。因此我就考虑使用其他居中方式。在之前提到的所有居中方案中，top、left为50%的方案显然最不可能采用，因为还需要设置margin，需要知道盒子的宽高。而对于margin:auto的方案或者是transform的方案都挺好，只不过一个还是需要宽高的依靠，另一个只需要考虑兼容性。而之前提到需要设置position，如果父元素就是body、html那就可以不用开定位了，直接margin: 50px auto即可。

--------------------

个人遇到的问题：一定要区分行内元素和块状元素的区别，行内元素会在一行中排列，且无法设置宽度、高度、对齐等样式属性的。因此，在设计一些html时，就要考虑每个结构应该是什么标签。  
![在这里插入图片描述][20201012145440715.png_pic_ceter]  
就比如说，上例，所有内容都是在一个盒子上面的，每一行都是一个块元素div，而每一行中的内容，就是行内元素，因为需要能够点击，那就设为a。  
因此每一行的格式应该为：

除此以外，对于这种结构，我个人常见的问题：比如，因为这里是竖向排版，那么不需要考虑浮动的问题。在本例中，外面的是一个盒子，一个盒子里面的每一行到底应该选用什么标签才好？我第一反应就是使用ul列表，因为列表中，每个li是块标签，那在每个li中添加每一行的要素不就可以了？但是这种思维确确实实让我陷入了深渊当中。就相当于，当我想要实现这种结构的时候，竖向就是ul，横向导航就是ul的左浮动。我之前遇到这类的所有问题，我也都是这么做的，但是做的过程中也多多少少遇到了很多我无法解决的问题，让我十分困扰。在本例中看到了这种结构，突然间让我茅塞顿开。我用li标签实现效果和每行一个div实现效果其实相同，反而使用div的方式让我减少了麻烦。所以以后如果遇到横向导航条，我就可以不用ul列表浮动的方式，而是直接撰写结构，不知道这样做会不会有什么不好的问题。如果各位有更好的方式可以分享起来。只不过我个人对于ul列表的使用遇到了一些问题。

--------------------

个人遇到的问题：当我在做导航条的时候，一定会遇到的一个问题，就是导航条上的每个选项都需要点击，是a，但是a是行内元素，无论是单独拿出来用，还是用div、li包裹，我们还是无法调整a的大小，比如你就是想调整a的大小，那么肯定想到的就是将a设置为块元素。但你会发现，你依然无法通过设置height和width来调整它的大小。我起初对这个问题十分疑惑，虽然我现在依然不知道为什么height和width对已经调整成块元素的a调整大小，但是当你换个角度去思考，发现还有别的办法去调整它的大小。当然不只是局限于这种情况，这个使用方法确实让我拓宽了思维，让我不再局限于要调整标签的大小，只会使用width和height。这个方法就是，使用line-height和padding。就相当于我没有去调整盒子本身的大小，而就是通过这两个样式，硬生生地把这个盒子拉大。同时这个方法也就证明了，当你想让a中的文字水平垂直居中时，有时不需要拘泥于使用之前提到的那些方法。你可以使用line-height让它垂直居中，水平居中只需要使用padding 或者 text-align: center。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>测试</title>
        <style> /*通用设置*/ *{ margin: 0; padding: 0; text-decoration: none; list-style: none; } body{ background-color: #faebcc; } .test{ position: absolute; width: 100px; background-color: white; left: 50%; top: 50%; transform: translate(-50%,-50%); } .test2{ display: block; width: 100%; height: 100px; background-color: greenyellow; } .test2:not(:last-child){ margin-bottom: 9px; } .top{ position: absolute; width: 400px; height: 50px; background-color: white; top: 100px; left: 50%; transform: translateX(-50%); display: table; table-layout: fixed; } .top2{ display: table-cell; background-color: cornflowerblue; line-height: 50px; text-align: center } .top2:hover{ background-color: white; color: red; } </style>
    </head>
    <body>
    <div id="game">
        <div class="test">
            <a class="test2" href="javascript:;"></a>
            <a class="test2" href="javascript:;"></a>
            <a class="test2" href="javascript:;"></a>
        </div>
        <div class="top">
            <a href="javascript:;" class="top2">首页</a>
            <a href="javascript:;" class="top2">游戏</a>
        </div>
    </div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 2]

--------------------

接下来的例子：实现轮播图的圆点

![在这里插入图片描述][20201012150744468.png_pic_ceter]

个人遇到的问题：这个部分困扰我好久，因为有了实例后，你会发现看起来很简单，但是当你上手去做，做着做着就会发现明明和实例的思路是相同的，怎么会出现十分离谱的效果呢？主要是出现了奇怪的效果，却根本就不知道它为什么会出现这种离谱的效果。因此这个问题困扰了我好久。接下来就来好好研究一下。

以下是html部分。需要说明的是，我在第一次考虑的时候，决定用ul li a的方式去实现轮播图的圆点，但是你会明显的发现，这显然很麻烦，而且会出现更多意想不到的效果！因为如果使用li，那横向圆点一定要浮动，除此以外每个li当中肯定还是用a来实现圆点，因为圆点是可以点击的。那这么麻烦，不如直接用div包裹。

看起来好像html的思路还是很简单的，但是一用到css就逼疯了我。

首先img-list没问题，设置成图片的大小，并让它在页面上居中。开启定位，以便让img-list里的圆点能够移动到指定位置。

.img-list{ 
      width: 590px;
      height: 470px;
      margin: 100px auto;
      position:relative;
    }

对于pointer，开启绝对定位，并设置bottom和left可以让圆点指定到相应位置，并且一定需要设置z-index，去调整点的优先级，否则点会被图片盖住。

.pointer{ 
      position: absolute;
      z-index: 9999;
      bottom: 20px;
      left: 40px;
    }

对于这个部分没什么好说的，只要鼠标放入圆点，圆点就实现效果。并且设置了一个初始的点的默认状态。具体点的切换和图的切换，需要到JS中才能实现。现在html+css无法实现图片轮转效果。

.pointer a.active, .pointer a:hover{ 
      background-color: #fff;
      border: 2px solid  rgba(255, 255, 255, .3);
    }

接下来就是我个人出现问题的重灾区。

首先就是一定要牢记a是行内元素，我在这里又忘记了a是行内元素，导致我想给它设置一定大小的圆圈时，发现无法奏效。因此，现在先去考虑如何能把这个圆绘制出来。那么很简单就是使用display:block，但是需要注意的是，设置为块元素后，a会独占一行，而需要的圆点是横向的，因此还需要设置float:left。那么，一个知识点也就出现了display和float有必要同时写吗？实际上float有一个特点（这个特点被我忽略了，导致在看代码的时候，这个部分让我百思不得其解），浮动使元素脱离了文档流，同时它会让行内元素在浮动后变成块元素。因此，在这里只需要写float即可。因此在之后如果再遇到想要给行内元素设置大小，只需要使用float即可，实现横向的块元素。那当然如果是竖向的，那就直接display即可。

所以它的样式就是：

.pointer a{ 
      float: left;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, .3);
      border: 2px solid transparent;
      background-clip: content-box;
      margin: 0px 2px;
    }

这里还使用到了一个用法，`background-clip: content-box;`

之前我从来没有遇到过。在这里会用到也是因为border的存在。因为这个圆点要实现的效果其实是，在没有被点击的时候，它的边框是透明的，是不会显露出来的，当你点击的时候，这个边框也就出现了。但是如果只实现这两个功能可以吗？显然是不行的。经过自己的测试就会发现了。如果这个a的边框在最开始是透明的，也就是相当于最开始边框不存在，正因为你设置了border，所以盒子的大小已经发生了改变。而边框颜色是透明的，因此盒子的背景颜色也就落在了其中。而如果设置了这个样式，那么盒子的颜色就不会干扰到边框和内边距。因此它的作用就是：将背景颜色值设置到内容区，边框和内边距不在有背景颜色。

所以通过本例发现看似很简单的样式，觉得自己会了，自己做的时候又发现出了错。这就导致当你想要模仿的时候，才会发现其中也许需要更深层次的理解。因此在遇到问题的时候，还是需要先全部理解清楚再去尝试。

作者要说的话：现在随着技术的进步，我们已经不需要考虑轮播图的实现方式了，因为UI组件库已经帮我们写好了这部分样式，我们只需要去调用即可。

--------------------

对于a，还有一种用法，a:link\{\}。它的作用就是，让a:link率先加载，因为如果涉及到一些外部资源，比如图片、视频等，这些资源都需要浏览器单独发送请求加载。而浏览器加载外部资源是按需加载的，用则加载，不用则不加载，因此为了避免出现问题，就可以使用这种方式。

那么什么时候会遇到用a来存放图片或者视频呢？比如如果涉及到按钮，之前一共碰到了两种方法，一种是input，一种是button。在这里，还可以用一种办法，就是在设计按钮的时候，按钮的外形，包括点击的效果，可能已经通过图片的方式设计好了，在这里只需要引入图片即可的情况下，就可以用a。

既然说到了图片的加载问题，那么就不得不说雪碧图。我们知道图片属于外部资源，浏览器是需要加载的，因此就可能会出现图片闪烁的问题，因为最开始没加载出来。因此，为了解决这么一个问题，那肯定就是想办法让图片尽早加载就可以了。而如何让图片尽早加载出来呢？也不能所有图片都是上面提到的a:link形式存放。因此，目前的解决方案就是，雪碧图。这个雪碧图就是：一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验。也就是说，这个雪碧图只要预先加载了一次，那么之后所有图片就相当于都加载出来了。这是为什么？因为雪碧图中，会把本页面所有需要的图片都集中放在其中，我们只需要调整这个雪碧图在页面的位置，就可以把我们想要的内容显示出来了。因此在使用的时候，就必然会用到background-position来调整位置。雪碧图也被称为CSS-Sprite。

使用法：

.box2{ 
        width: 42px;
        height: 30px;
        background-image: url('./img/09/amazon-sprite_.png');
        background-position: -58px -338px;（可看作margin-left margin-top）
    }

只需要设定盒子大小，然后将图片移动到想要展示的图片的位置即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/3b751bdd066741a3a5a89adabc62f049.png
[20201012094008718.png]: /images/20221123/aec2e856231c48798ea343a682ee91da.png
[2020101209524812.png]: /images/20221123/63c3a7a3e5744df4b68b6ac5d48b2c6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: /images/20221123/22b2427e79ce4159a0dd6581906e4ec3.png
[Link 1]: https://blog.csdn.net/qq_45613931/article/details/106556503
[20201012102436803.png]: /images/20221123/757f6123ee7b42c8b7d301a694b91d43.png
[20201012100054905.png]: /images/20221123/b0b4678ce76f446f907bd6ca77b250b6.png
[20201012100130563.png]: /images/20221123/f3382c3deaf04e9b9727551730000d6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]: /images/20221123/24867dd78e1b401cb17228d1fae17443.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]: /images/20221123/1b6adb7c3fee49d6ace8404d18fbfca5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]: /images/20221123/0d2e97222eb04f3a9094bfe1f5338a00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]: /images/20221123/d006ef1adb854486b250e3e7106c2b21.png
[Flex]: https://www.cnblogs.com/qingchunshiguang/p/8011103.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 5]: /images/20221123/51c1862fe0f8487d96c15a227ef61a10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener]: /images/20221123/b66f11114c7f43ac99880f4784c33ea4.png
[20201012110718902.png_pic_cener]: /images/20221123/68a2a43a7bde45a3b83473c3ec70ecb6.png
[20201012110744684.png_pic_cnter]: /images/20221123/25404f7520c84654957e22ba1ce252d3.png
[20201012111229769.png_pic_cener]: /images/20221123/ec462b79f00c470ba1a1925ea313b29d.png
[20201012111333159.png_pic_ceter]: /images/20221123/8d58c36210d34f1d8bdcc62eccca4167.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 1]: /images/20221123/214742acdea042cfb6419677f04b9161.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter]: /images/20221123/6e976398ad954d169681fcbac82047b6.png
[h5_canvas_1]: https://blog.csdn.net/qq_45613931/article/details/106526737
[canvas_2]: https://blog.csdn.net/qq_45613931/article/details/106544322
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 1]: /images/20221123/6f32868e464a4c7a952831420568bb02.png
[Link 2]: https://cubic-bezier.com
[meta]: https://www.deanhan.cn/html-meta.html
[meta 1]: https://blog.csdn.net/leo_shire/article/details/81588001
[before_after]: https://www.cnblogs.com/lynnmn/p/6254367.html
[CSS]: https://blog.csdn.net/it_rod/article/details/80466074
[202010121439415.png_pic_ceter]: /images/20221123/15c3b69d5b174d3a93bf9c35ea7fa933.png
[20201012145440715.png_pic_ceter]: /images/20221123/5248c8f54f61462ebb1b9ee78274b852.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 2]: /images/20221123/9280f39bd9d84b059fc42ba75cc9541c.png
[20201012150744468.png_pic_ceter]: /images/20221123/90b7febc4165465895336b9e4b6c4686.png