css面试题（总结版）

最新推荐文章于 2024-06-09 07:13:10 发布
最新推荐文章于 2024-06-09 07:13:10 发布
阅读量36 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengdu__/article/details/132298576
版权

css3新特性

  1. 伪类选择器、伪元素选择器
  2. 圆角 border-radius
  3. 盒阴影 box-shadow
  4. 渐变：线性渐变和径向渐变
  5. 过渡 transition
  6. 动画
  7. . 媒体查询
  8. flex布局
  9. grid布局

盒模型

在这里插入图片描述

定位的方式

  • 绝对定位：相对于最近的已开启定位的父元素偏移
  • 相对定位：相对于自身偏移，如果元素没有已定位的父元素，那么它的位置相对于
  • 固定定位：相对于视口偏移
  • 静态定位 ： 元素的默认定位方式，无定位的意思
  • 粘性定位 ： 行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

响应式布局

媒体查询
px、rem、em、vh、vw
flex弹性布局
grid布局

什么是BFC

BFC直译为块级上下文、是一块独立渲染的区域，区域内的元素不会影响区域外的元素

开启BFC的方法
  1. 开启浮动
  2. 绝对定位、固定定位
  3. overflow除了visible以外的属性值
  4. 根元素就是一个BFC
  5. display为flex、inline-flex、inline-block、table

伪类和伪元素

伪类：伪类选择的是处于某种状态的元素，如:hover 、:active、:visited这种
伪元素：伪元素是对元素中的特定内容操作，如:first-child 、:before这种

怎样清除浮动

高度塌陷：子元素脱离文档流，父元素无子元素支撑高度，造成高度塌陷

  1. 给父元素添加高度
  2. 在父元素结尾添加空div，并设置clear：both
  3. 给父元素clearfix类添加伪元素（推荐）

.clearfix::after{
    content: "";
    display: block;
    clear: both;

引入css link 和@import引入的区别

  • link是HTML方式， @import是CSS方式
  • link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)
  • link可以通过rel="alternate stylesheet"指定候选样式
  • 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
  • @import必须在样式规则之前，可以在css文件中引用其他文件

less和sass的区别

  • 最主要的区别就是实现方式。less是基于javsscript的，是在客户端处理的；sass是基于Ruby的，是在服务端处理的
  • less的变量是@开头，sass是“$”开头

三栏布局

双飞翼布局
<style>
    .box {
        background-color: green;
        /* 父盒子清除浮动*/
        overflow: hidden;
    }

    /* 三个盒子都浮动 */
    .left {
        width: 100px;
        height: 100px;
        background-color: aqua;
        float: left;
       margin-left: -100%;
    }

    .center {
        height: 100px;
        width: 100%;
        float: left;
        background-color: black;
    }
    .dom{
        background-color: white;
        margin-left: 100px;
        margin-right: 100px;

    }

    .right {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
       margin-left: -100px;


    }
</style>

<body>
    <div class="box">
        <div class="center">
            <div class="dom">
                dom
            </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
圣杯布局

缺点：当center部分的宽小于left的自身宽度就会发生布局混乱

<style>
    .box {
        padding-left: 100px;
        padding-right: 100px;
        background-color: green;
        /* 父盒子清除浮动*/
        overflow: hidden;
    }

    /* 三个盒子都浮动 */
    .left {
        width: 100px;
        height: 100px;
        background-color: aqua;
        float: left;
        /* 左边盒子左边距-100% */
        margin-left: -100%;
        /* 相对定位搬移下位置 */
        position: relative;
        right: 100px;

    }

    .center {
        height: 100px;
        width: 100%;
        float: left;
        background-color: black;
    }

    .right {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        /* 右边盒子左边距-自身宽度 */
        margin-left: -100px;
        position: relative;
        left: 100px;

    }
</style>

<body>
    <div class="box">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
flex三栏
<style>
    .box {
       display: flex;
    }
    .left {
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

    .center {
        height: 100px;
        flex: 1;
        background-color: black;
    }

    .right {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<body>
    <div class="box">
        <div class="left"></div>

        <div class="center">    
        </div>
        <div class="right"></div>
    </div>
</body>

css居中的方法

水平居中

规定width的元素：margin：auto
文本元素：text-align: center;

水平垂直居中

  • flex布局
<style>
    .box {
        display: flex;
        width: 200px;
        height: 300px;
        background-color: black;
        align-items: center;
        justify-content: center;
    }

    .inner {
        background-color: aliceblue;
        width: 100px;
        height: 100px;
    }
</style>

<body>
    <div class="box">
        <div class="inner"></div>
    </div>
</body>
  • 定位 + margin
<style>
    .box {
        position: relative;
        width: 200px;
        height: 300px;
        background-color: black;

    }

    .inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-color: aliceblue;
        width: 100px;
        height: 100px;
    }
</style>

<body>
    <div class="box">
        <div class="inner"></div>
    </div>
</body>
  • 定位 + translate
<style>
    .box {
        position: relative;
        width: 200px;
        height: 300px;
        background-color: black;

    }

    .inner {
        position: absolute;
        top: 50%;
        left: 50%;
       transform: translate(-50%,-50%);
        background-color: aliceblue;
        width: 100px;
        height: 100px;
    }
</style>

<body>
    <div class="box">
        <div class="inner"></div>
    </div>
</body>
  • table-cell布局
<style>
    .box {
        display: table-cell;
        width: 200px;
        height: 300px;
        background-color: black;
        vertical-align: middle;
        text-align: center;
    }

    .inner {
        display: inline-block;
        background-color: aliceblue;
        width: 100px;
        height: 100px;
    }
</style>

<body>
    <div class="box">
        <div class="inner"></div>
    </div>
</body>
  • grid布局
<style>
    .box {
        display: grid;
        width: 200px;
        height: 300px;
        background-color: black;
       align-items: center;
       justify-content: center;
    }

    .inner {
        background-color: aliceblue;
        width: 100px;
        height: 100px;
    }
</style>

<body>
    <div class="box">
        <div class="inner"></div>
    </div>
</body>

画一个三角形

<style>
    .box {
        width: 0px;
        height: 0px;
        border-top: 100px solid transparent; 
        border-right: 100px solid transparent;
        border-left: 100px solid transparent;
        border-bottom: 100px solid orangered;
        margin: 100px auto;   
    }  
</style>

<body>
    <div class="box">        
    </div>
</body>

文本溢出显示省略号

<style>
    .box {
        width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

<body>
    <div class="box">
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
        暴富暴富
    </div>
</body>
fengdu__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
H5+css3面试题总结
Ryan的博客
08-22 2万+
H5+css3面试题总结 哈喽，各位小伙伴们，又到了一年一度的毕业季，俗话说的话：毕业等于失业。一毕业就要面临着找工作的压力。我们程序员也是一样，程序员找工作更辛苦。因为还会有技术面试。所以我给大家总结了我面试的一些问题及答案，希望能帮到大家 一、html5和html的区别： 1.html5新增了语义化标签：footer 、nav、section… 2.html5完全支持css3 3.支持本地离线...
HTML+CSS面试题总结（附答案+视频讲解）
xm1037782843的博客
06-25 2556
前端面试题总结 面试题总结 html+css面试题 元素隐藏、盒子垂直居中
CSS面试题总结
lime2019的博客
05-03 149
本博客内容来源于最近面试过程中遇到的题目及双越老师的面试题目讲解 CSS面试题总结1. CSS基础思维导图2. CSS布局3. CSS定位 1. CSS基础思维导图 2. CSS布局 CSS布局方案有多种： 3. CSS定位
html+css 面试题总结附答案
铁锤妹妹的博客
11-27 1575
行内元素有哪些? 块级元素有哪些? 块级元素：div p h1 ul li form table 行内元素: a b br i span input select laber strong em img 举５个以上的 HTML5 input 元素 type 属性值 text password button submit reset checkout radio 我们经常用到的语义化标签以及HTML5新增的语义化标签有哪些？ h1-h6 标题内容 p 段落 ul 无序 ol 有序 dl
前端面试题总结 — html 和 css 篇
qq_41914185的博客
08-30 796
语义化标签；display属性值；隐藏元素；元素居中；响应式布局；盒子模型；flex；z-index；重绘；回流（重排）；transform；css优化
css 常见面试题
weixin_44922119的博客
07-27 2923
#box {
2022最新CSS高频面试题指南
CoderBin的博客
11-04 2439
大家好，我是CoderBin，本文将总结75道前端面试CSS中的高频考点，帮助同学们力闯秋招，赶快收藏起来学习啦💪。 如果发现文中有错别字或者不对的地方，欢迎在评论区留言指正，如果对某一知识点感到疑惑的也可以评论留言探讨🌻
HTML&CSS常见面试题
FIRE的博客
09-06 3101
HTML&CSS常见面试题
2021面试题——CSS面试题总结
yizhangzzzz的博客
04-22 1624
css面试题总结 1.介绍一下标准的css的盒子模型，与低版本IE的盒子模型有什么不同？ 标准盒子模型：宽度=内容的宽度（content）+border+padding+margin 低版本IE盒子模型： 宽度=内容宽度（content+border+padding）+margin 用来控制元素的盒子模型的解析模式，默认为 content-box content-box:w3c的标准盒子模型，设置元素的宽高属性就是content部分的宽高 border-box：IE传统盒子模型，设置元素的宽高属性值的是bo
最新版html+css面试题
10-24
最新版html+css面试题，全部总结到位，各位只需下载就行
HTML+CSS面试题及答案
11-16
前端HTML+CSS面试题总结，还有详细答案。欢迎下载
前端面试题之CSS篇
01-08
本文总结了前端面试题中，关于css部分 ，掌握这些 ，对你面试会有很大帮助。关于JS，浏览器，框架等后续会有更新呦，需要的小可爱可以关注一下，真的全是干货，不要错过哦！:heart_suit::heart_suit::heart_suit: ...
前端面试题总结.doc
06-15
最近3年面试总结，技术栈从angular1涵盖到angular2，vue。不仅包括各框架，还有基础知识，包括html，css，css3，一些前端的数据结构，高级JavaScript编程思想。
HTML+CSS常见布局面试题总结
10-31
HTML+CSS常见布局面试题总结WEB前端常见布局面试题总结
CSS实现一个雨滴滑落效果
云加速
05-28 1688
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
Python私教张大鹏 Vue3整合Tailwindcss之space样式类
Python私教
06-05 635
x：水平方向y：垂直方向0到12是连续的，步长为112到52的步长是252到64的步长是464到80的步长是8最大的数是96。
积累常用css
Study_Live_Sun的博客
06-04 285
1、封面文字，垂直居中，可以两列并排。2、宽border效果。
scss是什么安装使⽤的步骤
最新发布
codedadi的博客
06-09 637
SCSS，也称为Sassy CSS，是Sass（Syntactically Awesome Stylesheets）的一种语法，它是CSS的预处理器，允许你使用变量、嵌套规则、混合（mixin）等功能，使CSS编写更加简洁、清晰和可维护。例如，将styles.scss编译为styles.css，可以输入以下命令：sass styles.scss styles.css。这将在同一目录下生成一个名为styles.css的文件，其中包含编译后的CSS代码。创建一个.scss文件，例如styles.scss。
html写一个table表
半兽先生的博客
06-05 297
【代码】html写一个table表。
react相关面试题
08-29
总结起来，React相关的面试题主要涉及React的基础知识、组件使用、状态管理、路由导航以及与前端开发相关的技术。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值