文章目录
- 1 rem em px vw vh % 的区别
- 2 750的设计图，20px为多少rem
- 3 app怎么做适配的设置以下标签：
- 4 bfc是什么，清楚浮动的原理
- 5、简单的一个盒子移动到另一个盒子，实现动画效果
- 6、border实现0.5像素
- 7、两个盒子，左边固定宽，右边自适应
- 8、css 选择器有哪些，权重是什么样的
- 9、css 布局，左侧宽度最小 150px，最大 25 %，右侧自适应。
- 10、CSS 的基本语句构成是？
- 11、CSS 选择符（选择器）有哪些？哪些属性可以继承？优先级算法如何计算？
- 12 css 引入的方式有哪些，link 和@import 的区别是什么
- 13、CSS3 动画概念，怎么实现的
- 14、CSS3 新增了哪些东西
- 15 当 margin-top、padding-top 的值是百分比时,分别是如何计算的?
- 16. 定位的含义，几种不同的定位分别有什么特点，详细说明
- 17 display有哪几种属性值？分别代表什么？Img 属于什么元素
- 18 当使用display：inline-block后有间距
- 19 Doctype 的作用? 严格模式和混杂模式的区分，以及如何触发这 2 种模式?
- 20 对 WEB 标准以及 w3c 的理解与认识
- 21 FireFox 中标签的居中问题的解决办法
- 22 flex的相关题目
- 23 父元素 visibility：hidden；子元素设置 visibility：visible，子元素显示吗
- 24、渐变
- 25 一条 0.5px 的线，几种方法
- 26 行内元素有哪些，块级元素有哪些，空元素有哪些
- 27 Html 和 XHTML 有什么区别?
- 28 浏览器渲染页面的过程
- 29、html5 有哪些新特性、移除了那些元素
- 30、Html5 中 datalist 是什么
1 rem em px vw vh % 的区别
（1）px 是一个像素单位，是一个具体的大小，属于绝对单位。
（2）rem 是相对于根元素（系统设置的字体字号）进行设置。
（3）em 如果自身设置了字体的大小，则相对于自身的字体大小设置，如果自身没有，则相对于父元素的字体大小。
（4）vw / vh 相当于整个浏览器的百分之几，1vw 相当于百分之一，大小是视口可以观看的区域大小。
注意：
vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一直；如果有滚动的话，则100vw中不是包括滚动条的，100%是包括滚动条的距离的。
2 750的设计图，20px为多少rem
750的设计图出自于手机屏幕为375px*667px的iphone678手机屏幕的设计稿，这里也可以称之为2倍图。
此时假设页面的默认字体大小是16px,则此时的1rem = 16px
所以此时需要算出的就是 20px = ? rem
结果为1.25rem.
3 app怎么做适配的设置以下标签：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
具体的含义为：app完成的页面的宽度等于设备的宽度，页面的缩放比例为1.0，不允许最大缩放；
content="width=device-width, 理想的宽度就等于设备的宽度
initial-scale=1.0 设备的初始值缩不缩放
user-scalable=no 意思是用户不允许双击和放大
4 bfc是什么，清楚浮动的原理
，BFC全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。也就是说独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，这样就达到了清除浮动的效果，但是overflow:hidden本身的意思是溢出的元素隐藏显示，所以说有一定的缺点，大家可以根据情况来使用它。
触发的条件：
1.根元素
2. float属性不为 none
3. position 属性为 absolute 和 fixed
4 display 为inline-block,table-cell,table-caption,flex,inine-flex
5. overflow 不为visible
6. contain 值 layoutcontent paint
- BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
- 每个元素的margin box的左边， 与包含块border box的左边相接触
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时，浮动元素也参与计算
4.1 使用bfc的案例
（1）外边距重叠问题，两个盒子的间距应该为 200px,但是由于存在一种规范，所以在进行显示的时候，间距只有100px 的大小
解决措施：
给父元素添加overflow:hidden,使两个盒子都产生bfc
（2） 清除浮动案例
<div class="container">
<div class="box"></div>
</div>
<style>
.container{
border: 1px solid red;
/* overflow: hidden; */
}
.box{
width: 100px;
height: 100px;
background-color: pink;
margin: 100px;
/* 此时 因为设置了子元素进行浮动 导致了父元素的高度坍塌
解决方法 也是触发 父容器的bfc
*/
float: left;
}
</style>
（3）第一个盒子浮动，导致第二个盒子占据第一个盒子的位置
<style>
.box1{
width: 100px;
height: 100px;
background-color: pink;
/* 此时因为进行设置了浮动 导致 第一个 盒子脱离了普通的文档流 所以此时 第一个盒子
会 覆盖 第二个盒子
解决方法 也是触发 bfc
BFC的区域不会与float box重叠。所以可以再 下面的盒子里面进行触发 bfc
*/
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
解决方法：
5、简单的一个盒子移动到另一个盒子，实现动画效果
5.1 方法一 使用transition过渡动画结合2d位移translate进行设置设置
<!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>
*{
margin: 0;
padding: 0;
}
.box1{
height: 100px;
width: 100px;
background-color: pink;
margin-bottom: 100px;
}
/* 1 使用 transition 过渡动画结合 2d 的位移 translate 设置
语法：transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；
*/
.box2{
height: 100px;
width: 100px;
background-color: skyblue;
transition: all 2s linear;
}
/* 此时是 transition 配合 transform 进行使用 */
/* 需要做的事情就是 当鼠标经过 上面的盒子的时候 下面的盒子进行 移动 */
.box1:hover + .box2{
transform: translateX(-100px);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
5.2 通过使用animation动画属性结合2d里面的位移translate进行实现
<!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>
*{
margin: 0;
padding: 0;
}
.box1{
height: 100px;
width: 100px;
background-color: pink;
margin-bottom: 100px;
}
/* 1 使用 transition 过渡动画结合 2d 的位移 translate 设置
语法：transition: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；
*/
.box2{
height: 100px;
width: 100px;
background-color: skyblue;
transition: all 2s linear;
}
/* 配合 animation 属性进行使用
此时需要注意的是 动画要加在变化的事物身上
animation: 动画名称 执行一次的时间 执行的次数 运动的方式;
*/
.box3{
height: 100px;
width: 100px;
background-color: greenyellow;
animation: ymy 3s linear;
}
/* 1 首先需要进行创建一个动画 */
@keyframes ymy{
/*
第一种写法 from to
第二种写法 百分比的形式
*/
0%{
transform: translateX(0px);
}
50%{
transform: translateX(50px);
}
100%{
transform: translateX(100px);
}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
6、border实现0.5像素
最简单的办法就是直接将 边框设置为 0.5px 但是 在 iPhone 可以正常显示 安卓用户不行，所以需要使用 css3里面的缩放属性 scale属性，使用此属性将原本 1px 的 边框 缩小50%
原理是
把原先元素的 border 去掉，
然后利用 :before 或者 :after 重做 border ，
并 transform 的 scale 缩小一半，原先的元素相对定位，
新做的 border 绝对定位。
此问题的逻辑思想 ：
1 给需要进行设置边框的盒子设置一个相对定位
2 然后通过使用 伪类的方法 进行对此盒子进行操作
0 加上一个绝对定位
1. 边框中的内容为空
2 此时设置边框 为 1px
3 在宽高都 扩大2倍 也就是 200%
4 设置 此时的 变化的位置 为 0 0 （从距离上面0 左边0 开始进行变换）
5 最后使用 scale 进行缩放（此时缩放的不仅仅只有宽高，还有border的大小）
6 同时要保持 设置边框在之后 不影响原来的大小就需要使用怪异盒 模型
<!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>
*{
margin: 0;
padding: 0;
}
.box2{
border: 1px solid red;
height: 50px;
margin-bottom: 10px;
}
.border1{
/* 设置目标元素作为定位参照 */
position: relative;
}
.border1:before{
/* 给目标元素添加一个伪类元素before或者after */
/* content表示在伪类后面添加内容 默认 为 none */
content: '';
position: absolute;
border: 1px solid red;
/* 此时的操作是 将现在的盒子大小变为 原来的两倍 */
width: 200%;
height: 200%;
/* transform-origin 属性用来设置 transform 变换的基点位置。
默认情况下，基点位置为元素的中心点。 */
transform-origin: 0 0;
/* 伪类元素缩小0.5倍（变回目标元素的大小）
参数表示缩放倍数；
一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
*/
transform: scale(0.5);
/* 加了box-sizing:border-box属性，
padding和border的值就不会在影响元素的宽高，
相当于把padding和border的值都算在content里
也就是常说的怪异盒模型
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box2"></div>
<div class="border1">
<div class="box1">伪类设置的边框</div>
</div>
</body>
</html>
7、两个盒子，左边固定宽，右边自适应
<!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>
/* .content{
width: 800px;
height: 200px;
border: 1px solid black; */
/* 第四种 */
/* display: flex; */
/* 第五种 */
/* display: table;
} */
/* .left{
width: 100px;
height: 100%;
background-color: pink; */
/* float: left; */
/* 第五种 */
/* display: table-cell;
} */
/* 第一种 方法 使用 calc
calc(100% - 固定内容的宽度) 用calc函数动态计算数值
*/
/* 此时需要让右边的盒子占满剩下的内容 */
/* .right{
width: calc(100%-100px);
height: 100%;
background-color: red; */
/* 清除浮动 */
/* float: left; */
/* overflow: hidden;
} */
/* 第二种 float来和BFC实现 通过使用 bfc 来进行将右边的内容进行划分一个区域
此时不进行设置宽度 会继承父元素的宽度 也就是剩下的
*/
/* .right{
height: 100%;
background-color: red;
overflow: hidden;
} */
/* 第三种 左边盒子使用定位 右边盒子使用margin*/
/* .right{
height: 100%;
background-color: red;
margin-left: 100px;
} */
/* 第四种 flex布局轻松搞定 左边盒子不设置浮动*/
/* .right{
height: 100%;
background-color: red;
flex: 1;
} */
/* 第五种 */
/* display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签 */
/* vertical-align: middle；实现块级元素垂直居中 */
/* .right{
height: 100%;
background-color: red;
display: table-cell;
} */
/* 第六种 使用inline-block携手calc函数设置宽度*/
.content{
border: 1px solid #000;
width: 100%;
height: 200px;
font-size: 0;
}
.left {
width: 200px;
height: 100%;
background: red;
/* 行内块 */
display: inline-block;
/* 块级元素 垂直靠上 */
vertical-align: top;
}
.right {
height: 100%;
background: pink;
display: inline-block;
vertical-align: top;
width: calc(100% - 200px);
font-size: 16px;
}
</style>
</head>
<body>
<!-- 此时的要求是 两个盒子，左边固定宽，右边自适应，你能想到几种方法-->
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
8、css 选择器有哪些，权重是什么样的
! important > 内联式 > id选择器(id)> 类选择器(class) = 属性选择器（type）= 伪类选择器 > 伪元素选择器 = 标签选择器 > 通配符选择器
<!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: 100px;
height: 100px;
}
/* #box{
background-color: red;
} */
/* .box{
background-color: pink;
}
div[type] {
background-color: green;
} */
/* div:hover{
background-color: orange;
} */
div + p{
background-color: yellow;
}
div p{
background-color: skyblue;
}
</style>
</head>
<body>
<!-- css 选择器以及优先级
id选择器 #id 0100
id选择器使用**‘#’**进行标识，后面紧跟id名。
基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}
类选择器 .class 0010
类选择器使用**‘.’**(英文点号)进行标识，后面紧跟类名。
基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；}
属性选择器 div[type="text"] 0010
属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
语法格式：[标签名称] { 属性1：属性值1；属性2：属性值2；}
伪类选择器 li:last-child 0010
标签选择器 div 0001
按标记名称分类，为页面中某一类标签指定统一的CSS样式。
基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}
伪元素选择器 li::after 0001
相邻兄弟选择器 h1+p 0000
表示匹配紧跟第一个选择器并匹配第二个选择器的元素，如紧跟p元素后的a的元素。
子选择器,选择亲儿子 ul>li 0000
子代选择器使用**‘>’**表示，如ul>li{ }，表示匹配第二个选择器，且为第一个选择器的元素的后代。
语法格式：标签名称1>标签名称2{ 属性1：属性值1；属性2：属性值2；}
后代选择器，后代所有 li a 0000
后代选择器也称包含选择器，用来选择特定元素的后代
语法格式：标签名称1 标签名称2{ 属性1：属性值1；属性2：属性值2；}
通配符选择器 * 0000
通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，
能匹配页面中所有的元素。
基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}
此时优先级 同一层的 采用就近原则 也就是谁写在最后面 用谁的样式
id 选择器 > 类选择器 | 属性选择器 | 伪类选择器 |伪元素选择器
> 标签选择器
概念不同：伪类：用于已有元素处于某种状态时为其添加对应的样式，
这个状态是根据用户行为而动态变化的；例如鼠标的悬停效果；
伪元素：用于创建一些不在 DOM 树中的元素，并为其添加样式；
例如：先前向后插入元素内容等等
-->
<div class="box" id="box" type="add">
<p>111</p>
<a href="">
<p>333</p>
</a>
</div>
<p>222</p>
</body>
</html>
9、css 布局，左侧宽度最小 150px，最大 25 %，右侧自适应。
两种方法：
（1）第一种：使用浮动加bfc,同时要设置最小宽度min-width,最大宽度max-width
<!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>
*{
margin: 0;
padding: 0;
}
.content{
height: 800px;
}
.left{
height: 100%;
min-width: 150px;
max-width: 25%;
background-color: pink;
float: left;
}
.right{
height: 100%;
overflow: hidden;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
（2）第二种：使用弹性布局实现display: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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
height: 800px;
display: flex;
}
.left{
height: 100%;
min-width: 150px;
max-width: 25%;
background-color: #ffc0cb;
}
.right{
height: 100%;
background-color: skyblue;
flex: 1;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
10、CSS 的基本语句构成是？
css 基础知识
css 是对页面结构的一种修饰
- css 的基本语句构成
选择器 {属性：属性值；属性：属性值；}
主要是由两个部分进行组成
选择器 和 {} 样式规则组成
样式规则有 属性和属性值组成 二者之间使用 : 结束使用；
最后一组 可以不使用 ; 但是一般都会进行使用 - css 复用
css 复用 代表的是 css 里面的代码重复使用 主要是为了做到网站开发的优化可以简化多重css，
css复习 目的是为了创建一套可以不依赖内容的可重复使用的类名 以及公共的样式
11、CSS 选择符（选择器）有哪些？哪些属性可以继承？优先级算法如何计算？
id 类 属性 伪类 标签 伪元素 通配符 子代亲儿子> 所有空格 相邻兄弟 +
11.1 基础选择器
（1）通配符选择器 *{}
（2）标签选择器 p div span
（3）class类选择器 .class属性值{} 如class=box .box{}
（4）id选择器 #id属性值{}
（5）多类名选择器（一个标签上带有多个类选择器，会出现叠加效国，相同的会被后面写的覆盖）
（6）群组选择器 选择器1,选择器2，…{}
11.2 结构选择器
（1）相邻兄弟选择器 + 例 E+F{} F是紧挨着E后面得到兄弟元素
（2）子代选择器 > E>F{} F必须是E的子元素 亲儿子
（3）后代选择器 E F{}（中间为空格） F必须是E的后代
（4）通用选择器E~F{} F是E后面的所有兄弟元素
11.3 属性选择器
（1）元素中存在某种属性
<style>
/* 第一种 元素存在某种属性，此时input都存在 type 属性*/
input[type]{
background-color: pink;
color: red;
}
</style>
（2）[Eattr=“value”] 元素 E 中存在 attr 属性,并且 attr 的属性值为 value
/* 第二种 元素 E 中存在 attr 属性,并且 attr 的属性值为 value */
input[type="text"]{
background-color: pink;
}
（3）[Eattr~=“value”] 元素 E 中存在 attr 属性,并且 attr 的属性值为 value 或者"value value1 …"的形式，
意思为：可以匹配所有的与设置的值相同的，不过当前标签属性中有几个属性值
/* 第三种 元素 E 中存在 attr 属性,并且 attr 的属性值为 value 或者"value value1 ..."的形式 */
input[type~="text"]{
background-color: pink;
}
（4）[Eattr^=“value”] 元素 E 中存在 attr 属性,并且 attr 的属性值以 value 开始
[Eattr$=“value”] 元素 E 中存在 attr 属性,并且 attr 的属性值以 value 结尾
input[class^="b"]{
background-color: pink;
}
input[type$="t"]{
background-color: skyblue;
}
（5）[Eattr*=“value”] 元素 E 中存在 attr 属性,并且 attr 的属性值存在 value
[Eattr|=“value”] 元素 E 中存在 attr 属性,并且 attr 的属性值为 value 或者 value-的形式
*= 代表只要满足条件的都生效
[attr|=“val”] 是属性值 起始片段完全匹配 选择器，表示 具有 attr 属性的元素， 其值要么 正好是 val, 要么外加 短横线 - 开头
<!-- 匹配 -->
<div attr="val"></div>
<!-- 匹配 -->
<div attr="val-ue"></div>
<!-- 匹配 -->
<div attr="val-ue bar"></div>
---------------------------------------------------------------------
<!-- 不匹配 -->
<div attr="value"></div>
<!-- 不匹配 -->
<div attr="val bar"></div>
<!-- 不匹配 -->
<div attr="bar val-bar"></div>
11.4 结构伪类选择器
<!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>
/* X:first-child 匹配子集的第一个元素
语法规则：E需要写两层第一层为父元素第二层为子元素在冒号后面写子元素中的第几个
ul li:first-child;说明：ul里面的第一个li;选择器有就近原则路径不清无法展现效果
*/
div p:first-child{
background-color: pink;
}
ol li:last-child{
background-color: skyblue;
}
/* nth-child (n)选择某个父元素的一个或多个特定的子元素,索引值从 1 开始
n可以是数字,关键字和公式（上一代码块有具体体现）
n如果是数字,就是选择第n子元索，里面数字从1开始..
n可以是关键字: even偶数. odd奇数
*/
ol li:nth-child(2){
background-color: green;
}
/* X:only-child 这个伪类一般用的比较少，
比如上述代码匹配的是 div 下的有且仅有一个的 p，
也就是说，如果 div 内有多个 p，将不匹配。
*/
div p:only-child{
font-size: 30px;
}
/* X:root 匹配文档的根元素。在 HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
X:empty 匹配没有任何子元素（包括包含文本）的元素 */
:root{
background-color: red;
}
</style>
</head>
<body>
<div>
<p>111</p>
</div>
<div>
<p>111</p>
<span>444</span>
<p>222</p>
<span>333</span>
</div>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</body>
</html>
11.5 目标伪类选择器
E:target 选择匹配 E 的所有元素，且匹配元素被相关 URL 指向，该选择器是动态选择器，只有当存在 URL 指向该匹配元素时，样式效果才能够有效。
<!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:target{
background-color: pink;
}
</style>
</head>
<body>
<!-- 必须使用id -->
<div id="pink">盒子1</div>
<div class="box2">盒子2</div>
</body>
</html>
11.6 UI 状态伪类
UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。
E:enabled 匹配所有用户界面（form 表单）中处于可用状态的 E 元素
E:disabled 匹配所有用户界面（form 表单）中处于不可用状态的 E 元素
E:checked 匹配所有用户界面（form 表单）中处于选中状态的元素 E
E:selection 匹配 E 元素中被用户选中或处于高亮状态的部分
11.7 否定伪类
E:not(s) （IE6-8 浏览器不支持:not()选择器。）匹配所有不匹配简单选择符 s 的元素 E
11.8 动态伪类
（1）被定义未被访问的 E:link
（2）被访问过的 E：visited
（3）用户行为选择器，且匹配元素被激活。常用于链接描点和按扭，E：active
（4）用户鼠标停留在元素 E 上。E:hover
（5）E:focus 用户行为选择器 选择匹配的 E 元素，而且匹配元素获取焦点
11.9 继承
- 继承：html 元素可以从父元素那里继承一部分 css 属性，即使当前元素没有定义该属性。
1.字体系列属性 font，font-family，font-weight，font-size，font-style
2.文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，color
3.元素可见性 visibility
4.表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table-layout
5.列表布局属性 list-style-type，list-style-image，list-style-position，list-style
11.10 选择器优先级的算法
优先级就近原则，同权重情况下样式定义最近者为准，载入样式以最后载入的定位为准;
优先级为：同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
- !important > id > class > tag important 比 内联优先级高
12 css 引入的方式有哪些，link 和@import 的区别是什么
使用import 和 link进行引入
区别
（1）link 属于XHTML标签（是一种更严格更纯净的HTML 标准），而@import是CSS提供的一种方式。
（2）当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而@import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import 加载CSS 的页面时开始会没有样式
（3）@import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。
（4）使用 dom控制样式时的差别：当使用javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的
13、CSS3 动画概念，怎么实现的
CSS3动画是通过animation属性进行实现，使用动画的方式就是先声明在调用，具体调用位置就是哪里需要动画效果在哪里调用
<!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: 200px;
height: 200px;
background-color: pink;
/* 调用 animation 属性 */
animation:ymy 3s ease-in-out infinite alternate;
}
/* 声明一个动画 */
@keyframes ymy{
/* 两种写法 一种 from to 一种 百分比的形式 */
from{
width: 200px;
height: 200px;
background-color: pink;
}
to{
width: 400px;
height: 400px;
background-color: skyblue;
border-radius: 50%;
}
}
</style>
</head>
<body>
<!-- CSS3动画怎么实现的
css3 中的动画效果是通过 animation属性来进行实现的
使用的过程是：
先进行声明一个动画 然后再去调用
谁需要产生动画效果谁就调用 animation 属性
复合写法：
animation: 动画名称 执行一次的时间 执行的次数 运动的方式;
animation:复合属性
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
linear 匀速 ease默认 从动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
自定义次数 n / infinite 无限次
animation-direction 规定是否应该轮流反向播放动画。
normal 默认值 alternate
form 初始状态
to 结束装填
可以替换成
0% 初始状态
100% 结束状态
后面的百分比可以称之为关键帧动画
-->
<div></div>
</body>
</html>
14、CSS3 新增了哪些东西
CSS3 里面的新增主要有：CSS 选择器，盒子中的修饰，背景，文本效果，字体，2D/3D，过渡动画，多列布局等等
14.1 CSS选择器(见第11个)
1、p:first-of-type 选择属于其父元素的首个 p元素的每个 p 元素。
2、p:last-of-type 选择属于其父元素的最后 p元素的每个 p 元素。
3、p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素。
4、p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。
5、p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素
14.2 盒子修饰
14.2.1 边框属性
（1）border-radius圆角边框
支持浏览器：IE9+、Firefox、Chrome、Safari 、Opera
（2）box-shadow 盒子阴影
支持浏览器：IE9+、Firefox、Chrome、Safari 、Opera
（3）border-image 边框图片
支持浏览器：Firefox（旧版本需要前缀-moz-）、Chrome（旧版本需要前缀-webkit-）、Safari（Safari 5 以及更老的版本需要前缀 -webkit-） 、Opera（ 需要前缀 -o-）
<!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: 200px;
height: 200px;
background-color: pink;
border-width: 15px;
/* 注意 在进行设置颜色之前 应该先设置边框的样式 不然不起作用 */
border-style: solid;
/* css3新增属性之border-color：为边框设置多种颜色 */
border-color: skyblue;
/* css3新增属性之border-image：图片边框 */
/* border-image: url(1.jpg) 30 30 round; */
/* css3新增属性之border-radius：圆角边框 */
/* border-radius: 50%; */
/* css3新增属性之box-shadow：阴影效果
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
*/
box-shadow: 10px 10px 5px red;
}
</style>
</head>
<body>
<!-- 新增属性---border -->
<div>
<p></p>
</div>
</body>
</html>
14.3 CSS 新增背景模块
1、background-size 规定背景图片的尺寸
支持浏览器：IE9+、Firefox（旧版本需要前缀-moz-）、Chrome、Safari、Opera
2、background-origin 规定背景图片的定位区域，背景图片可以放置于content-box、padding-box 或 border-box 区域。
支持浏览器：IE9+、Firefox、Chrome、Safari、Opera
3、background-clip 规定背景的绘制区域
支持浏览器：IE9+、Firefox、Chrome、Safari、Opera
<!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: 200px;
height: 200px;
padding: 20px;
border: 10px solid pink;
/* background-origin：指定背景图片从哪里开始显示
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
*/
background-image: url("1.jpg");
background-repeat: no-repeat;
background-position: left;
background-origin: content-box;
/* background-size：指定背景图片尺寸 */
/* background-size: 80px 100px; */
/* background-clip：指定背景图片从什么位置开始裁剪
border-box 背景被裁剪到边框盒,默认取值。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
*/
background-clip: content-box;
}
</style>
</head>
<body>
<!-- css3新增属性
background-origin：指定背景图片从哪里开始显示
-->
<div>
1111
</div>
</body>
</html>
14.4 -CSS 文本效果模块
1、text-shadow 可向文本应用阴影
支持浏览器：IE10、Firefox、Chrome、Safari、Opera
2、word-wrap 允许文本强制文本进行换行，即使这意味着会对单词进行拆分
支持浏览器：所有主流浏览器
<!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>
h1{
text-shadow: 5px 5px 8px #000;
}
p{
/*
word-wrap: normal|break-word;
正常 只在允许的断字点换行（浏览器保持默认处理）。
断字符 在长单词或 URL 地址内部进行换行。 */
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>前端面试题</h1>
<p>单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行,单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行</p>
</body>
</html>
14.5 CSS 引入字体模块
@font-face 相关知识
14.6 2D/3D
1、transform 向元素应用 2D 或 3D 转换
支持浏览器：
IE10：2D、3D 都支持（2D IE9 需要前缀 -ms-）；
Firefox：2D、3D 都支持；
Chrome：2D、3D 都支持（2D、3D 需要前缀 -webkit-）；
Safari：2D、3D 都支持（2D、3D 需要前缀 -webkit-）；
Opera：只支持2D
transform 向元素应用 2D 或 3D 转换
css3提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。
属性值：
（1）transform ；
（2）transform-origin：transform-origin 属性可以设置变换的起点。
默认情况下，使用元素的中心作为起点。
transform：perspective（）；景深 视距 单位是px
景深，用来设置用户的眼睛距离元素的距离，数值越大 表示距离越远，看到元素的变化就不明显。不能给负值
3d属性
transform-style: flat | preserve-3d； 指定嵌套元素如何在3D空间中呈现
transform-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: 200px;
height: 200px;
background-color: pink;
animation: ymy 3s linear;
}
/* 使用动画更好的观察效果 */
@keyframes ymy{
/* transfrom 位移 朝着 x,y,z轴进行位移 通过使用 translate实现
可以简写为 transform：translate（apx，bpx，cpx）；
*/
from{
/* X轴 */
transform: translateX(0px);
/* Y轴 */
/* transform: translateY(0px); */
}
to{
transform: translateX(100px);
/* transform: translateY(100px); */
}
}
/* transform 中的缩放属性 scale */
.box2{
width: 200px;
height: 200px;
background-color: skyblue;
animation: ymy1 3s linear;
}
@keyframes ymy1 {
from{
/* 缩放属性 大于1 扩大 小于 1 缩小 */
transform: scale(1);
}
to{
/* 扩大 */
/* transform: scale(1.5); */
/* 缩小 */
transform: scale(0.5);
}
}
.box3{
width: 200px;
height: 200px;
background-color: skyblue;
animation: ymy2 3s linear;
}
@keyframes ymy2 {
from{
/* 旋转属性 正数表示顺时针旋转 负数表示逆时针旋转 */
transform: rotate(0);
}
to{
/* 顺时针旋转 */
transform: rotate(30deg);
}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
14.7 过渡动画
（1）transition 过渡属性
（2）@keyframes 创建动画
（3）animation 动画调用属性
14.8 多列布局
<!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>
*{
margin: 0;
padding: 0;
}
div{
margin: 10px auto;
background-color: pink;
height: 300px;
width: 100%;
/* 设置显示的列数 */
column-count: 4;
/* 列的宽度 设置列的宽度就不能使用设置列数*/
/* column-width: 200px; */
/* 列之间的间隔 */
column-gap: 50px;
/*列与列之间的边框 */
column-rule: 1px solid blue;
/* 当盒子设置高度的时候 会导致 填充不完全 所以使用 column-fill 来进行填充
可选值为 auto | balance。balance 表示各列的内容均衡填充，auto 表示各列的内容自动填充。
*/
/* column-fill: auto; auto 会影响设置的列数 */
/* column-fill: balance; 默认 */
}
div h1{
column-span: all;
}
</style>
</head>
<body>
<!--
多列布局，常用属性：
column-count:设置列的具体个数
column-width:控制列的宽度
column-gap:两列之间的缝隙间隙
column-rule:规定列之间的边框宽度，样式和颜色
column-span:规定元素应横跨多少列（n指定跨n列，all跨所有列）
-->
<div>
<h1>标题111111111111111111111111111111111111111111111111111111111111111111</h1>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae iure quas dolorem vitae aliquam doloremque tempore commodi possimus ab debitis eveniet adipisci voluptates, totam quia voluptatem magni voluptatum praesentium nemo
</div>
</body>
</html>
15 当 margin-top、padding-top 的值是百分比时,分别是如何计算的?
当对元素的 margin 设置百分数，百分数是相对于父元素的 width 计算，不管是margin-top/margin-bottom 还是 margin-left/margin-right。（padding 同理）
（1）如果没有为元素声明 width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。
（2）为什么 margin-top/margin-bottom 的百分数也是相对于 width 而不是 height 呢？
通常正常流中的大多数元素都会足够高于包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的 height 的百分数，就可能导致一个无限循环，父元素的 height 会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素 height 的增加也
会增加，如此循环。
<!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>
.father{
width: 300px;
height: 300px;
background-color: pink;
overflow: hidden;
}
.son{
width: 20px;
height: 20px;
background-color:skyblue;
/* 此时的margin-top就是相对于父元素的宽度进行设置的，此时宽为300,20%就为60px */
margin-top: 20%;
}
</style>
</head>
<body>
<!-- 是相对于父元素的宽度设置的 -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
16. 定位的含义，几种不同的定位分别有什么特点，详细说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
定位的概念： 将元素放在指定的位置上
定位 分为 5 种 分别是：
静态定位 static 是元素自带的默认的定位方式 默认值 正常的文本流
相对定位 relative 相对于自身的定位 后面的元素不会占据他的空间
绝对定位 absolute 把元素移除文档流 后面的元素 会占据他的空间 通常使用时
父相对 子绝对 ，父亲没有设置 就向上查找 一直到最上面一层 body
边框 与padding 之处开始进行偏移
固定定位 fixed 相对于浏览器的窗口进行定位 即使页面进行滚动 ，也不进行变化
粘性定位 sticky relative fixed 结合
-->
</body>
</html>
17 display有哪几种属性值？分别代表什么？Img 属于什么元素
display属性的含义：display控制元素的显示类型；
常用的 ：
（1）none 此元素不显示
（2）block 块级元素 还可以让元素控制元素显示
块级元素的特点： 自己占一行 能够设置宽高
常见的块级元素：div,p,h1,h6,ol,ul,ol,li,dl,dt,dd,form,fieldset,legend,
table,header,footer,section,main,nav,article,aside
（3）inline 行内元素
行内元素的特点 不能设置宽高 但是能横向显示
常见的行内元素：a,b,strong,u,i,em,s,del,sup,sub,span,font,mark,var
（4）inline-block 行内块元素
特点：既能设置宽高又能够在一行上显示
常见的元素有：input,textarea,select
（5）flex 能够触发弹性盒
采用 Flex 布局的元素，称为 flex容器（container），它的所有的子集都会成为容器的成员 ，成为flex的项目（item），容器中默认存在两轴主轴和侧轴、呈现90度的关系。无论是主轴还是侧轴，都有起点和终点，这对元素的排列对齐非常重要。
默认情况下：主轴方法从左到右，侧轴从上到下
（6）grid 网格布局
Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局，
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1
中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1
中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行
符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行
符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
img属于行内块元素
浏览器中的 computed 计算属性中的图片的 display 的取值为 inline，虽然为 inline 但是实际开发的时候图片是作为行内块元素进行使用的，因为遵循能设置宽度高度，并且还能横向显示；所以属于行内块元素，但是有些程序员也会把图片认为是行内元素也是可以，从另一个角度讲 img 也称作是置换元素；
18 当使用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>
.content{
width: 50px;
height: 50px;
background-color: pink;
border: 1px solid black;
/*设置为 行内块 */
display: inline-block;
}
</style>
</head>
<body>
<!-- inline-block 后为什么有间距 -->
<div class="content">11</div>
<div class="content">11</div>
<div class="content">11</div>
</body>
</html>
**问题：**此时的盒子已经转换为行内块所以一行可以显示多个，但是并没有设置左右间距，图片上却默认有间距，
原因是：因为在进行编写代码的时候，div是上下写的，中间有换行符，所以会带来空隙。
解决方法：
（1）将代码写一行，缺点可读性较差
（2）给父元素设置font-size:0; 给子元素设置需要的font-size，缺点:是子元素如果里面有文字，文字会消失不见，所以又要给子元素设置 font-size,增加了代码量。
（3）给元素设置 float:left,缺点需要清除浮动。
（4）设置子元素的 margin-left 为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，所以这个方法不通用。
（5）设置父元素 display:table;word-spacing:-1em;目前这个方法可美解决，且兼容其他浏览器
19 Doctype 的作用? 严格模式和混杂模式的区分，以及如何触发这 2 种模式?
···
<！DOCTYPE>声明叫做文档类型 DTD，
它的作用就是用来标识浏览器使用哪种文档类型，让浏览器知道以何种方式解析文档。
必须位于 HTML 文档的第一行，处于<html>标签之前，但是不属于 HTML 文档标签。
···
严格模式和混杂模式的区别，以及如何触发两种模式
（1）严格模式：浏览器按照W3C的标准解析代码，又称为标准模式。
（2）混杂模式：浏览器按照自己的方式解析代码，以一种向后兼容的方式呈现。
20 对 WEB 标准以及 w3c 的理解与认识
web标准可以分为结构、表现和行为。
结构主要是有HTML标签组成，表现是CSS样式表，行为则是指页面和用户具有一定的交互，主要由js组成。
web标准一般是将三部分独立分开，使其更具有模块化，但是一般产生行为是，就会有结构或者表现的变化，使三者的界限不太清晰，所W3C对web标准提出了规范化的要求，也就是一些代码规范：
（1）结构方面：标签字母小写，要闭合，不允许随便嵌套。
（2）对于 css 和 js 来说
尽量使用外链 css 样式表和 js 脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
样式尽量少用行间样式表，使结构与表现分离，标签的 id 和 class 等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
-不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
21 FireFox 中标签的居中问题的解决办法
此时的代码在火狐中，b不能居中，需要添加样式margin:0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="a" style="width:200px;border:1px solid red;text-align:center;">
<div id="b" style="background-color:blue;width:30px;margin:0 auto"> </div>
</div>
</body>
</html>
22 flex的相关题目
22.1 flex用法场景
- 场景一：移动端和 PC 端布局中；能够高效解决间距调整的问题（移动端布局和 PC 端布局）
- 场景二：能快速高效实现元素水平垂直居中（点击删除的弹窗）
- 场景三：能够实现快速元素均分，避免了百分比设置的不确定性
- 场景四：快速实现多列布局，能高效实现瀑布流布局
- 场景五：后台管理系统的两栏和三栏布局
22.2 flex属性值
flex属性
flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto 与 1 1 auto 相同。
none 与 0 0 auto 相同。
initial 设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。
<!-- flex属性是 flex-grow（放大）、flex-shrink（缩小）、flex-basis（宽度）的简写属性。
flex-grow默认值为 0，当值大于 0 时，当父元素有剩余空间时当前元素放大，父元素没有剩余空间时，该元素不放大。
flex-shrink默认值为 1，父元素有剩余空间时，该元素不缩小，父元素没有剩余空间时，该元素缩小。
flex-basis相当于 width 属性。 -->
以flex:0 1 100px;为例，表示如果父元素有剩余空间，当前元素不放大，父元素没有剩余空间，当前元素会缩小，此时里面的宽度为100px。
flex 后面跟的值
flex:1; 相当于 flex:1 1 0%; 表示有剩余空间，放大，没有剩余空间，不缩小
flex:auto; 相当于 flex: 1 1 auto; 有剩余空间，方法，没有剩余空间，缩小
flex:none; flex :0 0 auto;
22.3 Flex 的横向平铺填充
让父元素触发弹性和也就是 display:flex;然后让所有的子元素均分使用 flex:1;
<!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: 1000px;
height: 50px;
display: flex;
}
span{
flex: 1;
background-color: pink;
}
</style>
</head>
<body>
<!-- Flex 的横向平铺填充 -->
<div>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</div>
</body>
</html>
22.4 Flex案例
假设有5个小盒子，设置的flex-shrink（缩小）分别为 1 ： 1 ： 1 ： 2 ： 2，一共七份，而父容器的宽度为500px,子项的flex:basis设置为120px,此时分别溢出多少。
此时子项的宽度是120 × 5 = 600 px ,父容器500px 超出父容器 100px,
此时超出的部分就要进行收缩，一共 100 ×1 × 3 + 100 × 2 × 2 = 700
此时分别溢出 100× 1 ÷ 700 × 100 = 14px
2份的 28px
所以比例为一的实际 120-14 = 106px
比例为 2的实际为 120 - 28 = 92px(宽度包含边框）
<!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{
width: 500px;
height: 300px;
/* background-color: pink; */
/* border: 1 solid black; */
display: flex;
}
.A,.B,.C{
/* 缩放 */
flex-shrink: 1;
flex-basis: 120px;
background-color: pink;
border-right: 1px solid black;
}
.D,.E{
flex-shrink: 2;
flex-basis: 120px;
border-right: 1px solid black;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
</div>
</body>
</html>
23 父元素 visibility：hidden；子元素设置 visibility：visible，子元素显示吗
这时候子元素是显示的，原理如下：
- 当只是给父元素添加 visibility：hidden，子元素会继承父元素的 visibility：hidden 的
值，也会跟着父元素隐藏。 - 如果给父元素添加 visibility：hidden；同时在给子元素添加 visibility：visible，子元
素是显示的。
原因： 添加给子元素 visibility：visible 是大于父元素添加的 visibility：hidden 的。所以优先执行子元素的 visibility：visible 属性。
<!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>
.father{
width: 300px;
height: 300px;
background-color: pink;
/* 只给父元素设置时，都会隐藏 */
visibility: hidden;
}
.son{
width: 100px;
height: 100px;
background-color: skyblue;
/* 此时子元素会显示 */
visibility: visible;
}
</style>
</head>
<body>
<!-- visibility -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
24、渐变
- CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡
- CSS3 定义了两种类型的渐变（gradients）：使用都是 background 属性
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向,语法：background-image: linear-gradient(direction, color-stop1, color-stop2, …);
使用角度渐变 background-image: linear-gradient(angle, color-stop1, color-stop2);
<!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: 300px;
/* 渐变 默认从上到下 */
/* background-image: linear-gradient(pink,skyblue); */
/* 从左到右 */
/* background-image: linear-gradient(to right,pink,skyblue); */
/* 从左上到右下 */
/* background-image: linear-gradient(to bottom right,pink,skyblue); */
/* 使用角度进行渐变 0deg 从下往上
90deg 从左往右
180 从上往下
-90 从右往左
*/
/* 从左下 到右上 */
/* background-image: linear-gradient(45deg,#e66465, #9198e5); */
/* 多个颜色结点的改变 */
/* background-image: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet); */
/* 重复的线性渐变 */
/* 下面的意思就是讲一个盒子的 大小按照 所进行划分的百分比进行颜色的渐变
设置的宽度为 0-20% 所以能够划分5 分
*/
background-image: repeating-linear-gradient(red,orange 10%,green 20%);
}
</style>
</head>
<body>
<!-- gradients 渐变 -->
<div></div>
</body>
</html>
- 径向渐变（Radial Gradients）- 由它们的中心定义
为了创建一个径向渐变，你也必须至少定义两种颜色节点。
颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。
默认情况下，渐变的中心是 center（表示在中心点），
渐变的形状是 ellipse（表示椭圆形），
渐变的大小是 farthest-corner（表示到最远的角落）。
语法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!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: 200px;
height: 200px;
margin-bottom: 10px;
/* 默认 从中心开始进行渐变*/
background-image: radial-gradient(pink,skyblue,rgb(231, 231, 105));
/* 不均匀进行变化 */
/* background-image: radial-gradient(pink 20%,skyblue 40%,rgb(231, 231, 105) 60%); */
/* background-image: radial-gradient(red 15%,yellow 15%,green 60%); */
/* 设置形状 它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse*/
/* background-image: radial-gradient(circle,red,orange,yellow); */
/* background-image: radial-gradient(ellipse,pink,skyblue,rgb(231, 231, 105)); */
}
.box1{
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
/* 重复的 径向渐变 */
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
.box2{
/* 表示到最远的角落 farthest-corner */
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
</style>
</head>
<body>
<!-- 径向渐变 -->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
</body>
</html>
25 一条 0.5px 的线，几种方法
- viewport 只针对于移动端，只在移动端上才能看到效果
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5">
- 使用 transform 的 scale 把线条高度缩小一半，新边框就相当于0.5px了。
<!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: 200px;
height: 200px;
}
.box{
background-color: pink;
margin: 0 auto;
position: relative;
}
/* 通过伪元素进行实现 */
.box::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 200%;
height: 1px;
background-color: blue;
transform-origin: 0;
transform: scale(0.5);
}
.box1{
background-color: skyblue;
margin: 10px auto;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 通过 定位 + 伪元素 + transfrom (scale)缩放实现 -->
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
- border: 0.5px solid red;//ios8 以上支持，以下显示为 0
- 渐变模拟：设置 1px 通过 css 实现的背景图片，50%有颜色，50%透明
优点：兼容性较好，单边框、多边框可实现，大小、颜色可配置。
缺点：代码量多、无法实现圆角、同时占用了背景样式
<!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: 200px;
height: 200px;
}
.box{
background-color: pink;
margin: 0 auto;
position: relative;
}
/* 通过伪元素进行实现 */
.box::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
/* background-color: blue; */
/* 此时配合 渐变来进行实现 */
background-image: linear-gradient(to bottom,transparent 50%,green 50%);
}
.box1{
background-color: skyblue;
margin: 10px auto;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 通过伪类的方式进行实现 -->
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
- 利用阴影
优点：兼容性较好，单边框、多边框、圆角可实现，大小、颜色、可配置。
缺点：模拟效果强差人意，颜色不好配置。 - 边框图片:
缺点：图片边缘模糊，大小、颜色更改不灵活。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5">
<title>Document</title>
<style>
.border{
width: 200px;
height: 200px;
background-color: pink;
margin:0 auto;
/* 此时将下面的边框设置为 透明 */
border-bottom: 1px solid transparent;
/* 利用 border-image 和 渐变进行实现 */
/*
border-image-source：定义边框图像的路径；
border-image-slice：定义边框图像从什么位置开始分割；
border-image-width：定义边框图像的厚度（宽度）；
border-image-outset：定义边框图像的外延尺寸（边框图像区域超出边框的量）；
border-image-repeat：定义边框图像的平铺方式。
*/
/* 对其优化 保留其中一种颜色 将另一种颜色设置为 透明 */
/* border-image: linear-gradient(to bottom,red 50%,blue 50%) 0 0 100% 0; */
border-image: linear-gradient(to bottom,transparent 50%,blue 50%) 0 0 100% 0;
}
.box{
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="border"></div>
<div class="box"></div>
</body>
</html>
26 行内元素有哪些，块级元素有哪些，空元素有哪些
- 行内元素：不能实现宽度高度，横向显示
a,span,i,em,var,b,strong,sup,sub,s,del,label,font,mark - 块级元素：能设置宽度高度，纵向显示，并且默认站宽一整行
h1~h6,p,div,ul,ol,li,dl,dt,dd,table,form,hr,fieldset,legend,marquee,iframe,header,
nav,footer,section,main,figure,figcaption,hgroup,aside,article - 行内块元素：能设置宽度高度，并且横向显示
input,img,select,textarea - 空元素：就是单标签
input,img,br,meta,link,hr - 置换元素：因为默认自带宽度告诉浏览器能进行根据类型路径加载对应的内容
input,img,select,textarea
27 Html 和 XHTML 有什么区别?
XHTML的概念：
XHTML 指可扩展超文本标签语言，目标是取代 HTML，与 HTML 4.01 几乎是相同的，是更严格更纯净的 HTML 版本，是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。
二者的区别：
- 含义不同：HTML 是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XMl 的置标语言
- 最主要的不同
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭
- XHTML 标签名必须用小写字母
- XHTMl 文档必须拥有根元素在 XHTML 中，html、head、body都是必需的标签。
- XHTML 必须设置标签的 xmlns 属性，且其值为“http://www.w3.org/1999/xhtml”。
- XHTML 任何属性值要么用单引号引起来，要么用双引号引起来。如 class=page 就是不合法的，而class='page’和 class="page"均是合法的。所有属性必须有值。有些属性，比如标签的 checked 属性，在 HTML 中可以使用简写形式，即<input type=“checkbox” name="rel"checked>数据，然后在 XHTML 中，必须这样编写：数据
28 浏览器渲染页面的过程
DOM构建步骤： 一般先进行请求服务器得到HTML文件，此时得到的文件是以字节的形式进行显示，然后将字节转换为能看懂的字符，因为HTML是标记语言，<>用来标记不同的结构，此时机器不能看懂，所以浏览器把字符转换为token(符号标签)，然后进行转换为节点对象，最后将这些节点对象结合在一起，形成DOM，浏览器自己的语言。
CSSOM 构建步骤与DOM类似。
渲染树： 是由DOM和CSSOM结合而成的
执行过程：
- 用户输入 url 地址，浏览器根据域名寻找 IP 地址
- 浏览器向服务器发送 http 请求，如果服务器段返回以 301 之类的重定向，浏览器根据相应
头中的 location 再次发送请求 - 服务器端接受请求，处理请求生成 html 代码，返回给浏览器，这时的 html 页面代码可能
是经过压缩的
浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染 - 解析渲染该过程主要分为以下步骤：
- 解析 HTML----构建 DOM 树----DOM 树与 CSS 样式进行附着构造呈现树------布局、绘制
- 详细过程如下：
- 1)用户输入网址（假设是个 html 页面，并且是第一次访问），浏览器向服务器发出请求，
服务器返回 html 文件。 - 2)浏览器开始载入 html 代码，发现head标签内有一个link标签引用外部 CSS 文件。
- 3)浏览器又发出 CSS 文件的请求，服务器返回这个 CSS 文件。
- 4)浏览器继续载入 html 中body部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染
页面了。 - 5)浏览器在代码中发现一个img标签引用了一张图片，向服务器发出请求。此时浏览器不
会等到图片下载完，而是继续渲染后面的代码。 - 6)服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器
需要回过头来重新渲染这部分代码。 - 7)浏览器发现了一个包含一行 Javascript 代码的script标签，赶快运行它。
- 8)Javascript 脚 本执 行 了 这条 语 句 ，它 命 令浏 览 器 隐藏 掉 代 码中 的 某个 style
（style.display=”none”）。突然少了这么一个元素，浏览器不得不重新渲染这部分代码。 - 9)终于等到了/html的到来，浏览器长舒一口气
29、html5 有哪些新特性、移除了那些元素
29.1 新特性
h5 超文本标记语言的第五次重大的修改 前端三层
结构层 html :新增骨架 新增语义化标签 媒体标签
- 新的语义元素，
比如 header, footer, article, section。
- 新的表单控件，比如数字、日期、时间、日历和滑块。
- 强大的图像支持（借由 canvas 和 svg）
- 强大的多媒体支持（借由 video和 audio）
- 强大的新 API，比如用本地存储取代 cookie。
样式层：阴影 选择器 动画 animation
行为层 存储功能
29.2 移除的元素
- acronym
- applet
- basefont
- big
- center
- dir
- font
- frame
- frameset
- noframes
- strike
- tt
30、Html5 中 datalist 是什么
含义和概念：
datalist 标签规定了 input元素可能的选项列表。是 HTML5 新增的一个标签
datalist 标签被用来在为 input 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
使用 input 元素的 list 属性来绑定 datalist 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- datalist 是h5新增的，用于input中
input 的list属性
语法：
<input list="datalist_id">
datalist_id 规定绑定到 <input> 元素的 datalist 的 id。
-->
<input list="datalist_id">
<datalist id="datalist_id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</datalist>
</body>
</html>
运行截图：
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
