前端面试题css目录汇总
关注
分享
扫一扫
前端面试题css目录汇总
普通网友
这个作者很懒，什么都没留下…
展开
-
[css] 什么是关键帧动画？
[css] 什么是关键帧动画？表示关键状态的帧动画叫做关键帧动画。所谓关键帧动画，就是给需要动画效果的属性，准备一组与时间相关的值，这些值都是在动画序列中比较关键的帧中提取出来的，而其他时间帧中的值，可以用这些关键值，采用特定的插值方法计算得到，从而达到比较流畅的动画效果。个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-16 22:06:43 · 1005 阅读 · 0 评论 -
[css] 使用css如何设置背景虚化？
[css] 使用css如何设置背景虚化？filter: blur(5px);个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题原创 2021-01-18 20:53:19 · 457 阅读 · 0 评论 -
[css] 行内元素可以设置padding和margin吗？
[css] 行内元素可以设置padding和margin吗？行内元素的纵向padding和margin都是不考虑的，这是css规范定义的。 inline元素确实可以设置垂直方向的 padding 和 margin 值，但是 inline 元素的 margin 和 padding 的垂直方向上不产生边距效果，即不影响布局。个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-17 10:59:08 · 1588 阅读 · 0 评论 -
[css] ::first-letter有什么应用场景？
[css] ::first-letter有什么应用场景？段落首字放大效果p:first-letter { font-size: 2em;}<p>This is a test article. This is a test article.</p><p>这是一个测试</p>个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-16 22:06:09 · 252 阅读 · 0 评论 -
[css] flex与其他有什么不同，用它有什么好处？
[css] flex与其他有什么不同，用它有什么好处？flex 从根本上不同于之前常用的借助 定位、浮动 的布局。从逻辑思路上来说，flex 布局具有宏观性，提供了一种对于页面中元素如何排布的框架，开发者不需要关注细节和进行额外的操作，就能使得一系列元素按约定的规则排列。而之前常用的借助 float 、marging、position 的布局，则更像是一种“技巧”，不是真正意义上的布局，它们的存在更大意义上关注于单个元素或者某种场景下的特性而非全局。个人简介我是歌谣，欢迎和大家一起交流前后端知识。原创 2021-01-16 22:05:47 · 333 阅读 · 0 评论 -
[css] 为什么伪类的content不能被选中？
[css] 第432天 为什么伪类的content不能被选中？伪类不是真正的DOM,无DOM相关的属性和方法个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-16 22:06:26 · 408 阅读 · 1 评论 -
[css] 举例说明background-repeat的新属性值：round和space的作用是什么？
[css] 第 举例说明background-repeat的新属性值：round和space的作用是什么？space 背景图不会产生缩放，会被裁切round 缩放背景图至容器大小（非等比例缩放）个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-18 20:53:30 · 956 阅读 · 0 评论 -
[css] 怎样把单位cm转换成px呢（在打印时有时会用到）
[css] 怎样把单位cm转换成px呢（在打印时有时会用到）1px所代表的长度=2.54cm/分辨率1cm=分辨率/2.54个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-16 22:05:38 · 1937 阅读 · 0 评论 -
[css] 如何形成BFC？
[css] 如何形成BFC？根元素float的值不为noneoverflow的值不为visibledisplay的值为inline-block、table-cell、table-captionposition的值为absolute或fixed个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-18 20:52:30 · 310 阅读 · 0 评论 -
[css] 举例说说你对white-space属性的理解
[css] 举例说说你对white-space属性的理解值 说明normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap 保留空白符序列，但是正常地进行换行。pre-line 合并空白符序列，但是保留换行符。inherit 规定应该从父元素继承 white-space 属性的值。个人简介我是原创 2021-01-16 22:06:18 · 222 阅读 · 0 评论 -
[css] 如何取消页面中选中的文字？
[css] 如何取消页面中选中的文字？user-select: none;/* browser-specific values */-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-16 22:06:34 · 507 阅读 · 0 评论 -
[css] 为什么float会导致父元素塌陷
[css] 为什么float会导致父元素塌陷“当元素设置浮动后，会自动脱离文档流”，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况）个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-18 20:52:45 · 262 阅读 · 0 评论 -
[css] 举例说明BFC会与float元素相互覆盖吗？为什么？
[css] 举例说明BFC会与float元素相互覆盖吗？为什么？BFC的区域不会与float的元素区域重叠计算BFC的高度时，浮动子元素也参与计算BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-18 20:53:08 · 1074 阅读 · 0 评论 -
[css] 写出固定子容器在固定的父容器下水平垂直居中的布局
[css] 写出固定子容器在固定的父容器下水平垂直居中的布1.父容器 position: relative,子元素 position: absolute;left: 50%;top: 50%;transform:translate3d(-50%,-50%,0).2.父容器 display:flex; align-items:center;just-content:center.个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端原创 2021-01-16 22:05:21 · 328 阅读 · 0 评论 -
[css] pseudo-class与pseudo-element有什么区别？
[css] pseudo-class与pseudo-element有什么区别？伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover, :active等伪元素主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。CSS原创 2021-01-17 10:58:58 · 305 阅读 · 0 评论 -
[css] 什么是逐帧动画？
[css] 什么是逐帧动画？（1）相关联的不同图像，即动画帧；（2）连续播放。个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-18 20:52:58 · 555 阅读 · 0 评论 -
[css] 在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行
[css] 在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行.item-codes{width:800px;word-break: break-all;white-space: normal;}个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-16 22:05:29 · 3405 阅读 · 1 评论 -
[css] translate3D有什么作用？
[css] translate3D有什么作用？3d动画，启用GPU硬件加速个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-17 10:59:23 · 328 阅读 · 0 评论 -
[Css] 使用css如何拉伸字体？
[Css] 使用css如何拉伸字体？letter-spacing，transform:scale个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-16 22:05:11 · 503 阅读 · 0 评论 -
[css] 不用换行的标签，怎么伪元素实现换行的效果？
[css] 不用换行的标签，怎么伪元素实现换行的效果？使用\A 换行，并且指定white-space: pre保留换行效果.foo::after { content: '123\A 456'; white-space: pre;}个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-22 22:20:30 · 628 阅读 · 1 评论 -
[css] 如何阻止:hover、:active等鼠标行为状态的触发？
[css] 如何阻止:hover、:active等鼠标行为状态的触发？css属性：pointer-events: none;应用避免重复提交---按钮点击后 即增加该属性 使其不链接不可跳转---指定a标签加上该属性点击被上方元素覆盖的下方链接---上方元素添加该属性个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-21 20:11:41 · 5685 阅读 · 0 评论 -
[css] 固定的外框尺寸，里面的图片尺寸不固定，如何让图像自适应外框呢？
[css] 固定的外框尺寸，里面的图片尺寸不固定，如何让图像自适应外框呢？使用 object-fit ，用法类似background-size，可选的值：cover、contain、fill等个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-21 20:12:22 · 583 阅读 · 0 评论 -
[css] 判断如下边框的颜色，并解释为什么[代码]？
[css] 判断如下边框的颜色，并解释为什么[代码]？<p style="color: red;border: 1px solid;">给p设置border，但不给它设置border-color</div>red当边框颜色未设置值时，边框颜色则和当前字体颜色一致个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-22 22:21:47 · 256 阅读 · 0 评论 -
[css] 你有用过animation-fill-mode属性吗？它有什么应用场景
[css] 你有用过animation-fill-mode属性吗？它有什么应用场景动画播放完成之后的动作，比如可以定义动画播放完成之后回到初始状态个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-21 20:10:48 · 240 阅读 · 0 评论 -
[css] 用css实现一个等腰三角形的小图标
[css] 用css实现一个等腰三角形的小图标 <style> .box{ width: 0; height: 0; margin: 100px auto; border-width: 0px 200px 200px 200px; border-style: solid; border-color: transparent transparent red transparent; } </s原创 2021-01-21 20:10:59 · 570 阅读 · 0 评论 -
[css] 给一个图片设置透明有哪些方式呢？
[css] 给一个图片设置透明有哪些方式呢？1.opacity : 0 -> 子元素会继承2.外层用盒子包裹，设置其rgba(255,255,255,0)个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-22 22:21:22 · 217 阅读 · 2 评论 -
[css] 如何让表格单元格等宽显示
[css] 如何让表格单元格等宽显示table-layout: fixed;width: 100%;个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-21 20:12:11 · 610 阅读 · 0 评论 -
[css] 举例说明with属性的fill-available有什么应用场景
[css] 举例说明with属性的fill-available有什么应用场景一些 div 元素默认宽度 100% 父元素，这种充分利用可用空间的行为就称为 fill-available。个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-18 20:53:40 · 426 阅读 · 0 评论 -
[css] 假如css的分号写在声明块之外，将会发生什么呢？解释下原因
[css] 假如css的分号写在声明块之外，将会发生什么呢？解释下原因这样写第一条规则的分号会被放到第二条规则的句首解析，导致第二条解析报错，从而略过。<style>p {color: blue};.p1 {color: red}.p2 {color: green}</style>个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-21 20:11:26 · 232 阅读 · 0 评论 -
[css] 用css画一个平行四边形
[css] 用css画一个平行四边形.parallelogram { margin: 30px; width: 200px; height: 100px; border: 1px solid slateblue; transform: skew(-20deg);}<div class="parallelogram"></div>个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面原创 2021-01-21 20:11:51 · 390 阅读 · 0 评论 -
[css] 你用过outline属性吗？它有什么运用场景
[css] 你用过outline属性吗？它有什么运用场景outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-18 20:54:01 · 339 阅读 · 0 评论 -
[css] 使用css实现蒙版的效果
[css] 使用css实现蒙版的效果filter: blur(1px)个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题原创 2021-01-21 20:11:08 · 335 阅读 · 0 评论 -
[css] H5如何禁止显示系统菜单？
[css] H5如何禁止显示系统菜单？touch-callout:none;user-select:none;个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-21 20:12:02 · 290 阅读 · 0 评论 -
[css] box-sizing的宽度包含了哪些？
[css] box-sizing的宽度包含了哪些？这个得根据box-sizing来计算：1.box-sizing: content-box;width = width + 2border + 2padding2.box-sizing: border-box;width = width但是元素内部会被压缩，content = width - 2border - 2padding个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一原创 2021-01-22 22:21:35 · 366 阅读 · 0 评论 -
[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法父元素塌陷父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱。可能出现的情况 即子元素脱标的情况 浮动 固定定位 绝对定位解决方案 父元素底部增加一行 <div style='clear:both;'>&原创 2021-01-21 20:11:16 · 837 阅读 · 0 评论 -
[css] 为什么说css的选择器一般不要超过三级？
[css] 为什么说css的选择器一般不要超过三级？CSS的解析过程，在解析选择器的时候，是从右向左，从上到下及逆行解析的。超过三级会使的css解析树复杂度呈指数级增加，降低css加载性能个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-18 20:54:11 · 564 阅读 · 0 评论 -
[css] width属性的min-content和max-content有什么作用
[css] width属性的min-content和max-content有什么作用max-content 在一个父元素上设置该元素后，元素的宽度会以子元素内最长的一个为准，子元素表现得会好像设置了white-space:nowrap一样一行展示min-content 在一个父元素上设置该元素后，子元素会按照最短断行进行换行个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-18 20:53:50 · 1075 阅读 · 0 评论 -
[css] 使用css实现气泡框的效果
[css] 使用css实现气泡框的效果<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.longen{width:300px;height原创 2021-01-22 22:31:36 · 265 阅读 · 0 评论 -
[css] 你用过css的tab-size属性吗？浏览器默认显示tab为几个空格？
[css] 你用过css的tab-size属性吗？浏览器默认显示tab为几个空格？tab-size 属性规定制表符（tab）字符的空格长度。在 HTML 中，制表符（tab）字符通常显示为一个单一的空格字符个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-01-23 13:15:51 · 373 阅读 · 0 评论 -
[css] 使用css实现霓虹灯效果
[css] 使用css实现霓虹灯效果 <div class="neon">Good evening, and good night!</div> body { display: flex; height: 100vh; justify-content: center; align-items: center; text-align: center; background: black; } .neon { co原创 2021-01-22 22:27:22 · 629 阅读 · 0 评论