css面试题及涉及的知识点

已于 2022-05-31 20:18:46 修改
阅读量129 收藏
点赞数 1
分类专栏： 前端面试知识点合集 文章标签： css 面试 css3
于 2022-05-28 22:11:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25529689/article/details/125010547
版权

css面试题及涉及的知识点

在这里插入图片描述

1.布局

1). 如计算下面代码div1的offsetWidth是多大？

在这里插入图片描述
结果是122px。
盒子模型宽度如何计算出来的？
offsetWidth = 内容宽度 + 内边距 + 边框 = 100 + 10X2 + 1X2 = 122px

2）margin纵向重叠的问题？

如计算下面AAA到BBB标签之间的距离？
在这里插入图片描述
答案是15px；
相邻两个margin会重叠，使用值比较大的；同时空的标签会省略掉。

3）margin负值问题，如对margin 的 left right top bootom 设置负值有何效果？

  • margin-left 负值会向左移。
  • margin-right 负值 本身不受影响，后面的元素会向左移动，将它向左挤过去。
  • margin-top 负值 会向上移。
  • margin-bottom 负值 本身不受影响，下面的元素会向上移动，将它向上挤过去。

4）BFC的理解和应用

a. 什么是BFC？
答：一块独立渲染的区域，内部元素的渲染不会影响外部元素。
b. 形成BFC的常见条件：
1）float不是none
2) position 是absolute 或 fixed
3) overflow 不是 visible
4）display 是flex or inline-block
c. BFC应用：清除浮动。
例如下图文字和图片是在同一个div里面，但是图片太大抛出了背景区域，如何让图片和文字在同一个背景下就用到了bfc的概念：
在这里插入图片描述

   <style type="text/css">
        .div1 {
            background-color: #f1f1f1;
        }
        .left {
            float: left;
        }
        .bfc {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="div1 bfc">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" class="left">
        <p class="bfc">这是一段文字</p>
    </div>
</body>

代码中添加bfc后就会让图片和文字在同一个背景里面。
在这里插入图片描述

5）float布局，手写clearfix.

常见的是圣杯布局和双飞翼布局。
圣杯布局和双飞翼布局常用在：
1）三栏布局，中间一栏最先加载和渲染（内容最重要）
2）两侧内容固定，中间内容自适应。
3）一般用在PC端。
例如下图布局：
在这里插入图片描述
圣杯布局和双飞翼布局技术总结：
1）使用float布局
2）使用margin负值，以便和中间内容横向重叠
3）防止中间内容被两侧覆盖，一个使用padding，一个使用margin

圣杯布局：

    <style type="text/css">
        body {
            min-width: 550px;
        }

        #header {
            background-color: #ccc;
            text-align: center;
        }

        #footer {
            background-color: #ccc;
            text-align: center;
            clear: both;
        }

         #center {
            background-color: yellow;
            width: 100%;
            text-align: center;
        }

        #left {
            position: relative;
            background-color: blue;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }

        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }
        
        #container .column {
            float: left;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div> 
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>

结果如下图所示：
在这里插入图片描述
双飞翼布局：

    <style type="text/css">
        body {
            min-width: 550px;
        }

        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }

        #main-warp {
            margin-left: 190px;
            margin-right: 190px;
        }

        #left {
            width: 190px;
            height: 200px;
            background-color: blue;
            margin-left: -100%;
        }

        #right{
            width: 190px;
            height: 200px;
            background-color: red;
            margin-left: -190px ;
        }
        
        .col {
            float: left;
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>

    <div id="left" class="col">
        this is left
    </div>

    <div id="right" class="col">
        this is right
    </div>
</body>

结果如下图：
在这里插入图片描述

		/* 手写clearfix */
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }

6) flex 画色子

   <style type="text/css">
        .box {
            display: flex;
            width: 200px;
            height: 200px;
            border-radius: 10px;
            border: 1px solid #ccc;
            padding: 10px;
            justify-content: space-between;
        }
        
        .item {
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: grey;
            border: 1px solid #ccc;
        }

        .item:nth-child(2){
            align-self: center;
        }

        .item:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>
<body>   
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>

效果图：
在这里插入图片描述

2.定位

1）absolute和relative分布依据什么定位？

relative是依据自身定位；
absolute依据最近一层的定位元素定位，其中定位元素包括relative、absolute、fixed、body等。

2）居中对齐方式

2.1 水平居中方式

  • 1）inline 元素： 需要在上一层元素上设置text-align:center
  • 2） block 元素：maigin:auto（需要设置宽度）
  • 3）absolute元素：left:50% + margin-left 负值（需要在上一层设置position:relative, 本层设置宽度，margin-left等于负的宽度的一半）
    <style type="text/css">
        .container {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
        }

        .item {
            background-color: grey;
            color: white;
        }

        .container-1  {
            text-align: center;
        }

        .container-2 .item {
            width: 500px;
            margin: auto;
        }

        .container-3 {
            position: relative;
            height: 100px;
        }

        .container-3 .item {
            position: absolute;
            width: 300px;
            height: 100px;
            left: 50%;
            margin-left: -150px;
        }

    </style>
</head>
<body>
    <div class="container container-1">
        <span class="item">这是第一段文字</span>
    </div>

    <div class="container container-2">
        <div class="item">这是第二段文字</div>
    </div>

    <div class="container container-3">
        <div class="item">这是第三段文字</div>
    </div>
</body>

效果图：
在这里插入图片描述
2.2 垂直居中方式

  • 1）inline元素：line-height的值等于height值 需设置子元素高度
  • 2）absolute元素: top:50% + margin-top负值 需设置子元素宽高
  • 3）absolute 元素： left : 50% top : 50%, transform: translate(-50%,-50%)
  • 4)absolute 元素： top left bottom right 都 = 0 + marign:auto 需设置子元素宽高
   <style type="text/css">
        .container {
            height: 100px;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
        }

        .item {
            background-color: #ccc;
        }

        .container-1 {
            text-align: center;
            height: 100px;
            line-height: 100px;
        }

        .container-2 {
            position: relative;
        }

        .container-2 .item {
            position: absolute;
            width: 200px;
            height: 50px;
            left: 50%;
            margin-left: -100px;
            top: 50%;
            margin-top: -25px;
        }

        .container-3 {
            position: relative;
        }

        .container-3 .item{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

        .container-4 {
            position: relative;
        }

        .container-4 .item {
            position: absolute;
            width: 300px;
            height: 100px;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container container-1">
        <span class="item">这是第一段文字</span>
    </div>

    <div class="container container-2">
        <div class="item">这是第二段文字</div>
    </div>

    <div class="container container-3">
        <div class="item">这是第三段文字</div>
    </div>

    <div class="container container-4">
        <div class="item">这是第四段文字</div>
    </div>
</body>

效果图如下：
在这里插入图片描述

3.图文样式

line-height如何继承

1）写具体数值，如 30px ,直接继承
2) 写比例，如 1.5 ，则继承该比例。
3）写百分比，如200%，则继承计算出来的值

 	body {
            font-size: 20px;
            line-height: 1.5;
        }

        p {
            font-size: 16px;
        }

<body>
    <p>AAA</p>
</body>

在这里插入图片描述

4.响应式

1）rem是什么？

  • 1)px是绝对长度单位

  • 2)em是相对长度单位，相对于父元素，不常用

  • 3)rem是相对长度单位，相对于根元素,常用于响应式

  <style type="text/css">
        html{
            font-size: 100px;
        }
        div{
            background-color: #ccc;
            margin-top: 10px;
            font-size: 0.16rem;
        }
    </style>
</head>
<body>
    <p style="font-size: 0.1rem;">rem 1</p>
    <p style="font-size: 0.2rem;">rem 2</p>
    <p style="font-size: 0.3rem;">rem 3</p>

    <div style="width: 1rem;">
        this is div1
    </div>

    <div style="width: 2rem;">
        this is div2
    </div>
    <div style="width: 3rem;">
        this is div3
    </div>
</body>

效果图：
在这里插入图片描述

2）如何实现响应式？

使用media-query 根据不同的屏幕宽度设置根元素 font-size。

 <style type="text/css">
        @media onlye screen and (max-width: 374px){
            /**以iphone5的宽度比例设置*/
            html{
                font-size: 86px;
            }
        }

        @media onlye screen and (min-width: 375px) and (max-width: 413px){
            /**以iphone6/7/8/x的宽度比例设置*/
            html{
                font-size: 100px;
            }
        }

        @media onlye screen and (min-width: 414px){
            /**以iphone6P的宽度比例设置*/
            html{
                font-size: 110px;
            }
        }

        body{
            font-size: 20px;
        }

        #div1 {
            width: 10rem;
        }
    </style>
</head>
<body>
    <div id="div1">
        this is div
    </div>
</body>

3）网页视口尺寸

  • window.screen.height/window.screen.width 屏幕的高度/宽度
  • window.innerHeight/ window.innerWidth 网页视口高度
  • document.body.clientHeight body高度
摸鱼的图图
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
服务器面试必备-网络知识点整理
网易搬砖选手
03-08 5万+
epoll的实现知道么？在内核当中是什么样的数据结构进行存储，每个操作的时间复杂度是多少？ epoll是Linux系统中提供的一种高效的I/O多路复用机制。其基于事件驱动的模型，可以有效地管理大量的并发连接。 在内核中，epoll使用一个红黑树（RB Tree）来存储所有的事件。这个红黑树是通过一个特殊的数据结构epoll_event来表示的，每个epoll_event对应一个文件描述符和其上感兴趣的事件。 每次调用epoll_wait函数，内核都会检查红黑树中的所有事件，并返回已经就绪（满足条件）
前端面试题
大脸小覃的博客
02-26 91
前端面试分析 css 1.盒子模型的宽度—offsetwidth offsetwidth = content+padding+border+margin 布局的时候有时候并不希望padding会撑大原来的盒子，所以css3中推出了box-sizing的属性,默认content-box（标准盒模型），另一个属性border-box（ie盒模型也叫怪异盒模型 ，content包括padding和border） 2.相邻元素之间margin重叠 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个
2023年CSS面试题集合
LQlove1的博客
03-05 4084
一、H5的新特性有哪些? 二、CSS3的新特性有哪些? 三、如何实现一个盒子水平垂直居中? 方法一：利用定位（常用方法,推荐） 方法二：利用 margin:auto; 方法三：利用 display:table-cell 方法四：利用 display：flex;设置垂直水平都居中 方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理) 方法六：利用 transform 四、CSS的盒模型 五、CSS选择器的优先级及CSS权重如何计算? 六、列举 5 个以上的 H5input 元素 type 属性值？
最新Web前端面试题精选大全及答案
HanXiaoXi_yeal的博客
01-07 18万+
HTML、CSS相关 1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是jpeg格式，可以把文件压缩到最小 在ps以jpeg格式存储时，提供11级压缩级别 2.请简述css盒子模型 一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。默认情况下，盒子的width和height属性只是设置content（内容）的宽和高， 盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框 盒子真正
十五道css面试题
m0_65450343的博客
04-25 6903
目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 中哪些属性可以继承？ 3.CSS3 新增伪类有那些？ 4、请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？ 5、浏览器是怎样解析 CSS 选择器的？ 6、在网页中应该使用奇数还是偶数的字体？为什么呢？ 7、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题] 8、为什么不建议使用统配符初始化 css 样式。 9、如果需要手动写动画，你认为最小时间间隔是
2022最新CSS高频面试题指南
CoderBin的博客
11-04 2491
大家好，我是CoderBin，本文将总结75道前端面试CSS中的高频考点，帮助同学们力闯秋招，赶快收藏起来学习啦💪。 如果发现文中有错别字或者不对的地方，欢迎在评论区留言指正，如果对某一知识点感到疑惑的也可以评论留言探讨🌻
2024最新css3面试题理论，前端css面试题，移动端面试题理论。
2401_84433974的博客
06-15 934
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大 的 灵活性。任何一个容器都可以指定为 Flex 布局。14、Flex父项常见属性。rem是一个相对单位，rem的是相对于html元素的字体大小，没********有继承性****em是一个相对单位，是相对于父元素字体大小，有继承性。****px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。19、什么是媒体查询。在pc端中，视口指的是在pc端中浏览器的可视区域；
CSS 核心知识点总结
大剑师兰特的GIS世界
05-27 2089
CSS（Cascading Style Sheets，层叠样式表）是用于描述网页文档如何呈现给用户的样式语言。它与HTML一起构成了网页设计的基础。以下是CSS的一些核心知识点归纳总结
Java面试题大全（2020版）
热门推荐
Java笔记
11-26 49万+
发现网上很多Java面试题都没有答案，所以花了很长时间搜集整理出来了这套Java面试题大全，希望对大家有帮助哈~ 本套Java面试题大全，全的不能再全，哈哈~ 一、Java 基础 1. JDK 和 JRE 有什么区别？ JDK：Java Development Kit 的简称，java 开发工具包，提供了 java 的开发环境和运行环境。 JRE：Java Runtime Environ...
2024css超全面试题css经典面试题css理论知识前端面试题css最全的题包括面试题多年的积累。
2401_84152991的博客
05-10 648
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
2023前端HTML+CSS最全面试题和答案汇总
02-09
内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。在手写Spring 源码的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：IOC、AOP、Bean生命周期、上下文、...
css面试题.docx
10-06
CSS面试题大全 CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页样式的语言，广泛应用于Web开发领域。本文总结了常见的CSS面试题，涵盖了CSS基础知识、布局相关、样式控制、选择器、css引入方式、动画...
前端面试题及答案.zip
04-18
"前端面试题及答案.zip"这个压缩包很可能包含了丰富的前端面试题目以及相应的解答，旨在帮助求职者或希望提升技能的前端工程师更好地准备面试。让我们来深入探讨一些可能涵盖的知识点。 1. HTML/CSS基础： - HTML...
前端面试题之Css相关题集.zip
06-21
随着技术的不断发展，CSS面试题也在不断更新，旨在测试开发者对于CSS的深入理解和实际应用能力。本题集主要涵盖了以下几个核心知识点： 1. **选择器**：包括基本选择器（如元素选择器、类选择器、ID选择器）、伪类...
CSS 创建：从入门到精通
wjs2024的博客
07-24 491
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
网格布局 HTML CSS grid layout demo
wuyujin1997的博客
07-23 543
* grid 或 grid-template-areas 都可以 *//* 左右居中 *//* 上下居中 */
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
qq_2511276124的博客
07-24 358
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
【前端学习笔记】CSS基础一
最新发布
qq_46056318的博客
07-24 800
一、什么是CSS 1.CSS 介绍 CSS（Cascading Style Sheets，层叠样式表）是一种用来控制网页布局和设计外观的样式语言。它使得开发者可以分离网页的内容（HTML）和表现形式（样式），提高了内容的可访问性，提供了更强的灵活性和控制性，也使得网页的维护和修改变得更加容易。 CSS 如何与 HTML 一起工作： 结构与样式分离： HTML 用于构建网页的结构，定义网页的内容，如文本、图片、链接等。 CSS 用于定义这些结构的表现形式，比如布局、颜色、字体大小和样式等。 引入方
"HTML和CSS面试题整理及基础知识回顾
面试题整理.docx 是一份关于 HTML 和 CSS 知识点的整理文档。这份文档可以帮助面试者回忆一些基础的 HTML 和 CSS 知识概念，以便在面试中更好地回答相关问题。下面是一些在文档中提到的 HTML 和 CSS 知识点： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值