当前位置: 首页 > Web前端 > CSS

《寒冬》三年经验前端面试总结(含今日头条、百度、饿了么、滴滴等)CSS篇

时间:2023-03-30 16:59:02 CSS

前言无论是寒冬还是暖冬,都需要提前做好充分的准备找工作。面试时为了能够游刃有余。这篇文章是我最近工作准备和笔试中涉及的手写题的总结。为了你自己也为了那些需要它的人。CSS是前端必须掌握的技能之一。一般面试也会从CSS开始。所以你回答CSS问题的好坏,将直接影响你在面试官心目中的形象。本文主要介绍面试中经常遇到的CSS问题,并给出建议答案。《寒冬》近三年前端面试总结(包括今日头条、百度、饿了么、滴滴等)问题(一)《寒冬》三年经验前端面试总结(包括今日头条、百度、饿了么、滴滴等)什么,滴滴等)手写题(无极)盒模型盒模型感觉是初学前端会接触到的问题。元素根据盒子模型的规则布置在页面上。盒模型由四个属性组成:margin+border+padding+content,分为W3C标准盒模型和IE盒模型两种。W3C的标准盒模型width=content不包含border+paddingIE盒模型width=border+padding+content两者可以通过CSS3的box-sizing属性进行转换。box-sizing:content-box是W3C盒模型box-sizing:border-box是IE盒模型的垂直居中方式。如果全部写出来,有10多种。面试的时候一般都会说比较常用的。flex、position+transform、position+negativemargin是最常见的三种情况。

方法一:flex.outer{display:flex;证明内容:居中;align-items:center}方法二:position+transform,内部宽高未知.outer{position:relative;}.inner{position:absolute;左:50%;顶部:50%;transform:translate(-50%,-50%);}方法三:position+负边距,内宽高已知.outer{position:relative;}.inner{width:100px;高度:100px;位置:绝对;左:50%;顶部:50%;左边距:-50px;margin-top:-50px;}方法四:设置每个方向的距离为0,然后设置margin为auto,也可以实现,前提是已知内部的宽高。outer{position:relative;}.inner{宽度:100px;高度:100px;位置:绝对;顶部:0;右:0;底部:0;左:0;margin:auto;}三栏布局三栏布局是一种很常见的页面布局方式。左右固定,中间自适应。有很多方法可以实现这一点。第一种:flexleft
main
right.container{display:flex;}.left{flex-basis:200px;背景:绿色;}.main{flex:1;背景:红色;}.right{flex-basis:200px;background:green;}第二种:position+marginleftrightmainbody,html{padding:0;margin:0;}.left,.right{position:absolute;顶部:0;背景:红色;}.left{左:0;宽度:200px;}.right{右:0;宽度:200px;}.main{边距:0200px;background:green;}第三种:float+marginleftright主要正文,html{填充:0;保证金:0;}。左{浮动:左;宽度:200px;背景:红色;}.main{边距:0200px;背景:绿色;}.right{浮动:右;宽度:200px;background:red;}CSS权重计算方法CSS基本选择器包括ID选择器、类选择器、标签选择器、通配符选择器一般情况下,一般可以回答!important>InlineStyles>IDSelectors>ClassSelectors>LabelSelectors>WildcardSelectors。但是如果这些选择器同时作用于一个元素,那么最后该元素会应用哪种样式呢?这就涉及到权重计算的问题。关于权值的计算,有两种不同的计算方式:一种是按照二进制规则,另一种是按照1、10、100、1000。我比较喜欢二进制的方式。每个选择器的权重:内联样式,权重为1000的ID选择器,权重为0100的类、伪类和属性选择器,权重为0010的标签选择器和伪元素选择器,权重为0001的通配符,child为选择器,相邻选择器等,权重为0000的样式没有权重比较方法:如果级别相同,则继续向后比较。如果层级不同,不管下层有多少选择器,上层的权重更大。BFCBFC的全称是BlockFormattingContext,意思是块级格式化上下文。以下方法会创建BFC:根元素(html)浮动元素(元素的float不是none)绝对定位元素(元素的位置是absolute或fixed)inlineblock元素(元素的显示是inline-block)tablecell(theelement'sdisplayistable-cell,HTMLtablecelldefaultthisvalue)tabletitle(元素显示为table-caption,HTMLtabletitle默认为该值)anonymoustablecellelement(元素显示为table,table-row,table-row-group、table-header-group、table-footer-group(分别为HTMLtable、row、tbody、thead、tfoot的默认属性)或inline-table)溢出值不可见的块元素显示值流根元素包含值为layout、content或paint的元素弹性元素(display是flex或inline-flex元素的直接子元素)Grid元素(display是grid或inline-grid元素的直接子元素)多列容器(列的元素mn-count或column-width不是自动的,包括column-countof1)和column-spanofall总是创建一个新的BFC,即使元素没有包装在多列容器中(标准更改,Chrome错误).BFC布局规则:内部框将在垂直方向上一个接一个地放置。框的垂直距离由边距决定。属于同一BFC的两个相邻框的边距将重叠。3.每个元素的左边距接触包含块的左边界,即使对于浮动元素也是如此。BFC的区域不与浮动的元素区域重叠。BFC计算高度时,浮动的子元素也参与计算。BFC在页面上是一个隔离的、独立的容器。容器内的子元素不会影响容器外的元素,反之亦然。BFC可以解决的问题:父元素折叠,外边距重叠。清除浮动清除浮动的方法主要是防止父元素塌陷。清除浮点数的方法有很多种,常用的是clearfix伪类。方法一:clearfixinner.outer{background:blue;}.inner{width:100px;高度:100px;背景:红色;浮动:左;}.clearfix:之后{内容:“”;显示:块;高度:0;清除:两者;visibility:hidden;}方法二:多加一个div,clear:both.container{背景:蓝色;}.inner{宽度:100px;高度:100px;背景:红色;float:left;}.clear{clear:both;}方法三:触发父框BFC,overflow:hiddeninner。外{背景:蓝色;溢出:隐藏;}.inner{宽度:100px;高度:100px;背景:红色;float:left;}flexlayoutflexlayout现在很流行使用。使用flex可以轻松实现垂直居中。关于flex的属性不多。父容器和子容器各有6个,一共12个,比较好记。下面是我查看flex属性时的地图。position属性position属性的重要性应该不用多说。想必大家都能回答。absolute绝对定位,相对于静态定位以外的第一个父元素。relative相对定位,相对于自身正常位置的定位。fixed固定定位,相对于浏览器窗口定位。静态默认。没有定位,元素出现在正常流中。inherit指定位置属性的值应该从父元素继承。但是注意一个问题,父元素的哪个属性相对于哪个属性是绝对定位的?让我们通过下面的例子来看一下。.container{位置:相对;宽度:30px;高度:30px;边距:20px;边框:10px纯红色;填充:10px;背景:蓝色;}.inner{位置:绝对;宽度:10px;:0;左:0;background:pink;}从上图可以看出,它是相对于第一个父元素的padding来定位的,而不是静态定位。CSS3中添加了一个新的position:sticky属性,它的作用类似于position:relative和position:fixed的组合。元素相对定位,直到它们超过某个阈值,然后固定。必须指定top、right、bottom或left四个阈值之一,粘性定位才能生效。否则它的行为与相对定位相同。但粘性仍处于试验阶段。如何实现自适应正方形方法一:利用CSS3的vw单元,vw将视口的宽度平均分成100份。正方形{宽度:10vw;身高:10vw;background:red;}方法二:使用margin或padding百分比计算是根据父元素的width属性。正方形{宽度:10%;底边距:10%;高度:0;//防止内容展开多余的高度background:red;}如何用css实现一个三角形的方法一:使用盒模型的border属性,盒模型的border属性会在交界处显示一条平滑的斜线的上、下、左、右边界。通过设置上、下、左、右边框的不同宽度或颜色,可以获得三角形或梯形。.triangle{高度:0;宽度:0;边框颜色:红蓝绿粉红;边框样式:实心;border-width:30px;}如果要实现任意一个三角形,将其他方向的border-color全部设置为透明。.triangle{高度:0;宽度:0;border-color:red透明透明透明;边框样式:实心;border-width:30px;}方法二:在不了解clip-path属性的情况下使用CSS3的clip-path属性可以先看看MDN上的介绍:chip-path.triangle{width:30px;高度:30px;背景:红色;剪辑路径:多边形(0px0px,0px30px,30px0px);//设置坐标(0,0),(0,30),(30,0)相连形成三角形变换:rotate(225deg);//旋转225变成下三角}如果最后有错误请及时指出,以免误导小朋友。想看往期内容,页首有链接哦~

猜你喜欢