HTML及CSS面试题1

**面试题及答案仅供参考，如果有更优解的回答，欢迎各位小伙伴评论在下方~**😎

1、图片标签中alt和title之间的区别？

1. 相同点：都属于提示文本
2. 不同点：
   a. alt：只有浏览器加载不成功的时候才会显示，文本能被选中，会占据位置
   b. title：无论是不是加载成功都会显示提示，文本不能被选中，不占据位置

2、css基本语法有几个部分组成？

● 由两部分组成，分别是：选择器和样式规则(样式声明)，即：选择器和花括号

3、样式声明有几个部分组成，分别是？

● 由两部分组成，分别是：属性和属性值

4、外部样式表通过Link引入和通过@import导入，两者之间的区别？

1. 语法不一样
   a. Link：属于标签语法，通过link单标签引入
   b. @import：属于css语法，必须携带style标签
2. 加载顺序不同—尤其低版本的浏览器
   a. Link：Link引入的文件，结构和样式是同时加载的显示的，几乎没有很大差别
   b. @import：@import导入的文件，先加载结构，后加载样式
   c. 两者在网速慢的时候，link引入还是会比较好看，但是@import会杂乱
3. 操作dom的问题，即：考虑js问题
   a. Link：在使用js的时候，操作页面元素的样式，通过link引入的样式可以直接完成dom操作
   b. @import：@import是不能完成js的dom操作的
4. 兼容性的问题—能不能被低版本的浏览器支持
   a. Link：兼容性比较高，几乎浏览器都支持
   b. @import：兼容性不太好，比较低

5、css的层叠性(层叠规则)是指？

1. css样式在针对同一元素配置同一属性时，根据层叠规则权重来处理冲突，选择应用权高的css选择器所指定的属性，一般也被描述为：权重高的覆盖权重低的，因此也称作层叠
2. 当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式
3. 相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式
4. 注意：!important的权重值是最高的

6、什么是属性的继承？

● 无论属性/属性值放在父元素还是子元素上都可以实现，这种属性被称为：继承性的属性

7、border:none和border:0的区别？

1. 相同点：两者都可以取消边框
2. 不同点：
   a. none为没有的意思，也就是：不设置的意思，也就不会被加载渲染，从而能够节约代码，降低浏览器的渲染情况
   b. 0代表的是有值，值为0，浏览器在渲染的时候，border:0会被加载渲染，只不过渲染的值为0

8、实现单行文本溢出时产生省略号的效果需要定义？

1. 容器宽度：width:value
2. 强制文本在一行内显示：white-space:nowarp
3. 溢出内容为隐藏：overflow：hidden;
4. 溢出文本显示省略号：text-overflow:ellipsis

9、元素类型分为几类，分别是？

● 共分为三类，分别是块级元素、行内元素、行内块元素

1. 块级元素：默认是纵向排列，默认独占一整行，能设置宽和高，主要用于区块划分
2. 行内元素：默认是横向显示，不能实现宽高，主要用于独立文本的修饰
3. 行内块元素：既遵循行内元素也遵循块级元素的特点，默认横向显示，还能实现宽高设置

10、隐藏元素的方法，分别是？

● 隐藏元素可以分为3大类:
○ 完全隐藏：元素从渲染树中消失，不占据空间。
○ 视觉上的隐藏：屏幕中不可见，占据空间。.
○ 语义上的隐藏：读屏软件(给残障人士使用的)不可读，但正常占据空。

1. 完全隐藏：
   a. display:none——不占据页面空间，也就是
   b. hidden属性——不占据页面空间，注意：它是直接放在标签里的，是属性，不是样式
2. 视觉上的隐藏：
   a. visibility:hidden——占据页面空间
   b. height:0px width:0px——肉眼看不到占据空间，但是它在渲染树里
   c. opacity:0——占据页面空间
   d. transform:scale(0)
3. 语义上的隐藏：
   a. 将aria-hidden属性设置为true，使读屏软件不可读
   b. 代码示例：