前端面试CSS
时间：2023-03-31 00:56:34
CSS
选择器权重和优先级选择器类型：id选择器（#myid）类选择器（.myclassname）标签选择器（div,h1,p）相邻选择器（h1+p）子选择器（ul>li）后代选择器(lia)通配符选择器(*)属性选择器(a[rel="external"])伪类选择器(a:hover,li:nth-child)权重分为四个等级：代表内联样式，比如style="xxx"，权重为1000；表示ID选择器，例如#content，权重为100；表示类、伪类和属性选择器，如.content、:hover、[attribute]，权重为10；表示元素选择器和伪元素选择器，比如div,p，权重为1。需要注意的是，一般选择器（*）、子选择器（>）和相邻兄弟选择器（+）不在这四层，所以它们的权重都是0。权重值大的选择器也有高优先级，相同权重的优先级遵循后一个定义并覆盖前一个定义。盒模型标准盒模型：width=内容宽度（content）+border+padding+margin低版本IE盒模型：width=内容宽度（content+border+padding）+marginbox-sizing属性：content-box：标准模式border-box下盒模型的计算方法：奇葩模式下盒模型的计算方法margin)，这样比较符合我们的实际要求。浮动floatfloat的初衷是为文字环绕效果设计的，即图片带有文字，图片float:left后，文字会环绕图片。float的破坏性——float破坏了父标签原有的结构，使得父标签出现塌陷现象。造成这种现象最根本的原因是设置为float的元素会脱离文档流。根本原因在于float最初是为了解决文字环绕图片的问题而设计的。float这个效果大家应该都记得吧。清除float.clearfix:after{content:'';显示：表格；清除：两者；}.clearfix{*缩放：1；/*兼容低版本IE*/>
如何使用text-align实现内联元素的水平居中：centerblock元素使用margin:auto绝对定位的元素可以结合left和margin，但是必须知道宽度。.item{宽度：300px；高度：100px；位置：绝对；左：50%；margin:-150px;}如何实现垂直居中内联元素可以设置line-height的值等于高度值，比如单行文字的垂直居中：.容器{高度：50px；line-height:50px;}绝对定位的元素可以结合left和margin，但是必须知道size。优点：兼容性好缺点：需要提前知道尺寸。容器{位置：相对；高度：200px;}.item{宽度：80px;高度：40px；位置：绝对；左：50%；顶部：50%；margin-top:-20px;margin-left:-40px;}绝对定位可以结合transform实现居中。优点：不需要提前知道大小缺点：兼容性差.container{position:relative;高度：200px;}.item{宽度：80px;高度：40px；位置：绝对；左：50%；顶部：50%；转换：翻译（-50%，-50%）；background:blue;}绝对定位结合margin:auto，不需要提前知道大小，兼容性好。container{position:relative;高度：300px;}.item{宽度：100px;高度：50px；位置：绝对；左：0；顶部：0；右：0；底部：0；margin:auto;}移动端的布局你用过媒体查询吗？
stylesheet"type="text/css"href="xxx.css"media="onlyscreenand(max-device-width:480px)">CSS:@mediaonlyscreenand(max-device-width:480px){/cssstyle/}cssanimation首先，使用@keyframes定义一个名为testAnimation的动画。下面的代码通过百分比设置不同的CSS样式来指定动画的变化。所有的动画变化都可以用这种方式定义。@keyframesmyfirst{0%{背景：红色；左：0；顶部：0；}25%{背景：黄色；左：200px；顶部：0；}50%{背景：蓝色；左：200px；top:200px;}75%{背景:绿色;左：0；顶部：200像素；}100%{背景：红色；左：0；top:0;}}然后，为CSS选择器设置动画，例如div元素设置动画如下：div{width:100px;高度：50px；位置：绝对；动画名称：myfirst；动画持续时间：5秒；}
