欢迎光临S11竞猜有限公司官网!
S11竞猜10年专注高精度恒温恒湿设备定制生产厂家
全国咨询热线:0826-69313480
联系我们
S11竞猜有限公司
全国免费服务热线:0826-69313480
手机:12487442559
邮箱:admin@ytqczz.com
地址 :湖南省衡阳市南岳区奥标大楼92号
联系人:陈先生
您的位置: 主页 > S11竞猜新闻 > 产品活动 >
产品活动

企业常问的CSS基础面试题(附谜底)

时间:2021-10-16 05:58:01 来源:LOL全球总决赛下注 点击:

本文摘要:今天中公优就业·浙江IT培训的小U老师为大家带来一些前端面试中,常问到的CSS基础面试题,希望大家可以扎实基础,应对种种面试。

LOL全球总决赛下注

今天中公优就业·浙江IT培训的小U老师为大家带来一些前端面试中,常问到的CSS基础面试题,希望大家可以扎实基础,应对种种面试。1、先容一下尺度的CSS的盒子模型?与低版本IE的盒子模型有什么差别的?尺度盒子模型:宽度=内容的宽度(content)+ border + padding + margin低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin2、display有哪些值?说明他们的作用?inline(默认)–内联none–隐藏block–块显示table–表格显示list-item–项目列表inline-block3、position的值?static(默认):根据正常文档流举行排列;relative(相对定位):不脱离文档流,参考自身静态位置通过 top, bottom, left, right 定位;absolute(绝对定位):参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位;fixed(牢固定位):所牢固的参照对像是可视窗口。4、CSS3有哪些新特性?RGBA和透明度background-image background-origin(content-box/padding-box/border-box) background-size background-repeatword-wrap(对长的不行支解单词换行)word-wrap:break-word文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)font-face属性:界说自己的字体圆角(边框半径):border-radius 属性用于建立圆角边框图片:border-image: url(border.png) 30 30 round盒阴影:box-shadow: 10px 10px 5px #888888媒体查询:界说两套css,当浏览器的尺寸变化时会接纳差别的属性5、请解释一下CSS3的flexbox(弹性盒结构模型),以及适用场景?该结构模型的目的是提供一种越发高效的方式来对容器中的条目举行结构、对齐和分配空间。在传统的结构方式中,block 结构是把块在垂直偏向从上到下依次排列的;而 inline 结构则是在水平偏向来排列。

弹性盒结构并没有这样内在的偏向限制,可以由开发人员自由操作。试用场景:弹性结构适合于移动前端开发,在Android和ios上也完美支持。6、一个满屏品字结构如何设计?第一种真正的品字:三块高宽是确定的;上面那块用margin: 0 auto;居中;下面两块用float或者inline-block不换行;用margin调整位置使他们居中。

第二种全屏的品字结构:上面的div设置成100%,下面的div划分宽50%,然后使用float或者inline使其不换行。7、CSS优化、提高性能的方法有哪些?制止过分约束制止子女选择符制止链式选择符使用紧凑的语法制止不须要的命名空间制止不须要的重复最好使用表现语义的名字。一个好的类名应该是形貌他是什么而不是像什么制止!important,可以选择其他选择器尽可能的精简规则,你可以合并差别类里的重复规则8、浏览器是怎样剖析CSS选择器的?CSS选择器的剖析是从右向左剖析的。

若从左向右的匹配,发现不切合规则,需要举行回溯,会损失许多性能。若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找其父节点直到找到根元素或满足条件的匹配规则,则竣事这个分支的遍历。

两种匹配规则的性能差异很大,是因为从右向左的匹配在第一步就筛选掉了大量的不切合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS 剖析完毕后,需要将剖析的效果与 DOM Tree 的内容一起举行分析建设一棵 Render Tree,最终用来举行绘图。在建设 Render Tree 时(WebKit 中的「Attachment」历程),浏览器就要为每个 DOM Tree 中的元素凭据 CSS 的剖析效果(Style Rules)来确定生成怎样的 Render Tree。9、在网页中的应该使用奇数还是偶数的字体?为什么呢?使用偶数字体。

偶数字号相对更容易和 web 设计的其他部门组成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个巨细的点阵,而 13、15、17 px时用的是小一号的点。

(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。10、 margin和padding划分适合什么场景使用?何时使用margin:需要在border外侧添加空缺空缺处不需要配景色上下相连的两个盒子之间的空缺,需要相互抵消时。何时使用padding:需要在border内侧添加空缺空缺处需要配景颜色上下相连的两个盒子的空缺,希望为两者之和。兼容性的问题:在IE5 IE6中,为float的盒子指定margin时,左侧的margin可能会酿成两倍的宽度。

通过改变padding或者指定盒子的display:inline解决。11、为什么要初始化CSS样式因为浏览器的兼容问题,差别浏览器对有些标签的默认值是差别的,如果没对CSS初始化往往会泛起浏览器之间的页面显示差异。

12、 absolute的containing block盘算方式跟正常流有什么差别?无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:若此元素为 inline 元素,则 containing block 为能够包罗这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形;否则,则由这个祖先元素的 padding box 组成。如果都找不到,则为 initial containing block。增补:static(默认的)/relative:简朴说就是它的父元素的内容框(即去掉padding的部门)absolute: 向上找最近的定位为absolute/relative的元素fixed: 它的containing block一律为根元素(html/body)13、CSS里的visibility属性有个collapse属性值?在差别浏览器下以后什么区别?当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的体现跟hidden是一样的。

chrome中,使用collapse值和使用hidden没有区别。firefox,opera和IE,使用collapse值和使用display:none没有什么区别。

14、display:none与visibility:hidden的区别?display:none 不显示对应的元素,在文档结构中不再分配空间(回流+重绘)visibility:hidden 隐藏对应元素,在文档结构中仍保留原来的空间(重绘)15、position跟display、overflow、float这些特性相互叠加后会怎么样?display属性划定元素应该生成的框的类型;position属性划定元素的定位类型;float属性是一种结构方式,界说元素在哪个偏向浮动。类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float不起作用,display值需要调整。

float 或者absolute定位的元素,只能是块元素或表格。16、对BFC规范(块级花样化上下文:block formatting context)的明白?BFC划定了内部的Block Box如何结构。定位方案:内部的Box会在垂直偏向上一个接一个放置。

Box垂直偏向的距离由margin决议,属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box 的左边,与包罗块border box的左边相接触。

BFC的区域不会与float box重叠。BFC是页面上的一个隔离的独立容器,容器内里的子元素不会影响到外面的元素。盘算BFC的高度时,浮动元素也会到场盘算。

满足下列条件之一就可触发BFC根元素,即htmlfloat的值不为none(默认)overflow的值不为visible(默认)display的值为inline-block、table-cell、table-captionposition的值为absolute或fixed17、为什么会泛起浮动和什么时候需要清除浮动?清除浮动的方式?浮动元素遇到包罗它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中,所以文档流的块框体现得就像浮动框不存在一样。

浮动元素会漂浮在文档流的块框上。浮动带来的问题:父元素的高度无法被撑开,影响与父元素同级的元素与浮动元素同级的非浮动元素(内联元素)会追随其后若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。清除浮动的方式:父级div界说height最后一个浮动元素后加空div标签 并添加样式clear:both。

包罗浮动元素的父标签添加样式overflow为hidden或auto。父级div界说zoom18、上下margin重合的问题在重合元素外包裹一层容器,并触发该容器生成一个BFC。例子:.aside {margin-bottom: 100px;width: 100px;height: 150px;background: #f66;}.main {margin-top: 100px;height: 200px;background: #fcc;}.text{/*盒子main的外面包一个div,通过改变此div的属性使两个盒子分属于两个差别的BFC,以此来阻止margin重叠*/overflow: hidden; //此时已经触发了BFC属性。

}19、box-sizing属性?用来控制元素的盒子模型的剖析模式,默认为content-boxcontext-box:W3C的尺度盒子模型,设置元素的 height/width 属性指的是content部门的高/宽border-box:IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部门的高/宽20、CSS选择器有哪些?哪些属性可以继续?CSS选择符:id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、子女选择器(li a)、通配符选择器(*)、属性选择器(a[rel=”external”])、伪类选择器(a:hover, li:nth-child)可继续的属性:font-size, font-family, color不行继续的样式:border, padding, margin, width, height优先级(就近原则):!important > [ id > class > tag ]!important 比内联优先级高21、CSS优先级算法如何盘算?元素选择符: 1class选择符: 10id选择符:100元素标签:1000!important声明的样式优先级最高,如果冲突再举行盘算。如果优先级相同,则选择最后泛起的样式。

继续获得的样式的优先级最低。22、CSS3新增伪类有那些?p:first-of-type 选择属于其父元素的首个元素p:last-of-type 选择属于其父元素的最后元素p:only-of-type 选择属于其父元素唯一的元素p:only-child 选择属于其父元素的唯一子元素p:nth-child(2) 选择属于其父元素的第二个子元素:enabled :disabled 表单控件的禁用状态。:checked 单选框或复选框被选中。

23、设置元素浮动后,该元素的display值是几多?自动酿成display:block24、移动端的结构用过媒体查询吗?通过媒体查询可以为差别巨细和尺寸的媒体界说差别的css,适应相应的设备的显示。里边CSS : @media only screen and (max-device-width:480px) {/css样式/}。


本文关键词:S11竞猜,企业,常问,的,CSS,基础,面,试题,附,谜底,今天

本文来源:S11竞猜-www.ytqczz.com

在线客服
联系方式

热线电话

12487442559

上班时间

周一到周五

公司电话

0826-69313480

二维码
线