2021Web前端经典面试题之CSS篇

开课吧开课吧小易2021-02-03 17:22

CSS是前端中经常会用到的一种层叠样式表,在Web前端面试中也会被经常问到。这次小编就为大家整理了一些2021年Web前端经典面试题中的CSS面试题。

Web前端面试

一、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选择器(h1 + p) 5.子选择器(ul< li) 6.后代选择器(li a) 7.通配符选择器( * ) 8.属性选择器(a[rel = "external"]) 9.伪类选择器(a: hover, li: nth - child) 可继承的样式: font-size font-family color, UL LI DL DD DT; 不可继承的样式:border padding margin width height ; 优先级就近原则,同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag important 比内联优先级高

二、CSS3新增伪类举例:

p:first-of-type选择属于其父元素的首个元素的每个元素。

p:last-of-type 选择属于其父元素的最后元素的每个元素。 p:only-of-type 选择属于其父元素唯一的元素的每个元素。 p:only-child 选择属于其父元素的唯一子元素的每个元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。 :enabled :disabled 控制表单控件的禁用态。 :checked单选框或复选框被选中。

三、如何居中div?如何居中一个浮动元素? 给div设置一个宽度,然后添加margin:0 auto属性

div{ width:200px; margin:0 auto; }

居中一个浮动元素

确定容器的宽高宽500 高 300 的层 设置层的外边距 .div

{ Width:500px ; height:300px;//高度可以不设 Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%;}

四、列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?

1.block 象块类型元素一样显示。 none 缺省值。象行内元素类型一样显示。 inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示,并添加样式列表标记。

2. absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

fixed (老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位。

relative 生成相对定位的元素,相对于其正常位置进行定位。

static 默认值。没有定位,元素出现在正常的流中 *(忽略 top, bottom, left, right z-index 声明)。

inherit 规定从父元素继承 position 属性的值。

以上就是CSS相关的Web前端面试题,如果你还需要更多面试题,可以来开课吧广场Web前端面试频道获取。

有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营