HTML与CSS面试题

奇七怪乖~

已于 2022-07-30 17:01:50 修改

阅读量561

点赞数 1

分类专栏：前端文章标签：面试前端 html css

于 2022-07-30 16:58:40 首次发布

本文链接：https://blog.csdn.net/qq_45259815/article/details/125749547

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

学习html和css也有一段时间了，总结了一些老师讲的面试题，发出来共享一下下，欢迎在评论区交流喔~

如果有题目的答案认为不对的，欢迎私聊我，我们一起探讨一下下~

1.网页有哪些部分组成？
答：html：结构
css：表现
js：行为 Java Script

2.img内的alt和title的区别是什么？
答：alt="图片不显示时出现的提醒内容"，title="鼠标点去图片那显示的内容"

3.get和post的区别是什么？
答：1. get是从服务器上获取数据，post是向服务器传送数据。

2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。
post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB

5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

4.CSS的基本语法是什么？
答：CSS选择器 {CSS属性名: 属性值; CSS属性名1: 属性值1;}

5.CSS中link和import的区别是什么？
答：差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，
而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
！！差别4：使用dom(document o bject model文档对象模型 )控制样式时的差别：
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

6.如果外部样式，内部样式与行内样式同时作用于一个html文件，优先级是怎样的？
答：! important > 行内样式 > 内部样式 > 外部样式
！！如果外部样式写在内部样式的后面，那么外部样式则会覆盖掉内部样式

7.字体大小的设置范围是多少？
答：谷歌浏览器默认的字体大小为16px,允许设置字体大小的最小字体为12px,字体不显示设置为0px
!!不要设负数,设置后使用的是默认的字体大小

8.如何提高用户打开页面的速度？网页性能优化方案(有很多个答案)
答：精灵图雪碧图 -----多个背景图（很小的背景图）
1.把多个小图标存放到一张大图上（精灵图、雪碧图）
2.压缩文件
3.减少请求次数（前端发送的ajax请求，找服务器拿数据）

9.什么是标准文档流？
答：默认情况下：盒子的排列顺序是从上至下（块级元素），从左至右（行内元素）排列

如果标签独占一整行，则称为块级元素如：div
行内元素：span

10.边框的三要素是什么？ ！！！边框的类型必须写
边框：border：1px soild red;
1px:边框的粗细
soild:边框的线条类型：soild 实线；dashed:虚线；dotted:点线 double：双实线
red:边框的颜色 transparent：透明色

默认颜色黑色，粗细1px

11.利用边框设置三角形

.triangle{
    width:400px;
    border-top:100px soild transparent;
    border-bottom:100px soild skyblue;
    border-left:100px soild transparent;
    border-right:100px soild transparent;
}

12.单行文本设置溢出省略号

   .box{

    /*单行文本溢出*/
    width: 400px;
    white-space: nowrap;
    /* 强制不换行 */
    overflow: hidden;
    /* 溢出变隐藏 */
    text-overflow: ellipsis;
    /* 设置省略号 --  会占位置 （之前文本的位置） */

}

    .box1{

    /*多行文本溢出 省略号*/
    width: 400px;
    overflow: hidden;
    /* 溢出变隐藏 */
    text-overflow: ellipsis;
    /* 设置省略号 --  会占位置 （之前文本的位置） */

    -webkit-line-clamp: 1;
    /* 几行 */
    display: -webkit-box;
    -webkit-box-orient: vertical; 
}

13.如何设置单行文本垂直居中

答：设置line-height的值等于height的值
没有多行文本垂直居中，是盒子垂直居中

14.怎么解决高度坍陷问题？

答：1）直接设置高度
2) 额外标签法
在最后一个浮动标签后添加一个新标签，给其设置clear：both
3）overflow:hidden 但是会隐藏，看不到内容给父元素加
4）伪元素选择器（给父元素加）
.父元素名::after{
content:' '; (设置为空)
display:block （把元素变成块元素）
clear:both （清除left浮动和right浮动）
}

15.浏览器是如何绘制页面的？
答：HTML解析-->CSS解析-->样式与结构合并-->页面布局-->页面绘制

16.什么是盒模型？怎么理解盒模型？
答：CSS盒子模型就是在网页设计中经常用到的一种思维模型，是CSS布局的基石，
主要规定了元素是如何显示元素间相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。
包含内容区、填充、边框和外边距，这就是盒模型。
https://blog.csdn.net/m0_46377462/article/details/104460370

17.设置元素显示与隐藏的方案有哪些？
答：方案一：display：none（隐藏）并且不再占据空间
方案二：visibility：hidden 仍占据空间
方案三：height：0
方案四：position：absolute；z-index：-999
方案五：transform：scale（0.5）缩小到0.5倍，盒子和字都缩小

18.伪元素选择器与伪类选择器有什么区别？
伪元素：::after， ::before， ::-webkit-scrollbar， " ::"
伪类：:hover ，:active， :link， :visited， ":"

伪类“事件”触发 ----“行为”
伪元素 ----“结构”

19.父子元素，如何设置子元素在父元素中垂直水平都居中？

情况一：已知父子元素的宽度高度
方案一：利用盒模型
--1 子元素加上 margin-top : （父高度-子高度）/ 2 px
给父元素加上边框 margin: 0 auto;

--2 父元素加上padding-top : （父高度-子高度）/ 2 px
    border-sizing: border-box
            margin: 0 auto;

方案二：利用定位
父元素: {
        position: relative;
   }
子元素: {
width: ___px;
height: ___px;
position: absolute;
top: 50%;
left: 50%;
margin-top: height/2 px
margin-left: width/2 px
}

情况二：未知父子元素的宽度高度
方案一：利用定位：
父元素: {
position: relative;（可以使用其他定位）
}
子元素: {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

方案二：定位 + transform 负值

方案三：flex布局 justify—content ：center
                    align-self:center

20.怎么理解语义化标签的？
见名知意

21.渐进增强和优雅降级
答：“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。
“渐进增强”观点则认为应关注于内容本身。内容是我们建立网站的诱因。
用通俗的话来说就是优雅降级是从高版本到低版本，渐进增强是从低版本到高版本

22.浏览器内核
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

23.解决图片留存空隙方案
图片的下方会留存3px大小的空白区域
产生原因：默认情况下，行内/行内块元素自带
解决方案：
1）设置基线属性vertival-align，只要不是默认（baseline）就行
2）手动修改元素显示类型：display （不常用）

24.怎么理解弹性盒模型？
答：1)是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有
恰当的行为的布局方式；
2)引入弹性盒布局模型的目的是提供一种更加有效的方式来对
一个容器中的子元素进行排列、对齐和分配空白空间
弹性盒子由弹性容器(Flexcontainer)和弹性子元素(Flexitem)组成

25.用的比较多的弹性盒模型配置项有哪些？
答：父元素：flex-direction justify-content align-items
子元素：align-self

26. px rem em 三者的区别
答：px 是针对设备本身，字体大小永远为当前的值
rem 是针对根元素设置字体大小
em 是针对父元素设置字体大小

以上，就是我总结的一些题目啦，有问题可以私我吼，也可以直接评论区见呀~