【手撕面试题】HTML+CSS（高频知识点三）_reset

最新推荐文章于 2024-05-16 20:37:11 发布

2401_84182146

最新推荐文章于 2024-05-16 20:37:11 发布

阅读量488

点赞数 24

分类专栏：程序员文章标签： html css 前端

本文链接：https://blog.csdn.net/2401_84182146/article/details/138339407

版权

程序员专栏收录该内容

152 篇文章 0 订阅

订阅专栏

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 的区别

共同性：实现透明效果。

opacity：取值范围0到1之间，0表示完全透明，1表示不透明
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>

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

img-us3iELr0-1714446571657)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

2401_84182146

关注

24
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
【手撕面试题】HTML+CSS（高频知识点三）_reset

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

扫一扫