前端面试问题---HTML、CSS

最新推荐文章于 2025-12-04 17:59:42 发布

原创最新推荐文章于 2025-12-04 17:59:42 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端面试 #html #css

前端面试专栏收录该内容

1 篇文章

订阅专栏

本文涵盖前端面试中的核心知识点，包括浏览器内核、HTML语义化、常用元素、CSS选择器、盒子模型、BFC应用、定位方式及响应式设计，是前端开发者面试前的必备指南。

前端面试问题----html、css

常见浏览器内核？

IE: IE内核（Trident内核）
safari：webkit内核
-谷歌：Blink内核
欧鹏：Blink内核
火狐: Firefox内核

如何理解HTML语义化？

让人更容易读懂代码（增加代码的可读性）；
让搜索引擎更容易读懂（SEO）

常用的块级元素和行内（内联）元素？

块级元素：div、h1-h6、p、ul、ol、li、table等
行内元素：a、span、i、b、input、img、button等

css中选择器有哪些？

通配符选择器：*
标签选择器：p
类选择器：.desc
id选择器：#box
后代选择器：ul li
直接后代选择器：ul > li
兄弟选择器：p~p p+p
群组选择器：.desc,#box,ul
属性选择器：input[type=“text”]
伪类选择器：:last-child

盒子模型

标准盒模型：width = contentWidth + paddingLeftRight+ borderLeftRight + marginLeftRight
IE盒模型：width = contentWidth + paddingLeftRight + borderLeftRight
补充：
offsetWidth = contentWidth + paddingLeftRight + borderLeftRight（没有外边距）；
控制offsetWidth宽度始终为100px:box-sizing:border-box;

margin纵向重叠问题

margin-top和margin-bottom会发生重叠
中间空的标签元素会被忽略

// AAA和BBB之间的距离是多少？
<style>
   p{
   	font-size:16px;
   	line-height:1;
   	margin-top:10px;
   	margin-bottom:15px;
   }
</style>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

答案：15px

margin负值

margin-top和margin-left设置负值：元素会向上和向左移动；
margin-right设置负值：自身元素不受影响，右侧元素会向左移；
margin-bottom设置负值：自身元素不受影响，下方元素会向上移

什么BFC？BFC的应用？

BFC：一块区域内部区域如何渲染都不会影响外界的元素
形成BFC常见场景：
1. float不是none
2. overflow不是visible
3. position是absolute或fixed
4. display是flex inline-block
形成BFC常见场景：
清除浮动（overflow:hidden）

float布局，清除浮动（clearfix）

清除浮动
1. 空元素加 clear:both;
2. 给父元素加 overflow:hidden;
3. afert伪类
4. 父级元素同时浮动
5. 父级元素固定高度

// 手写clearfix
.clearfix:after{
   content:"";
   height:0;
   display:block;
   clear:both;
}
.clearfix{
   zoom:1;  /*兼容IE*/
}

flex画色子？？

??后期补充

CSS的定位position

relative：相对于自身定位
absolute：相对于最近一层的父元素定位
fixed: 相对于浏览器本身
static: 不定位
sticky：磁贴定位（目前兼容不好）

水平垂直居中对齐？

水平对齐

inline元素：text-align:center;

block元素：margin:auto;

absolute元素：left50% + margin-left的负值

居中对齐

inline元素：line-height = height;

absolute元素：top和margin-top的负值

absolute元素：transform:translate(-50%,-50%)

absolute元素：top、left、right、bottom=0 + margin:auto;

line-height的继承问题？

如果是px：例如30px，继承30px
如果是数字的倍数：例如2，继承2
如果是相对单位（%和em）:继承计算出来的数值

rem是什么？

相对长度单位，相对于根元素