HTML-CSS面试总结
目录
1.行内元素和块级元素
2.CSS盒模型
3.position
4.display
5.清除浮动float
6.水平居中、垂直居中
7.BFC
9.css中实现动画
10.flex
11.!DOCTYPE
12.overflow
13.消除margin重合
14.div脱离文档流
15.margin-top和padding-top百分比的时候，是依据什么
16.数组的最大值和最小值
17.css选择器优先级顺序
18.为何 float 会导致父元素塌陷？
19.如何理解 HTML 语义化？
20. 重绘和回流
21.如何解决a标点击后hover事件失效的问题?
22. 点击一个input依次触发的事件
23.CSS中 link 和@import 的区别是什么？
24.css中rem、em、px、vw、vh
25.z-index
1.行内元素和块级元素
内联元素(inline)：
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
块级元素(block)：
address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
menu – 菜单列表
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
li
内联元素与块级元素的区别
内联元素：
1、内联元素不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。
2、内联元素不可以设置宽高
3、内联元素可以设置margin，padding，但只在水平方向有效。
块状元素：
1、块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
2、块级元素可以设置宽高
3、块级元素可以设置margin，padding
内联块状元素inline-block：
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现（可以设置宽高和margin值）。之后的内联对象会被排列在同一内联。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
关联：
可以通过修改display属性来切换块级元素和内联元素
块级：display:block;
内联：display:inline;
2.CSS盒模型
标准盒模型下盒子的大小 = content + border + padding + margin
怪异盒模型下盒子的大小=width（content + border + padding） + margin
可以为box-sizing赋三个值：
content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)
border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型
padding-box：将padding算入width范围
当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
3.position
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位
#box_relative { position: absolute; left: 30px; top: 20px; }
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。 （IE6不支持）
relative：生成相对定位的元素，相对于其在普通流中的位置进行定位
#box_relative { position: relative; left: 30px; top: 20px; }
static：默认值。没有定位，元素出现在正常的流中
4.display
display 属性规定元素应该生成的框的类型。
5.清除浮动float
https://blog.csdn.net/h_qingyi/article/details/81269667
1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
3.使用after伪元素清除浮动（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}4.使用before和after双伪元素清除浮动
6.水平居中、垂直居中
https://blog.csdn.net/weixin_37580235/article/details/82317240
水平居中
行内元素
首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;
如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;
块级元素
方案一：（分宽度定不定两种情况）
定宽度：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）
不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元
素，给父元素设置 text-align: center;
方案二：
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；
定宽度：设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);
不定宽度：利用css3新增属性transform: translateX(-50%);
方案三：
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
垂直居中
行内元素
单行行内元素：只需要设置单行行内元素的"行高等于盒子的高"即可；line-height: 300px;
多行行内元素：使用给父元素设置display:table-cell;和vertical-align: middle;属即可；
块级元素
方案一：首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；
定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);
不定高度：利用css3新增属性transform: translateY(-50%);
方案二：使用flexbox布局实现（高度定不定都可以）
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;
7.BFC
https://blog.csdn.net/sinat_36422236/article/details/88763187
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC的布局规则
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3.每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算。
如何创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
5、根元素自动形成BFC
BFC的作用
1.利用BFC避免margin重叠。
根据第二条，属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC
2.自适应两栏布局
BFC的区域不会重叠
3.清除浮动。
计算BFC的高度时，浮动元素也参与计算。
8.display：none；和 visibility：hidden区别 和透明度
display：none，若设置了此属性，则该元素以及他的所有后代元素都会隐藏，占据空间消失；
visibility：hidden，可以隐藏这个元素，但占据空间仍不变，仍影响布局。
其他区别：
1）visibility具有继承性，父元素设置此属性，子可继承，若给子设置visibility：visible则子可以显示出来；
2）visibility：hidden不会影响计数器的计数；
3）CSS3的transition支持visibility，但不支持display，由于transition可以延迟执行，所以可配合visibility使用纯CSS实现hover延时显示效果，提高用户体验。
opacity:检索或设置对象的不透明度.当他的透明度为0的时候,视觉上它是消失了,但是他依然占据着那个位置,并对网页的布局起作用。它也将响应用户交互。添加了该属性的元素,它的背景和元素内容也是会跟着变化的.
9.css中实现动画
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
div {
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
transform ：2D转换效果
- translate()：
- rotate()：
- scale()：
- skew()：
- matrix()：
transition：过渡效果
transition：是过渡属性，强调过渡。他的实现需要触发一个事件（如鼠标移上去，焦点点击等）才执行动画，他类似于flash的补间动画，设置一个开始和一个结束关键帧。
animation：是动画属性。他的实现不需要触发事件，设定好时间之后可以执行，且可循环一个动画，也类似于flash的补间动画，但可设置多个关键帧（用@keyframe定义）完成动画。
先区分一下css中的几个属性：animation（动画）、transition（过渡）、transform（变形）、translate（移动）。
CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，
它的属性值有以下五个：
旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix；
transform(变形)是CSS3中的元素的属性，而translate只是transform的一个属性值；
transform是transition（过渡动画）的transition-property的一个属性值。
animation（动画）、transition（过渡）是css3中的两种动画属性。animation强调流程与控制，
对元素的一个或多个属性的变化进行控制，可以有多个关键帧（animation 和@ keyframes结合使用）；
transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，
同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如hover）时才能获取样式，
这样就会产生过渡动画。
可以认为它有两个关键帧（Transition ＋ Transform ＝ 两个关键帧的Animation）。
10.flex
注意，设为 Flex 布局以后，子元素的
float、clear和vertical-align属性将失效。https://www.jianshu.com/p/4290522e1560
flex-direction：竖着排还是横着排
flex-wrap：一行放不下时，该怎么排列
flex-flow：上面两个综合
justify-content：内容居中还是其他
align-items：属性定义项目在交叉轴上如何对齐
align-content：多行时，多行之间排列方式
flex:1指的是什么？
让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
flex默认属性是什么？
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
flex-grow：放大属性，默认为0，即如果存在剩余空间，也不放大
flex-shrink：缩小属性（当宽度不够时，相对于其他子元素缩小的比例，值越大，缩小越大） ，果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-basis：项目的长度：可以是px ，等各种单位，%等
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
auto(1 1 auto) none(0 0 auto)
https://www.cnblogs.com/lvmylife/p/7670149.html
11.!DOCTYPE
不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
12.overflow
overflow 属性规定当内容溢出元素框时发生的事情。
visible
默认值。内容不会被修剪，会呈现在元素框之外。
hidden
内容会被修剪，并且其余内容是不可见的。
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit
规定应该从父元素继承 overflow 属性的值。
13.消除margin重合
上下元素处理为不同的BFC
14.div脱离文档流
1.float
2.position:fixed
3.position:absolute
15.margin-top和padding-top百分比的时候，是依据什么
相对最近父级块级元素的width，相对最近父级块级元素的width
16.数组的最大值和最小值
var a=[1,2,3,5];
alert(Math.max.apply(null, a));//最大值
alert(Math.min.apply(null, a));//最小值
17.css选择器优先级顺序
1.css中权重最高的样式为行内样式
2.其次是ID选择器
3.类、伪类和属性选择器
4.权重较低的是标签选择器和伪元素选择器
18.为何 float 会导致父元素塌陷？
float 的破坏性 —— float 破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这 一现象的最根本原因在于：被设置了 float 的元素会脱离文档流。其根本原因在于 float 的 设计初衷是解决文字环绕图片的问题。大家要记住 float 的这个影响。
19.如何理解 HTML 语义化？
所谓“语义”就是为了更易读懂，这要分两部分：
让人（写程序、读程序）更易读懂
让机器（浏览器、搜索引擎）更易读懂
20. 重绘和回流
https://www.jianshu.com/p/e081f9aa03fb
重绘：指的是当页面中的元素不脱离文档流，而简单地进行样式的变化，比如修改颜 色、背景等，浏览器重新绘制样式
回流：指的是处于文档流中 DOM 的尺寸大小、位置或者某些属性发生变化时，导致 浏览器重新渲染部分或全部文档的情况
相比之下，回流要比重绘消耗性能开支更大。另外，一些属性的读取也会引起回流，比如 读取某个 DOM 的高度和宽度，或者使用 getComputedStyle 方法。在写代码的时候要避免 回流和重绘。比如在笔试中可能会遇见下面的题目：
var data = ['string1', 'string2', 'string3'];
for(var i = 0; i < data.length; i++){
var dom = document.getElementById('list');
dom.innerHTML += '' + data[i] + ' ';
}
//上面的代码在循环中每次都获取 dom ，然后对其内部的 HTML 进行累加 li ，每次都会操
作 DOM 结构，可以改成使用 documentFragment 或者先遍历组成 HTML 的字符串，最后
操作一次 innerHTML 。21.如何解决a标点击后hover事件失效的问题?
改变a标签css属性的排列顺序
只需要记住
LoVe HAte原则就可以了：link→visited→hover→active
a:link：未访问时的样式，一般省略成aa:visited：已经访问后的样式a:hover：鼠标移上去时的样式a:active：鼠标按下时的样式
22. 点击一个input依次触发的事件
const text = document.getElementById('text'); text.onclick = function (e) { console.log('onclick') } text.onfocus = function (e) { console.log('onfocus') } text.onmousedown = function (e) { console.log('onmousedown') } text.onmouseenter = function (e) { console.log('onmouseenter') } 答案： 'onmouseenter'//鼠标进入 'onmousedown'//鼠标按下 'onfocus'//光标聚焦 'onclick'//鼠标抬起
23.CSS中 link 和@import 的区别是什么？
a. link属于HTML标签，而@import是CSS提供的，且只能加载 CSS
b. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
c. import只在IE5以上才能识别，而link是HTML标签，无兼容问题
d. link方式的样式的权重 高于@import的权重
e. 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制
24.css中rem、em、px、vw、vh
rem:rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。
em:它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。1px等于1分辨率
vw:viewpoint width，视窗宽度，1vw=视窗宽度的1%
vh:viewpoint height，视窗高度，1vh=视窗高度的1%
25.z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。