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

最新推荐文章于 2024-05-31 09:45:22 发布

2401_84170218

最新推荐文章于 2024-05-31 09:45:22 发布

阅读量817

点赞数 10

文章标签： html css 前端

本文链接：https://blog.csdn.net/2401_84170218/article/details/138238292

版权

我：呃~，浮动元素会脱离文档流(绝对定位元素也会脱离文档流)，导致无法计算准确的高度，这种问题称为：“高度塌陷”。

清除浮动常见的有以下三种方式，整出代码如下：

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

<style>
    *{margin: 0;padding: 0;}
    ul {
        list-style: none;
        border: 10px solid #ccc;
        overflow: hidden; /*触发BFC清除浮动*/
    }
    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; ：（不推荐使用，此方法已经过时）

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

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

714175200547)]
[外链图片转存中…(img-PSwsUEFw-1714175200547)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

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

2401_84170218

关注

10
点赞
踩
12

收藏

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

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

扫一扫