HTML+CSS经常遇见的问题

.WC.

于 2022-11-26 00:42:10 发布

阅读量215

点赞数

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

本文链接：https://blog.csdn.net/qq_54780032/article/details/128046027

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.HTML5新增的特性有哪些？

新增了语义化标签
新增了音频（audio）和视频（video）标签
新增了canvas和svg绘图
新增了地理定位（navigator.geolocation）
新增了拖拽API(drapable)
新增了多线程技术 web worker
新增了即时通讯web socket

2.CSS3新增特性

增加了transition渐变animation动画
选择器、阴影、弹性布局flex
媒体查询等

3.什么是回流（reflow）什么是重绘(repaint)？

回流：改变了宽高，增删了元素。

重会：改变了样式，改变了背景色，color之类。

4.经常遇到哪些浏览器兼容问题？如何解决问题的？

问题

innerText在IE中能正常工作，但在FireFox中却不行
CSS透明
盒子模型
块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
图片默认有间距
万能清除浮动
IE捉迷藏的问题
溢出显示省略号
IE6下图片下有空隙产生

解决方法：

参考地址: https://www.cnblogs.com/wxf-h/p/10513342.html

常见几种浏览器兼容性问题与解决方案_Whuiry的博客-CSDN博客

5.CSS伪类选择器有哪些?

(1) :before 在...之前

(2) :after 在...之后

(3) :active 点击

(4) :hover 鼠标悬停

(5) :first-letter 所有文字当中的第一个

(6) :first-line 所选元素当中的第一行

(7) :first-child 第一个子元素

(8) :last-child 最后一个子元素

(8) :nth-child() 获取子元素

(9) :nth-of-type 获取指定类型的子元素

等等。

6.说说你对flex布局的理

Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。

属性

display 属性决定是否使用flex布局

flex-direction 属性决定主轴的方向

flex-wrap 属性是否换行

flex-flow属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap

justify-content 属性定义了项目在主轴上的对齐方式

align-items 属性定义项目在交叉轴上如何对齐

align-content 属性定义了多根轴线（多行）在交叉轴上的对齐方式

参考地址：Flex弹性盒子布局详解 - Web1024 - 博客园 (cnblogs.com)

7.rem和em、VH、VW、PX的区别

px为像素的基本单位

em是相对于父级标签的字体大小来定义的

rem是相对于html标签的字体大小来定义的

vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。

8.canvas和svg的区别

都可以用来绘制图形，但是canvas是基于js来绘制的，svg是基于xml来绘制的.SVG绘制出来的是矢量图。

参考地址：浅谈Canvas和SVG的区别_会写BUG的老中医的博客-CSDN博客

9.什么是BFC？BFC的布局规则是什么？如何创建BFC？ BFC应用？

BFC 是 Block Formatting Context 的缩写，即块格式化上下文。 BFC 是CSS布局的一个概念，是一个环境，里面的元素不会影响外面的元素。

布局规则：Box是CSS布局的对象和基本单位，页面是由若干个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的 Formatting Context 。

创建：浮动元素 display：inline-block position:absolute

应用:

分属于不同的 BFC 时,可以防止 margin 重叠
清除内部浮动
自适应多栏布局

参考地址：什么是BFC？BFC的原理是什么？如何创建BFC？_前端的我的博客-CSDN博客_bfc的原理

10.清除浮动的方式有哪些?

浮动元素后新增标签，并且设置属性clear:both;
浮动元素的父标签设置属性overflow:hidden;
设置伪类选择器 XX:after{clear:both}

11.网站页面常见优化的手段?

优化图片资源的格式（优先级选择webp > jpeg > png > bmp）
使用压缩文件 min.js、min.css
使用浏览器缓存（cookie ， localStorage）
尽量减少请求次数
使用懒加载，避免一次性请求过多

12.常见的浏览器内核有哪些?

常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit

参考地址：参考地址

13.CSS选择器优先级

内联样式表的权值为 1000

ID 选择器的权值为 100

Class 类选择器的权值为 10

HTML 标签选择器的权值为 1

通过使用加法计算出来权重的大小

! important>内联样式表>id> 类（伪类）>标签

14.让一个盒子在父元素的中进行左右垂直居中的方法

给父元素设置成弹性盒子，子元素横向居中，纵向居中
父相子绝后，子部分向上移动本身宽度和高度的一半，也可以用 transfrom:translate(-50%,-50%)
父相子绝，子元素所有定位为0，margin设置auto自适应

15.什么是盒子模型？

w3c标准盒模型：width+左右内边距+左右边框+左右外边距

怪异盒模型：width+左右外边距

Centent-box:标准盒模型

Border-box：怪异盒模型

16.浏览器渲染机制

网页生成过程：

HTML 被HTML解析器解析成 DOM 树
css 则被css解析器解析成 CSSOM 树
结合 DOM 树和 CSSOM 树，生成一棵渲染树( Render Tree )
生成布局（ flow ），即将所有渲染树的所有节点进行平面合成
将布局绘制（ paint ）在屏幕上

17.五种定位

relative(相对定位):

static: 默认值没有定位

absolute（绝对定位):生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

fixed（固定定位）:生成绝对定位的元素，相对于浏览器窗口进行定位

sticky 粘性定位当前元素设置了粘性定位，滚动到顶部就会吸附顶部，往下滑还回到原来位置。 z-index规则

1、值可以是正整数、负整数或0，数值越大，盒子越靠上；

2、如果属性值相同，则按照书写顺序，后来居上；

3、数字后面不能加单位。

4、z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效

18.上下margin重合的问题

1、相邻块元素垂直外边距的合并

解决方案：尽量给只给一个盒子添加margin值

2、嵌套块元素垂直外边距的合并（塌陷）

解决方案：

可以为父元素定义上边框。

可以为父元素定义上内边距

可以为父元素添加overflow:hidden。

19.元素的alt和title有什么异同

不同点: 元素的alt是表示图片加载失败显示的文本内容，而title是表示鼠标悬停图片时显示的文本内容.。

相同点: 在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字

20.常见的块级、行级、空元素

在CSS中规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

我们在平常的项目中经常使用到的有 ·

行内元素有：span a b i img input select strong ·

块级元素有：div p h1-h6 ul table form ul ol li dl dt dd… ·

空元素：