HTML-CSS面试总结

目录

 

1.行内元素和块级元素

2.CSS盒模型

3.position

4.display

5.清除浮动float

6.水平居中、垂直居中

7.BFC

8.display：none；和 visibility：hidden区别 和透明度 

 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

<!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 += '<li>' + data[i] + '</li>';
}

//上面的代码在循环中每次都获取 dom ，然后对其内部的 HTML 进行累加 li ，每次都会操
作 DOM 结构，可以改成使用 documentFragment 或者先遍历组成 HTML 的字符串，最后
操作一次 innerHTML 。

21.如何解决a标点击后hover事件失效的问题?

改变a标签css属性的排列顺序

只需要记住LoVe HAte原则就可以了：

link→visited→hover→active

a:link：未访问时的样式，一般省略成a a: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 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。