CSS面试
卖菜的小白
这个作者很懒,什么都没留下…
展开
-
移动端总结?
1、移动端适配方案参考答案:原则:1、开发时方便,写代码时设置的值要和标注的 160px 相关。2、方案要适配大多数手机屏幕,并且无 BUG。3、用户体验要好,页面看着没有不适感。思路:1、写页面时,按照设计稿写固定宽度,最后再统一缩放处理,在不同手机上都能用2、按照设计稿的标准开发页面,在手机上部分内容根据屏幕宽度等比缩放,部分内容按需要变化,需要缩放的元素使用 rem, vw 相对单位,不需要缩放的使用 px。3、固定尺寸+弹性布局,不需要缩放。viewport适配:根据设计稿原创 2022-05-03 21:06:01 · 384 阅读 · 0 评论 -
学习css文本溢出显示省略号?
一、写在前面今天携程面试,问题是这样的有一个span标签,其宽度为100px,我们需要给其设置文本,并且让其单行显示,超出部分使用省略号表示,当我们鼠标悬停在说上面的时候,然后再进行展示全部文本。但是我不会,很尴尬。下面重新整理一下。<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content原创 2022-04-24 17:54:46 · 1708 阅读 · 0 评论 -
两栏布局?
一、写在前面pdd前端面试,问了一个两栏布局的问题,接下来就直接写出来了,觉得很简单。<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini原创 2022-04-20 18:04:16 · 344 阅读 · 0 评论 -
为什么有时候人们用translate来改变位置而不是定位?
translate是transform的一个值。改变transform或者opacity不会触发浏览器重新布局,或者重绘,只会触发复合。而改变绝对定位会触发回流,进而触发重绘,所以说在使用绝对定位时会触发重绘和回流操作。并且transform使浏览器为元素创建一个GPU图层,但是改变绝对定位会使用到CPU,因此translate更加高效,可以缩短平滑动画的绘制时间。而translate改变元素时,元素依然会占据原始位置,但是绝对定位不会发生这样的情况。...原创 2022-04-17 16:07:47 · 1787 阅读 · 2 评论 -
你对媒体查询的理解?
一、写在前面媒体查询是什么?媒体查询由一个可选的媒体类型和零个或者多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度,高度和颜色。媒体查询,添加自css3,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身,非常适合web网页应对不同的设备而做出对应的相应适配。二、如何使用媒体查询包含一个可选的媒体类型和满足css3规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特征,最终被解析为true或者false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型,并且原创 2022-04-17 15:29:26 · 656 阅读 · 0 评论 -
你对css sprites的理解,好处是什么?
一、写在前面什么是雪碧图雪碧图也叫精灵图,是一种css图像合成技术,开发人员往往将小图标合并在一起之后的图片称为雪碧图。二、如何操作?使用工具(ps之类的)将多张图片打包成一张雪碧图,并为其生成何时的css。每张图片都有相应的css类,该类定义了background-image,background-position,background-size属性。使用图片时,将相应的类添加到你的元素中去即可。三、好处3.1、减少加载多张图片的http请求次数,(一张雪碧图只需要发送一次请求即可原创 2022-04-17 15:10:08 · 208 阅读 · 1 评论 -
有哪些⽅式(CSS)可以隐藏⻚⾯元素?
一、写在前面css存在哪些方式可以隐藏页面的元素的方法,下面将对其进行总结。二、总结方法2.1、opacity:0 <style> .first { visibility: hidden; } .last {} </style><body> <div> <h1 class="first">我是第一行</h1> <h1 class="last">我是第原创 2022-04-17 11:24:29 · 191 阅读 · 0 评论 -
link和@import的区别?
一、link和@import的区别?1.1、link属于html标签,而@import是css提供的。1.2、页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完再加载的。1.3、兼容性问题:@import只在IE5以上才能识别,而link是html标签,无兼容性问题。1.4、权重问题:@import的权重要高于link。1.5、DOM操作:DOM可以操作link中的样式,而不可以操作@import中的样式。...原创 2022-04-17 10:39:10 · 3300 阅读 · 1 评论 -
简单了解CSS3的all属性
一、写在前面在网页中应该使用奇数还是偶数的字体?为什么呢?原创 2022-04-15 16:35:15 · 957 阅读 · 0 评论 -
margin 和 padding 分别适合什么场景使用?
一、写在前面margin 和 padding 分别适合什么场景使用?原创 2022-04-15 16:09:07 · 2617 阅读 · 0 评论 -
浏览器是怎样解析 CSS 选择器的?
一、写在前面浏览器是怎样解析 CSS 选择器的?原创 2022-04-15 15:05:10 · 1141 阅读 · 0 评论 -
CSS 优化、提高性能的方法有哪些?
一、写在前面CSS 优化、提高性能的方法有哪些?原创 2022-04-15 13:59:27 · 3729 阅读 · 0 评论 -
请解释一下为什么需要清除浮动?清除浮动的方式?
一、写在前面我们下面看一个例子:<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2022-04-13 13:58:36 · 142 阅读 · 0 评论 -
css块级元素,行内元素和行内块级元素
一、写在前面行内元素和块级元素以及行内块级元素总是傻傻分不清,下面进行总结。二、总结2.1、块级元素1、它独占一行。2、它的宽高可以设置。3、默认时,宽度是100%。例如:<div>,<h1-h6>,<ul>,<ol>,li等。2.2、行内元素1、它的宽度有内容决定,高度有内容字体大小决定。2、它不可以设置宽高。3、它可以和其他行内元素位于同一行。例如:<span>,<label>,<i>,<原创 2022-04-11 10:49:36 · 890 阅读 · 0 评论 -
css三栏布局总结?
一、写在前面昨天百度面试,上来问了一个三栏布局,我当时想我会呀,看我的,一分钟搞定。但是在白板上就是展示不出来,我当时脑子里想的就是使用浮动,然后触发BFC。最后老是出现小问题。然后面试官:要不我们进行下一题吧。我想:如果要进入下一题, 不就完蛋了吗,直接gg。我当机立断:面试官,我还会另一种写法,然后一分钟使用flex布局写出来了。下面总结三栏布局,面试的时候,千万要找自己擅长的东西去回答。二、总结2.1、flex布局 <style> * { margin: 0p原创 2022-04-11 10:29:59 · 232 阅读 · 0 评论 -
如何理解margin重叠问题
一、写在前面根据w3c规范,两个margin产生折叠的必备条件:1、必须处于常规文档流(不能是浮动和定位)的块级盒子,并且处于同一个BFC当中。2、没有线盒,没有空隙,没有padding和border将他们分割。3、都处于垂直方向相邻的外边距。二、例子<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa原创 2022-04-08 17:04:19 · 3366 阅读 · 0 评论 -
‘display‘、‘position‘和‘float‘的相互关系?
一、这三种属性之间的关系和相互作用效果可以用下图表示:display转化表设定值转换后inline-tabletableinline, inline-block,run-in,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-captiontable其他保持设定值二、具体流程如下所示原创 2022-04-08 16:02:36 · 1104 阅读 · 0 评论 -
简单介绍使用图片 base64 编码的优点和缺点?
一、写在前面base64编码是一种图片处理格式,通过特定的算法将图片编码成一个长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性。二、使用base64的优点是:1、减少一个图片的http请求。三、使用base64的缺点是:1、根据base64的编码原理,编码后的大小会比原文件大小大1/3,如果把大图片编码到html/css中,不仅会造成文件体积增加,影响文件的加载速度,还会增加浏览器对html或css文件解析渲染的时间。2、使用base64无法直接缓存,要缓存只能缓存包含b原创 2022-04-08 15:28:05 · 2567 阅读 · 0 评论 -
绝对定位元素与非绝对定位元素的百分比计算的区别?
一、写在前面绝对定位中使用百分比,和非绝对定位使用百分比,之间存在区别,一个是针对padding box,另一个是针对content box。二、详细解释<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor原创 2022-04-08 13:00:07 · 310 阅读 · 0 评论 -
width: 100%和width: auto有什么区别
一、写在前面块级元素有宽度width, 行内元素没有宽度width,所以只能在块级元素上验证两者区别设置当前盒模型是IE盒模型二、具体例子2.1、设置children元素margin: 0此时设置width:100%和width: auto是没有什么区别的。2.2、设置children元素margin: 0 30px如果设置children元素margin: 0 30px时,width: 100%的元素宽度不变, 位置向左偏移30px;width: auto的元素宽度变化,宽度 = 父原创 2022-04-08 12:45:13 · 841 阅读 · 0 评论 -
CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的?在不同浏览器下以后什么区别?
一、写在前面对于css里的visibility属性,存在三种值,一个是visible,这个属性值表现出来的样式没有任何变化。hidden:相当于opacity: 0collapse:对于一般元素来说visibility:collapse表现的样式和hidden一样,但是对于table相关的元素,比如table group,table列,table column group,他的表现却跟``...原创 2022-04-08 12:11:15 · 555 阅读 · 0 评论 -
什么是包含块,对于包含块的理解?
包含块(containing block)就是元素用来计算和定位的一个框。(1)根元素(很多场景下可以看成是)被称为“初始包含块”,其尺寸等同于浏览器可视窗口的大小。(2)对于其他元素,如果该元素的position是relative或者static,则“包含块”由其最近的块级祖先元素的content box边界形成。(3)如果元素position:fixed,则“包含块”是“初始包含块”。(4)如果元素position:absolute,则“包含块”由最近的position不为static的祖先元原创 2022-04-07 22:11:43 · 1551 阅读 · 0 评论 -
为什么要初始化CSS的样式?
1、为什么要初始化因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对css初始化往往会出现浏览器之间的页面显示差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。最简单的初始化方法:{padding:0;margin:0;}(强烈不建议),原因:因为需要把所有的标签都遍历一遍,当网站较大时,样式比较多,这样写就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间,因此一般大型的网站都有分层次的一套初始化样式。建议使用:html原创 2022-04-07 22:07:20 · 1702 阅读 · 0 评论 -
li与li之间存在看不见的空白间隔是什么原因引起的?有什么解决办法?
一、写在前面<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2022-04-07 21:55:32 · 2159 阅读 · 0 评论 -
浏览器兼容性及其解决方案整理
一、了解浏览器主流浏览器:IE(Trident内核)、Firefox(火狐:Gecko内核)、Safari(苹果:webkit内核)、Google Chrome(谷歌:Blink内核)、Opera(欧朋:Blink内核)四大内核:Trident(IE内核)、Gecko(Firefox内核)、webkit内核、Blink(Chrome内核)二、了解兼容问题W3C对标准的推进,Firefox,Chrome,Safari,Opera的出现,结束了IE雄霸天下的日子。然而,这对开发者来说,是好事,也是坏事转载 2022-04-07 17:34:56 · 4922 阅读 · 0 评论 -
CSS多列等高如何实现?
一、写在前面在面试的时候,面试官如果询问,如何实现多列登高,此时该如何去实现。下面将总结几种常用到的方法。二、具体登高方法实现2.1、table布局实现等高<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp原创 2022-04-07 12:32:23 · 510 阅读 · 0 评论 -
前端css高频面试题——em/px/rem/vw/vh的区别?
一、pxpx,表示像素,所谓像素就是呈现在我们显示器上的一个个小点,每个像素点都是大小等同的,所以像素为计量单位被分在了绝对长度单位中。有些人会把px认为是相对长度,原因在于在移动端中存在设备像素比,px实际显示的大小是不确定的。这里之所以认为px为绝对单位,在于px的大小和元素的其他属性无关。二、emem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(1em = 16px)。为了简化 font-size 的换算,我们需原创 2022-04-06 16:24:16 · 409 阅读 · 0 评论 -
一个品字布局如何设计?
一、实现方案简单的方式: 上面的div宽100%, 下面的两个div分别宽50%, 然后用float或者inline使其不换行即可二、代码实现<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2022-04-06 15:23:06 · 170 阅读 · 0 评论 -
用纯 CSS 创建一个三角形的原理是什么?
一、写在前面平常我们可以用纯css绘制一些图形,接下来我们将总结一些绘制原理。二、总结<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in原创 2022-04-06 15:10:19 · 282 阅读 · 0 评论 -
CSS3的flex布局总结?
一、简单介绍flex是flexibleBox的缩写,意为弹性布局,用来为盒模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用flex布局。注意,设为flex布局以后,子元素的float,clear,vertical-align属性将失效。采用flex布局的元素,称为flex容器,简称容器。他的所以子元素自动称为容器成员,称为flex元素,简称元素。容器默认存在两根轴:水平的主轴(main axis)和垂直的辅轴(cross axis),元素默认沿主轴排列。二、6个属性2原创 2022-04-06 15:01:51 · 1129 阅读 · 0 评论 -
CSS中的position的值及其作用?
一、写在前面position可以设置为多个值,可以设置的类型为absolute,relative,flex,static,inherit的值,下面将总结一些这些值的作用。二、具体作用2.1、relative生成固定定位的元素,相对于元素本身正常的文档流进行定位。2.2、absolute生成绝对定位的元素,相对于值不为static的第一个父元素的padding box进行定位,也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的paddin原创 2022-04-06 12:58:40 · 430 阅读 · 0 评论 -
display有哪些值?说说有哪些作用?
1、block块类型,默认宽度为父元素的宽度,可以设置宽高换行显示。2、none元素不显示,并从文档流中移除。3、inline行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。4、inline-block默认宽度为内容宽度,可以设置宽高,同行显示。5、list-item像块类型元素一样显示,并添加样式列表标记。6、table此元素会作为块级表格来显示。7、inherit规定应该从父元素继承display属性的值。...原创 2022-04-05 15:18:53 · 537 阅读 · 0 评论 -
如何居中div?
一、写在前面之前总结过一篇博客是关于如何在为止父元素大小中使得子盒子垂直居中,文章链接下面总结的为如何居中div。二、方案2.1、使用margin: 0 auto<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi原创 2022-04-05 14:13:25 · 3321 阅读 · 0 评论 -
CSS3新增伪类有哪些?
一、写在前面css3中新增了很多的伪类,下面我们将对新增的伪类进行总结。二、总结2.1、elem:nth-child(n)选中父元素下的第n个子元素,并且在这个子元素的标签名为elem,n可以接受具体的数值,也可以接受函数。2.2、elem:nth-last-child(n)作用同上,不过是从后开始查找。2.3、elem:last-child选中最后一个子元素。2.4、elem:only-child如果elem是父元素下唯一的子元素,则选中之。2.5、elem:nth-of-type(n):查原创 2022-04-05 13:50:31 · 4592 阅读 · 0 评论 -
CSS优先级算法如何计算
判断优先级时,首先我们会判断一条属性声明是否有权重,也就是是否在声明后面加上了!important。一条声明如果加上权重,那么他的优先级就是最高的,前提是它之后不再出现相同权重的声明。如果权重相同,我们则需要去比较匹配规则的特殊性。一条匹配规则一般由多个选择器组成,一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级,第一个等级是行内样式,为1 0 0 0,第二个等级是id选择器,为0 1 0 0 ,第三个等级是类选择器,伪类选择器,属性选择器为:0 0 1 0,第四个等级是元原创 2022-04-05 12:29:42 · 828 阅读 · 0 评论 -
CSS中的那些属性是可以继承的?
一、写在前面每一个css属性定义的概述都指出了这个属性是默认继承的,还是默认不继承的。这决定了当你没有为元素指定值时该如何计算。当元素的一个继承属性没有指定值时,则取父元素的同属性的计算值。如果文档根元素没有设置值时,则取属性本身定义的默认值。二、存在继承性的属性2.1、字体系列的属性font, font-family, font-weight, font-size, font-style, font-variant, font-stretch, font-size-adjust2.2、字体系原创 2022-04-05 12:10:14 · 4238 阅读 · 0 评论 -
伪类和伪元素的区别?
一、简单区分伪类用于当已有元素处于某种状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。也就是说,当用户悬停指定的元素时,我们可以通过:hover来描述这个元素的状态。伪元素用于创建一些不在文档树中的元素,并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说,我们可以通过::before来在一个元素前添加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。有时你会发现伪元素使用了两个冒号::而不是一个冒号:。这是CSS3的一部分,并尝试区分伪原创 2022-04-05 11:54:09 · 824 阅读 · 0 评论 -
css选择器有哪些?
一、写在前面css选择器有很多,但是常用到的也就几个,今天总结一下。二、具体选择器2.1、id选择器#myId {}2.2、类选择器.myClass {}2.3、标签选择器p,h1 {}2.4、后代选择器div h1 {}2.5、子选择器div>h1 {}2.6、兄弟选择器(所有的兄弟)ul~h1 {}2.7、相邻兄弟选择器ul+h1 {}2.8、属性选择器li[name='sss'] {}2.9、伪类选择器h1:hover {}2.10h原创 2022-04-04 17:59:44 · 13018 阅读 · 0 评论 -
介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
1、盒模型都是由四部分组成的,分别是margin,border, padding, content。2、标准和模型和IE盒模型的区别在于设置width和height时,所对应的范围不同。标准盒模型的范围只有content,而IE和模型的width和height属性的范围包含border,padding和content。3、一般来说我们可以通过box-sizing属性来改变元素的盒模型,存在两个值,一个是border-box表示IE盒模型,content-box表示标准盒模型。...原创 2022-04-04 17:41:05 · 1092 阅读 · 0 评论 -
未知大小的父元素如何实现让子元素水平垂直居中?
一、写在前面今天看到一个面试题,问未知大小的父元素如何实现让其子元素水平垂直居中。现在总结一下几种方法。二、实现方法2.1、flex布局<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte原创 2022-03-22 17:35:08 · 175 阅读 · 0 评论