前端面试-CSS
关注
分享
扫一扫
自己整理的CSS面试题
火星飞鸟
学习前端ing...
展开
-
如何优化CSS以提高性能？
（1）属性设置使用简写例如：.box { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;}简写为：.box { margin: 10px 20px 30px 40px;}可以减小生成包的体积。（2）用CSS替换图片一些箭头、圆，若能用CSS代替，尽量用CSS画。可以减少HTTP请求，减轻服务器压力。（3）删除不必要的单位、零例如：.原创 2021-10-19 15:41:35 · 156 阅读 · 0 评论 -
CSS实现三栏布局的5种方案
1. 实现效果一共三栏，左中右，左右分别在页面的左右侧，中间部分充满剩余的宽度。2. 实现方案1. 浮动布局注意，中间的盒子，需要写在最下面。左右盒子分别设置左浮动、右浮动。<div class="box"> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div>原创 2021-10-19 15:31:39 · 477 阅读 · 0 评论 -
CSS实现左边定宽、右边自适应布局
1. 实现效果在一个父盒子中，有两个子盒子。左边盒子定宽，右边盒子自动充满剩下的宽度。当左边盒子宽度改变时，右边盒子也会自动调整，以充满整个剩下的宽度。2. 实现方案相同的HTML：<div class="box-wrapper"> <div class="left-box">left-box</div> <div class="right-box">right-box</div></div>1. fle原创 2021-10-18 15:17:13 · 801 阅读 · 0 评论 -
CSS尺寸单位px、em、rem、vw、vh以及%的区别
1. pxpx是像素单位。它是代表显示器上每一个显示的像素点，根据用户屏幕显示器的分辨率决定。2. emem为相对单位，相对于当前元素内文本的字体尺寸。如果当前元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。例如，当前元素设置了字体尺寸为24px，那么2em就代表48px。3. remrem为相对单位，相对于<HTML>元素文本的字体尺寸。如果<HTML>元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。例如，<HTML>元素设置了字体尺寸为24p原创 2021-10-15 15:52:54 · 2515 阅读 · 1 评论 -
CSS可以被继承的属性
CSS中有继承性的属性如下：类型属性字体font、font-family、font-weight、font-size、font-style…文本text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color元素可见性visibility表格布局caption-side、border-collapse、border-spacing、empt原创 2021-10-15 15:17:12 · 302 阅读 · 0 评论 -
一文理解CSS中BFC的含义及其作用
1. 何为BFCBFC 的全程为块格式化上下文（Block Formatting Context），在 MDN 定义如下：块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单理解为，BFC 是一个完全独立的盒子，内部的元素无论样式是什么，都不会影响到盒子外部的布局。2. 触发BFC根元素<html>浮动元素（float不为none）固定定位、绝对定原创 2021-10-14 21:01:34 · 739 阅读 · 0 评论 -
CSS 文字溢出部分用省略号代替
1. 单行文字溢出省略只需添加三行代码即可：overflow: hidden; /* 超出的文本隐藏 */text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本。 */white-space: nowrap; /* 文本不换行 */举例：CSS：.demo { width: 200px; height: 20px; border: 2px solid #000; overflow: hidden; text-overf原创 2021-07-19 13:24:19 · 384 阅读 · 0 评论 -
前端面试题 —— 介绍下CSS盒子模型？box-sizing属性有哪些？
1. CSS盒子模型标准盒子模型宽度width = 内容宽度(content) + padding + border + margin内容宽度仅仅只有content。如果设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。怪异模式盒子模型宽度width = 内容宽度(content + padding + border) + margin内容宽度包含了content、border、padding。如果将一个元素的wi原创 2021-07-08 16:58:18 · 963 阅读 · 0 评论 -
CSS 两种方法实现文字描边
1. text-shadow该属性设置的是文字阴影效果：text-shadow: h-shadow v-shadow blur colorh-shadow：必需。水平阴影的位置。允许负值。v-shadow：必需。垂直阴影的位置。允许负值。blur：可选。模糊的距离。color：可选。阴影的颜色。<span class="demo">文字描边</span>.demo { text-shadow: 2px 2px 10px #000;}2. tex原创 2021-06-28 11:01:05 · 937 阅读 · 0 评论 -
CSS 实现圆角边框
实现元素圆角：1. border-radius.demo { width: 100px; height: 100px; background-color: blue; border-radius: 20px;}2. clip-path.demo { width: 100px; height: 100px; background-color: blue; clip-path: inset(0 round 20px);}...原创 2021-06-23 16:50:27 · 759 阅读 · 0 评论 -
CSS 多种方法实现100%高度的容器
1. 百分比高度html,body { height: 100%;}div { height: 100%; background-color: yellow;}相对于父元素100%高度，所以父元素高度也要调整。2. 相对单位 vhdiv { height: 100vh; background-color: yellow;}vh：相对视口高度的单位vw：相对视口宽度的单位100vh就代表高度占满整个窗口。3. calchtml,bo原创 2021-06-23 16:41:51 · 1659 阅读 · 0 评论 -
CSS 1px边框问题两个解决方案
-webkit-min-device-pixel-ratio当前设备的物理像素分辨率与 CSS 像素分辨率比值的最小值可以用标准属性min-resolution代替-webkit-max-device-pixel-ratio当前设备的物理像素分辨率与 CSS 像素分辨率比值的最大值可以用标准属性max-resolution代替1. border-width.border { width: 100px; height: 100px; border: 1px s..原创 2021-06-23 16:32:06 · 955 阅读 · 0 评论 -
CSS实现单行居中，多行居左
实现效果单行居中：多行居左：实现代码父元素：text-align: center;子元素：text-align: left;display: inline-block;DEMO代码：.father { width: 200px; height: 100px; background-color: rgb(117, 231, 247); text-align: center;}.son { text-align: left; dis原创 2021-06-21 16:47:17 · 452 阅读 · 0 评论