看看这些前端面试题，带你搞定高频知识点（三）

css html 面试题前端 2023-05-14 22:05:41 414人浏览泡泡鱼

摘要

触发BFC：（有缺陷，会造成内容的溢出隐藏）<style> *{margin: 0;padding: 0;} ul { list-style: none; border: 10px

触发BFC：（有缺陷，会造成内容的溢出隐藏）

<style>
    *{margin: 0;padding: 0;}
    ul {
        list-style: none;
        border: 10px solid #ccc;
        overflow: hidden; 
    }
    ul li {
        width: 100px;
        height: 100px;
        background-color: #f00;
        float: left;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

多创建一个盒子，并添加样式：clear:both; ：（不推荐使用，此方法已经过时）【相关推荐：WEB前端开发】

<style>
    *{margin: 0;padding: 0;}
    ul {
        list-style: none;
        border: 10px solid #ccc;
    }
    ul li {
        width: 100px;
        height: 100px;
        background-color: #f00;
        float: left;
    }
    ul div{
        clear: both;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <div></div>
    </ul>
</body>

给浮动的父元素添加after样式：（推荐使用）

<style>
    *{margin: 0;padding: 0;}
    ul {
        list-style: none;
        border: 10px solid #ccc;
    }
    ul li {
        width: 100px;
        height: 100px;
        background-color: #f00;
        float: left;
    }
    ul::after{
        content: '';
        display: block;
        clear: both;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

面试官：在网页中应该使用奇数还是偶数的字体？

我：呃~，应该使用偶数，因为偶数能让文字在浏览器上表现的更好一点，而且UI给前端一般的设计图都是偶数的，这样不管布局也好，转换px也好，方便一点。

面试官：position有哪些值？分别是根据什么定位？

我：呃~，position有如下五个值：
static：默认值，无定位，top、right、bottom、left 不起任何作用
relative：相对定位，不脱离文档流，只有left、top起作用
absolute：绝对定位，脱离文档流，上下左右以最近的定位父元素为参照系
fixed：脱离文档流，上下左右以浏览器视口为参照系
sticky：relative 与 fixed 的结合体

以fixed举例：

<style>
    *{margin: 0;padding: 0;}
    body{
        height: 2000px;
    }
    .main{
        width: 100px;
        height: 100px;
        left: 20px;
        top: 50px;
        background-color: #f00;
        position: fixed;
    }
</style>
<body>
    <div class="main">221</div>
</body>

面试官：写一个左中右布局占满屏幕，其中左右俩块固定宽200px，中间自适应，要求先加载中间块，请写出结构及其样式。

我：呃~，好的，整出代码如下：

<style>
    *{margin: 0;padding: 0;}
    body{width: 100vw;height: 100vh;}
    .container{
        height: 100%;
        width: 100%;
    }
    .container>div{
        float: left;
    }
    .zhong{
        height: 100vh;
        width: 100%;
        background-color: pink;
    }
    .zhong .main{
        margin: 0 200px;
    }
    .zuo{
        width: 200px;
        height: 100vh;
        background-color: #f00;
        margin-left: -100%;
    }
    .you{
        width: 200px;
        height: 100vh;
        background-color: #0f0;
        margin-left: -200px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="zhong">
            <div class="main">中</div>
        </div>
        <div class="zuo">左</div>
        <div class="you">右</div>
    </div>
</body>

面试官：什么是CSS reset？

我：呃~，CSS的默认有一些标签是有特定样式的，而我们因为不需要该样式所有要去除。
reset.css是一个CSS文件，用来重置CSS样式的，官网为：resetcss
Normalize.css是一个CSS样式重置表，为增强跨浏览器渲染的一致性。官网：NORMalize.css
两种的区别：
normalize.css：会保留有用的样式，比如 h1 的字体大小
reset.css：把所有样式都重置，比如 h1、h2、h3 的字体大小都进行了重置，保持了无样式
如果是普通项目，我个人更倾向于reset.css。

面试官：display: none; 与 visibility: hidden; 的区别？

我：呃~，display: none; ：隐藏元素但不占用位置。visibility: hidden; ：隐藏元素但占用位置
display: none; 和 visibility: hidden; 都会造成页面重绘，使得页面样式改变，但是display: none; 还会产生一次回流，改变了元素的位置。

面试官：opacity 和 rgba 的区别

共同性：实现透明效果。
1. opacity：取值范围0到1之间，0表示完全透明，1表示不透明
2. rgba：R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间。
两者的区别：
继承的区别，opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性。整出代码如下：

<style>
    .opacity{
        width: 100%;
        height: 200px;
        font-size: 50px;
        font-weight: bold;
        background-color: #f00;
        opacity: 0.5;
    }
    .rgba{
        width: 100%;
        height: 200px;
        font-size: 50px;
        font-weight: bold;
        background-color: #f00;
        background: rgba(255, 0, 0, .5);
    }
</style>
<body>
    <div class="opacity">这是opacity</div>
    <hr>
    <div class="rgba">这是rgba</div>
</body>

面试官：伪类与伪元素有什么区别？解释一下伪元素的作用

我：呃~，好的，两者的区别如下：
伪类使用单冒号，而伪元素使用双冒号。如 :hover 是伪类，::before 是伪元素
伪元素会在文档流生成一个新的元素，并且可以使用 content 属性设置内容

面试官：rem、em、vw、vh 的值各是什么意思？

我：呃~，好的，他们各值的意思如下：
rem：根据根元素(即 html)的 font-size
em：根据自身元素的 font-size
vw：viewport width
vh：viewport height

面试官：webkit表单输入框placeholder的颜色值能改变吗?

我：呃~，是可以修改的，整出代码如下：

<style>
    input::-webkit-input-placeholder{
        color: blue;
    }
</style> 
<body>
    <input type="text" placeholder="请输入内容">
</body>

（学习视频分享：web前端入门、编程基础视频）

以上就是看看这些前端面试题，带你搞定高频知识点（三）的详细内容，更多请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 看看这些前端面试题，带你搞定高频知识点（三）

本文链接: https://www.lsjlt.com/news/207045.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

看看这些前端面试题，带你搞定高频知识点（三）

触发BFC：（有缺陷，会造成内容的溢出隐藏）<style> *{margin: 0;padding: 0;} ul { list-style: none; border: 10px...

99+

2023-05-14

css html 面试题前端
看看这些前端面试题，带你搞定高频知识点（一）

定位：因为这个元素不确定是不是块级元素 (块级元素是否有宽高) 还是行内元素，所以需要使用 transform 属性来做负的 50%移动（基于当前元素宽高）。<style> html,body{ margin: 0;...

99+

2023-05-14

前端面试题 css html
看看这些前端面试题，带你搞定高频知识点（四）

<style> *{margin: 0;padding: 0;} html{ height: 37.5px; } .container{ width: 1rem; ...

99+

2023-05-14

css html 前端面试题
看看这些前端面试题，带你搞定高频知识点（六）

每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起...

99+

2023-05-14

javascript 前端面试题
看看这些前端面试题，带你搞定高频知识点（七）

1）我们要知道在全局的时候去得到这个this的话，this都会指向windows，因为我们在全局的情况下使用的东西都会被挂载到window上。<script> console.log(this) // 指向window ...

99+

2023-05-14

javascript 前端面试题
看看这些前端面试题，带你搞定高频知识点（八）

function foo(){ var a=2; function bar(){ //覆盖foo()内部作用域的闭包 console.log(a++); } return bar; } var bar = foo(); //fo...

99+

2023-05-14

javascript 前端面试题
看看这些前端面试题，带你搞定高频知识点（二）

【相关推荐：web前端开发】面试官：简要说说 title与h1的区别、b与strong的区别、i与em的区别？我：呃~，它们要实现的功能大体是一致的，但是有本质的区别，如下：title与h1的区别：title作用是概括网站信息，显示在网页的...

99+

2023-05-14

css html 前端面试题
看看这些前端面试题，带你搞定高频知识点（五）

flex布局：<style> *{margin: 0;padding: 0;} .container{ display: flex; } .left{ width: 300px; hei...

99+

2023-05-14

css html 前端面试题
web前端高频知识点面试题有哪些

今天小编给大家分享一下web前端高频知识点面试题有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。var、let、cons...

99+

2023-07-05
吃透了这些八大MySQL知识点，面试官一定觉得你很NB（建议珍藏）

在今年上半年的数据库使用状况调查中，笔者收集了众多国内外知名互联网公司的数据库使用情况，其中，国外GitHub、Airbnb、Yelp、Coursera均在使用MySQL数据库，国内阿里巴巴、去哪儿网、腾讯、魅族、京东的部分关键业务同样使用...

99+

2023-06-02