CSS常见问题列表

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

category: interviewer
date: 2023-5-9

CSS

1. 说一下 css 盒模型

  • box-sizing:border-box/padding-box/content-box.
  • 标准盒模型(content-box)：width =content
  • IE盒模型(border-box)：width =content+padding+border

2. 画一条 0.5px 的线

  • 采用 border-image 的方式
  • 采用 transform: scale()的方式

3. link 标签和 import 标签的区别

  • link 属于 html 标签，而@import 是 css 提供的
  • 页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载。
  • link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。
  • link 方式样式的权重高于@import 的。

4. transition 和 animation 的区别

Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，

  • 主要区别是 transition 需要触发一个事件才能改变属性，animation 不需要触发任何事件的
  • 并且 transition 为 2 帧，从 from … to，而 animation 可以一帧一帧的。

5. Flex 布局有哪些属性

父容器：

  • 子元素排列方向flex-direction: row | row-reverse | column | column-reverse;
  • 换行方式：flex-wrap: nowrap | wrap | wrap-reverse;
  • 方向｜换行方式；flex-flow: <flex-direction> || <flex-wrap>;
  • 水平主轴对齐方式：justify-content:flex-start | flex-end | center | space-between | space-around
  • 竖直轴线方向：align-items:flex-start | flex-end | center | baseline | stretch
  • 修改 flex-wrap 属性的行为, 设置各行对齐方式：align-content: flex-start | flex-end | center | space-between | space-around | stretch

子元素：

  • 排列顺序，顺序越小，排列越靠前：order：num默认为 0
  • “margin"值为"auto”,自动获取容器剩余空间
  • 自身在纵轴方向上的对齐方式：align-self: auto（默认，继承父亲） | flex-start | flex-end | center | baseline | stretch
  • 分配空间，占总量的比值：flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
    • auto: 计算值为 1 1 auto
    • initial: 默认值为 0 1 auto
    • none：计算值为 0 0 auto
    • inherit：从父元素继承
    • [ flex-grow ]：元素的扩展比率。
    • [ flex-shrink ]：当空间不足时的收缩比率。 0，则为不缩小
    • [ flex-basis ]：分配多余空间。

6. BFC

块级格式化上下文，是一个独立的渲染区域，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局

BFC触发条件：

  • float 不为 none 的元素
  • position 为 fixed 和 absolute 的元素
  • display 为 inline-block、table-cell、table-caption，flex，inline-flex 的元素
  • overflow 不为 visible 的元素

BFC规则：

  • 内部的Box会在垂直方向，一个接一个地放置。
  • 计算 BFC 的高度时，浮动元素也会参与计算
  • Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
  • 如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
  • BFC的区域不会与float box重叠，可以避免被隔壁浮动元素覆盖

应用场景

  • 避免margin重叠
  • 两栏布局自适应
  • 清除浮动，解决高度塌陷

7.垂直居中的方法

  1. margin:auto
  2. flex,水平垂直：center margin: auto
  3. absolute + 四边位置都为0
  4. absolute + top/left:50%. + margin-top/left：-height/width
  5. table-cell + verticel-align: middle + text-align: center

8. JS 动画和 css3 动画的差异性

  • CSS 动画得以在 compositor trhead 完成
  • CSS 动画则会在 main thread 执行
  • CSS3 比 JS 更加简单，性能跳优方向固定对帧速表现不好的低版本浏览器，css3 可以做到自然降级
  • css 动画有天然事件支持
  • css3 有兼容性问题

9. 块元素和行元素

块元素： width / height /margin/padding ,自动填充父元素
行内元素：width / height /margin/padding ,内容撑开
行内元素：没有width / height /margin/padding

10.visibility=hidden, opacity=0，display:none 区别

  • opacity=0：不改变布局，相当于元素透明了，但元素绑定的事件还能触发
  • visibility=hidden不改变布局，但元素绑定的事件不会触发
  • display:none: 改变布局，元素从页面中删除

11. 双边距重叠问题

多个相邻(兄弟或者父子关系)普通流的块元素垂直方向 marigin 会重叠
计算规则为:

  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 都是负数时，折叠结果是两者绝对值的较大值。
  • 一正一负时，折叠结果是两者的相加的和。

12. position 属性

  • 固定定位 fixed: 相对窗口定位，脱离文档流不占空间
  • 相对定位 relative：相对自身所在位置，移动后原本占的空间不改变
  • 绝对定位 absolute：相对最近的已定位祖先元素定位，如果没有，就相对html，脱离文档流，不占空间
  • 粘性定位 sticky: 先根据正常文档流定位，滚动后，基于 top、right、bottom 和 left 的值进行偏移，“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时）
  • 默认定位 Static:没有定位，忽略top, bottom, left, right 或者 z-index
  • 继承定位 inherit: 继承父元素定位

13.浮动清除

  1. 浮动元素后面添加一个空的的元素，清除浮动.clear{clear:both;}
  2. 给容器添加浮动
  3. 容器触发BFC
  4. 容器添加:after 伪元素，display: block; height: 0; clear: both; visibility: hidden;

14. css3 新特性

  • border-radius，
  • box-shadow
  • flex
  • background-size，background-origin,background-clip
  • background-image渐变背景
  • text-shadow
  • word-wrap:break-word;换行
  • 2D：transform：translate()/rotate()/scale()/skew()/matrix(n,n,n,n,n,n)(旋转，缩放，平移，倾斜)
  • 3D： translate3d(x,y,z)/scale3d(x,y,z)/rotate3d(x,y,z,angle)/matrix3d(n,n,n,n,n,n,
    n,n,n,n,n,n,n,n,n,n)
  • transition
  • animation

15.CSS 选择器有哪些，优先级呢

!important > 内联 > id > class/属性选择器/伪类选择器 > tagName / 伪装元素

16.css 动画如何实现

  • animation：定义动画名字，时间，方向，次数，延时，
  • @keyframes 定义动画具体实现
  • transition 事件触发，强调过度效果

17. CSS3 中对溢出的处理

text-overflow: clip 【剪裁】|ellipsis 【省略号】|string【使用给定字符串表示】|initial【正常显示】|inherit;【继承父】

18.三栏布局

  1. 左右浮动，中间用margin打开左右两边位置
  2. 左右absolute，中间用margin
  3. table和table-cell， border-space
  4. flex比例自适应
  5. 使用grid

19. calc 属性

动态计算长度值, width: calc(100% - 10px);

20. display:table 和本身的 table 有什么区别

  • Display:table,写出来的文件比较小，加载速度快，可以轻松单元格的边界和样式
  • div的table时逐行显示，table标签完全加载完才显示
  • table 的嵌套性太多，没有 div 简洁

21. line-height 和 height 的区别

  • line-height是指行高
  • height 是指容器高度

22.背景颜色会填充哪些区域

  • content、padding、border 区域

23.选择器有多少种

  • *
  • id
  • class
  • 标签
  • 组合：
    • 多元素选择器：E,F
    • 后代元素选择器：E F
    • 子元素选择器：E>F
    • 毗邻兄弟元素选择器：E+F
  • 属性选择器
    • *[att]，选择所有具有att属性的元素
    • E[att] ，选择所有具有att属性的E元素
    • E[att=“value”]，选择所有具有att属性，且att属性的值为value的E元素
    • E[att~=“value”]，选择所有具有att属性，且att属性的其中一个值为value的E元素
    • a[href][title] 所用具有href 和title的a标签
  • 伪类选择器
    • link、visited、hover、active
    • p:first-child:p元素且是父元素的第一个子元素
    • ::first-line:只作用于块级元素
    • ::first-letter只作用于块级元素
    • ::before:元素内容之前插入一些内容
    • ::after:元素内容之后插入一些内容
    • ::selection:用户所选定的元素部分

24.伪类和伪元素的区别

  • 伪类:是有元素，处于某个状态，单冒号
    在这里插入图片描述

  • 伪元素: 附加在选择器上关键字，不属于DOM树上真正的元素，只是元素特定部分的内容，双冒号开始

    • ::before/::after/::first-letter/::first-line/::marker /::selection/::placeholder

25. inline-block、inline 和 block 的区别;为什么 img 是 inline 还可以设置宽高

  • block 默认占满父元素一整行（前后有换行符），有宽高margin/padding
  • inline-block 内容撑开宽度，有宽高margin/padding， （前后无换行符）
  • inline：padding四面都有效，margin上下无效左右有效，宽高无效，（前后无换行符）
  • img 是 inline 还可以设置宽高，因为img是可替换元素，拥有内置宽高

26. vertical-align

vertical-align 只对行内元素、表格单元格元素生效。

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>;

27. 重绘和重排

  • 重绘（repaint）和重排（reflow）是指浏览器对网页进行重新渲染的过程
  • 重排会导致元素的尺寸、位置、内容等属性的变化，因此需要重新计算布局信息
  • 重绘则是在元素的位置和尺寸等属性不变的情况下，重新绘制元素的样式

导致重排因素：

  1. 添加、删除或更改DOM元素。
  2. 修改元素的尺寸、位置、边距、填充、边框等样式属性。
  3. 修改页面的字体大小、样式等。
  4. 用户交互事件，如窗口大小改变、滚动等。

导致重绘因素：

  1. 修改元素的背景色、边框颜色等样式属性。
  2. 添加或删除元素的伪类，如:hover等。
  3. 操作canvas、SVG等图形元素。

重排和重绘都会对网页性能产生影响，但重排的影响更为严重，因为它需要重新计算布局信息。因此，我们需要尽可能减少重排的次数，从而提高网页性能。

  • 重排的影响：重排是比较消耗性能的操作，因为它需要重新计算元素的布局信息。频繁的重排会导致网页的响应速度变慢，页面卡顿，用户体验不佳。
  • 重绘的影响：相对于重排，重绘的影响较小，因为它只需要重新绘制元素的样式，不需要重新计算布局信息。但是，如果重绘操作频繁，也会对网页性能产生一定的影响。

如何减少重排和重绘

  • 避免频繁的DOM操作，减少DOM操作的次数，一次性添加/删除多个DoM，而不是一个一个地修改
  • 使用CSS3动画：CSS3动画可以使用GPU加速，减少重排和重绘的次数，JavaScript实现的动画是通过操作DOM实现，则会导致频繁的重排和重绘。
  • 避免使用table布局：table布局比较复杂，会导致频繁的重排和重绘
  • 使用CSS Sprite：CSS Sprite可以减少图片的请求次数，从而减少重排和重绘的次数。
  • 减少重复的样式代码，避免频繁的样式更改，减少重排和重绘的次数。
  • 用position:absolute或fixed定位：使用position:absolute或fixed定位可以脱离文档流，减少重排的次数。
  • 将样式表放在头部：将样式表放在头部可以避免样式表的延迟加载，减少重排和重绘的次数。

29.两个嵌套的div，position都是absolute，子div设置top属性，那么这个top 是相对于父元素的哪个位置定位的。

margin 的外边缘

30. css 预处理器有什么

CSS不像其它编程语言能够定义变量、常量、条件语句等，只是单纯地进行属性描述，写起来很费事，而且代码难以组织和维护。

css 预处理器是用一种专门的编程语言，为CSS增加一些编程特性，将CSS作为目标生成文件，
但核心功能：嵌套/变量/mixin/继承/运算/模块化

常见的css 预处理器：Sass(Scss), Less, Stylus

PostCSS被成为CSS后处理器，提供了一种方式可以用JavaScript代码来处理CSS，

  • 可以支持变量和混入
  • 增加浏览器相关的声明前缀
  • 把使用将来的CSS规范的样式规则转译成当前的CSS规范支持的格式
净-本空
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS3常见问题列表布局特效
07-24
"CSS3常见问题列表布局特效"是针对开发者在使用CSS3时可能遇到的问题的一个集合，提供了实用的解决方案和交互效果。这款特效主要关注于列表的布局和内容的展开与收缩，这在创建用户界面（UI）时尤其重要，因为它能够...
CSS基础常见问题汇总
04-12
以上只是CSS常见问题的一部分，实际中还有更多细节需要探索，如Z-index的理解、Flexbox和Grid布局的使用、以及CSS变量和 calc() 函数等。持续学习和实践是成为CSS大师的关键。通过不断积累经验，你将能够更好地解决...
CSS3常见问题列表布局特效.zip
10-08
《CSS3常见问题列表布局特效详解》 在网页设计领域，CSS3（层叠样式表第三版）已经成为了实现各种视觉效果的重要工具。本资源"CSS3常见问题列表布局特效.zip"提供了一套实用的代码示例，适用于解决网页中的列表布局...
DIV+CSS常见问题的14条原因分析
09-25
【DIV+CSS常见问题的14条原因分析】 在网页设计中，使用DIV+CSS布局是一种常见的技术，但在实现过程中可能会遇到各种浏览器兼容性问题。本文将深入解析14个常见的问题及其解决方案，帮助开发者更好地理解和处理这些...
css常见问题解决方法小结
10-30
是不是经常遇到css和自己要求相差太多呢，其实就是因为哪里出了问题，有朋友已经为大家准备好了css常见问题解决方法
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1332
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 731
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 585
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
Html_Css问答集(11)
白话魔法师
07-16 846
html与css学习中的一些疑问，问答中轻松获取知识。
相对定位语法：css+xpath基础语法使用-定位页面元素
m0_69119792的博客
07-16 755
介绍css和xpath，设置相对定位的基础使用
css 屏幕四周报警提示
AS_JOPO的专栏
07-16 350
屏幕四周出现律动的红色边框，产生报警提示的效果。
如何利用 CSS 动画和过渡效果来增强用户交互体验？
xy520521的博客
07-16 168
动态交互效果：通过结合CSS动画和JavaScript，可以实现动态的交互效果。通过定义关键帧，在不同的时间点改变元素的样式，可以创建各种复杂的动画效果。过渡延迟与持续时间：通过调整CSS过渡的延迟和持续时间，可以实现不同的交互效果。延迟可以用来创建一定的悬停效果，持续时间可以用来控制过渡的速度。渐变过渡：使用CSS过渡属性，比如transition，来实现元素的平滑过渡效果。淡入淡出效果：使用CSS的opacity属性来实现元素的淡入淡出效果。可以通过改变元素的透明度来实现平滑的淡入淡出过渡效果。
编织文字的魔法：探索WebKit的CSS文本效果
2401_85341950的博客
07-19 532
WebKit，作为众多浏览器的核心引擎，支持一系列CSS文本效果，使开发者能够创造出引人注目的文本样式。本文将深入探讨WebKit对CSS文本效果的支持，并提供详细的解释和代码示例。请注意，本文提供了一个关于WebKit CSS文本效果的概述，包括代码示例和关键概念的解释。通过本文的介绍，你应该对WebKit的CSS文本效果有了基本的了解。通过本文，我们希望能够帮助开发者更好地利用WebKit的CSS文本效果，创造出更加丰富和吸引人的Web页面。通过媒体查询，可以为不同屏幕尺寸的设备应用不同的文本效果。
html基础知识学习
m0_56363537的博客
07-16 787
html基础知识了解，笔记测试使用，仅供参考
HTML2048小游戏
w11111xxxl的博客
07-17 1073
游戏控制方向四个按钮，我就不写样式了 源代码在效果图片后面 是可以正常玩的。
【SASS/SCSS（二）】模块化语法
weixin_57208584的博客
07-17 809
Sass中的模块化主要是指外部的scss、sass文件可以作为模块导入到其他文件中。如果一个自定义的sass、scss文件，仅作为库模块引入，那么我们的取名可以用，这样该文件不会自动去编译加载，而是仅会在被引用之后被编译。这样的文件我们称为Partial（代码片段）。如果在一个文件夹下（例如名为folder）定义 _index.scss 或者 _index.sass ，导入 folder（即直接导入文件夹名），其会自动解析文件夹中的index文件并导入。
css-01-如何实现“文本过长（文本在一行排），超出部分被省略号代替”
最新发布
m0_64150479的博客
07-20 223
css效果：文本在一行排显示，超出的部分用省略号代替
JavaWeb-【2】CSS和JavaScript
m0_74044018的博客
07-16 745
前端全系列超详细笔记！！ 持续更新到全部完结
艺术与技术的交响曲：CSS绘图的艺术与实践
艾恩小灰灰的博客
07-17 402
近年来，随着CSS3的普及，开发者们开始探索CSS在图形绘制方面的潜力，用纯粹的代码创造出令人惊叹的视觉效果。CSS绘图不仅是一种技术，也是一种艺术形式，它要求开发者既要有深厚的CSS功底，也要具备一定的创造力和审美感。然而，我们也应认识到它的局限性，学会在适当的场景下选择最合适的绘图方法。CSS绘图，即利用CSS的特性来创建和控制页面上的形状、图案乃至动画，已经成为前端设计领域的一项独特技能。从简单的圆形和矩形，到复杂的几何图形和动态效果，CSS提供了丰富的工具箱，包括但不限于。属性塑造形状，再利用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值