您的位置:新葡亰496net > 新葡亰官网 > 基础面试题

基础面试题

发布时间:2019-10-30 19:34编辑:新葡亰官网浏览(127)

    50道 CSS 基础面试题(附答案

    2018/03/16 · CSS · 2 评论 · 面试

    初藳出处: 刘宁Leo   

    1 介绍一下正式的CSS的盒子模型?与低版本IE的盒子模型有哪些两样的?

    职业盒子模型:宽度=内容的上涨的幅度(content) border padding margin
    低版本IE盒子模型:宽度=内容宽度(content border padding) margin

    2 box-sizing属性?

    用来调节作而成分的盒子模型的深入分析情势,默以为content-box
    context-box:W3C的正经八百盒子模型,设置成分的 height/width 属性指的是content部分的高/宽
    border-box:IE守旧盒子模型。设置元素的height/width属性指的是border padding content部分的高/宽

    3 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 比内联优先级高

    4 CSS优先级算法怎么着总括?

    要素选拔符: 1
    class选择符: 10
    id选择符:100
    要素标签:1000

    1. !important表明的体制优先级最高,如若冲突再扩充测算。
    2. 即便优先级相符,则选择最后现身的体裁。
    3. 三番五次获得的体制的优先级最低。

    5 CSS3新添伪类有这几个?

    p:first-of-type 采纳属于其父成分的第八个因素
    p:last-of-type 选用属于其父成分的尾声元素
    p:only-of-type 接收属于其父元素唯后生可畏的成分
    p:only-child 接纳属于其父成分的独一子成分
    p:nth-child(2) 接受属于其父元素的第三个子元素
    :enabled :disabled 表单控件的剥夺状态。
    :checked 单选框或复选框被入选。

    6 怎么居中div?怎么着居中三个转换成分?怎样让相对定位的div居中?

    div:

    border: 1px solid red; margin: 0 auto; height: 50px; width: 80px;

    1
    2
    3
    4
    border: 1px solid red;
    margin: 0 auto;
    height: 50px;
    width: 80px;

    扭转元素的内外左右居中:

    border: 1px solid red; float: left; position: absolute; width: 200px; height: 100px; left: 50%; top: 50%; margin: -50px 0 0 -100px;

    1
    2
    3
    4
    5
    6
    7
    8
    border: 1px solid red;
    float: left;
    position: absolute;
    width: 200px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -100px;

    纯属定位的左右居中:

    border: 1px solid black; position: absolute; width: 200px; height: 100px; margin: 0 auto; left: 0; right: 0;

    1
    2
    3
    4
    5
    6
    7
    border: 1px solid black;
    position: absolute;
    width: 200px;
    height: 100px;
    margin: 0 auto;
    left: 0;
    right: 0;

    再有越来越高雅的居中方式正是用flexbox,作者事后会做整合治理。

    7 display有啥样值?表达他俩的效力?

    inline(默认)–内联
    none–隐藏
    block–块显示
    基础面试题。table–表格呈现
    list-item–项目列表
    inline-block

    8 position的值?

    static(暗中同意):遵照常规文档流实行排列;
    relative(绝对固化):不脱离文书档案流,参谋自己静态地方通过 top, bottom, left, right 定位;
    absolute(相对定位):参照他事他说加以调查距其方今三个不为static的父级成分通过top, bottom, left, right 定位;
    fixed(固定定位):所一直的参阅对像是可视窗口。

    9 CSS3有如何新个性?

    1. 中华VGBA和反射率
    2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
    3. word-wrap(对长的不可分割单词换行)word-wrap:break-word
    4. 文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊间距,阴影颜色)
    5. font-face属性:定义自个儿的字体
    6. 圆角(边框半径):border-radius 属性用于创建圆角
    7. 边框图片:border-image: url(border.png) 30 30 round
    8. 盒阴影:box-shadow: 10px 10px 5px #888888
    9. 传播媒介询问:定义两套css,当浏览器的尺码变化时会采纳差异的性质

    10 请解释一下CSS3的flexbox(弹性盒布局模型),以至适用场景?

    该布局模型的目标是提供生龙活虎种越来越高效的点子来对容器中的条目款项举办布局、对齐和分红空间。在价值观的布局格局中,block 布局是把块在笔直方向从上到下依次排列的;而 inline 布局则是在档案的次序方平素排列。弹性盒布局并不曾这么内在的势头节制,能够由开采人士自由操作。
    试用场景:弹性布局符合于运动前端开拓,在Android和ios上也完美支持。

    11 用纯CSS成立贰个三角的规律是怎样?

    首先,要求把元素的肥瘦、中度设为0。然后设置边框样式。

    width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;

    1
    2
    3
    4
    5
    6
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #ff0000;

    12 贰个满屏品字布局怎么着策画?

    第风流罗曼蒂克种真正的品字:

    1. 三块高宽是鲜明的;
    2. 地方那块用margin: 0 auto;居中;
    3. 下边两块用float大概inline-block不换行;
    4. 用margin调节地方使她们居中。

    其次种全屏的品字布局:
    地方的div设置成百分百,上边包车型地铁div分别宽八分之四,然后利用float可能inline使其不换行。

    13 常见的宽容性难题?

    1. 现在和过去比很差别样浏览器的标签默许的margin和padding不等同。*{margin:0;padding:0;}
    2. IE6双边距bug:块属性标签float后,又有暴行的margin意况下,在IE6展现margin比设置的大。hack:display:inline;将其转变为行内属性。
    3. 渐进识别的秘诀,从完整中逐步消释某些。首先,神奇的应用“9”那风流洒脱标识,将IE浏览器从有着意况中分离出来。接着,再一次使用“ ”将IE8和IE7、IE6分离开来,那样IE8已经独自识别。
    { background-color:#f1ee18;/*所有识别*/
    .background-color:#00deff\9; /*IE6、7、8识别*/
     background-color:#a200ff;/*IE6、7识别*/
    _background-color:#1e0bd1;/*IE6识别*/ }
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f63185b796766176988-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f63185b796766176988-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f63185b796766176988-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f63185b796766176988-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f63185b796766176988-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f63185b796766176988-6">
    6
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f63185b796766176988-1" class="crayon-line">
    {
    </div>
    <div id="crayon-5b8f63185b796766176988-2" class="crayon-line crayon-striped-line">
    background-color:#f1ee18;/*所有识别*/
    </div>
    <div id="crayon-5b8f63185b796766176988-3" class="crayon-line">
    .background-color:#00deff9; /*IE6、7、8识别*/
    </div>
    <div id="crayon-5b8f63185b796766176988-4" class="crayon-line crayon-striped-line">
     background-color:#a200ff;/*IE6、7识别*/
    </div>
    <div id="crayon-5b8f63185b796766176988-5" class="crayon-line">
    _background-color:#1e0bd1;/*IE6识别*/
    </div>
    <div id="crayon-5b8f63185b796766176988-6" class="crayon-line crayon-striped-line">
    }
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    1. 设置超小中度标签(常常小于10px),在IE6,IE7中中度超越自个儿设置中度。hack:给高于中度的标签设置overflow:hidden;可能设置行高line-height 小于你设置的莫大。
    2. IE下,能够采取获取常规属性的办法来收获自定义属性,也足以运用getAttribute()获取自定义属性;Firefox下,只好动用getAttribute()获取自定义属性。解决措施:统一通过getAttribute()获取自定义属性。
    3. Chrome 普通话分界面下暗许会将小于 12px 的公文强制依照 12px 展现,可通过参与 CSS 属性 -webkit-text-size-adjust: none; 解决。
    4. 超链接待上访谈之后hover样式就不现身了,被点击访谈过的超链接样式不再抱有hover和active了。清除方式是退换CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

    14 为啥要开首化CSS样式

    因为浏览器的包容难题,分歧浏览器对有个别标签的私下认可值是例外的,要是没对CSS起首化往往会产出浏览器之间的页面展现差别。

    15 absolute的containing block计算办法跟健康流有怎样两样?

    不论属于哪一种,都要先找到其祖先成分中近些日子的 position 值不为 static 的因素,然后再判别:

    1. 若此因素为 inline 成分,则 containing block 为能够满含那些成分生成的第2个和末段五个 inline box 的 padding box (除 margin, border 外的区域) 的细微矩形;
    2. 要不然,则由那些祖先成分的 padding box 构成。

    固然都找不到,则为 initial containing block。

    补充:

    1. static(暗中同意的)/relative:简单说便是它的父成分的内容框(即去掉padding的一些)
    2. absolute: 向上找这段日子的原则性为absolute/relative的成分
    3. fixed: 它的containing block生龙活虎律为根成分(html/body)

    16 CSS里的visibility属性有个collapse属性值?在差异浏览器下之后怎么着界别?

    当四个成分的visibility属性被安装成collapse值后,对于日常的因素,它的表现跟hidden是相通的。

    1. chrome中,使用collapse值和使用hidden未有分别。
    2. firefox,opera和IE,使用collapse值和平运动用display:none未有何样界别。

    17 display:none与visibility:hidden的区别?

    display:none 不出示相应的成分,在文书档案布局中不再分配空间(回流 重绘)
    visibility:hidden 掩盖对应成分,在文档布局中仍保存原本的长空(重绘)

    18 position跟display、overflow、float那一个特色相互叠合后会怎么着?

    display属性规定成分应该转换的框的类型;position属性规定成分的永世类型;float属性是风流倜傥种布局形式,定义成分在哪个方向变化。
    附近于优先级机制:position:absolute/fixed优先级最高,有她们在时,float不起功用,display值要求调动。float 大概absolute定位的成分,只好是块成分或表格。

    19 对BFC规范(块级格式化上下文:block formatting context)的理解?

    BFC规定了内部的Block Box如何布局。
    定点方案:

    1. 里头的博克斯会在笔直方向上一个接多个放置。
    2. Box垂直方向的相距由margin决定,属于同叁个BFC的四个相邻博克斯的margin会发生重叠。
    3. 各样成分的margin box 的左边,与包蕴块border box的左侧相接触。
    4. BFC的区域不会与float box重叠。
    5. BFC是页面上的一个切断的单独容器,容器里面包车型地铁子成分不会影响到外边的要素。
    6. 算算BFC的冲天时,浮动成分也会插手总计。

    满足下列条件之生龙活虎就可触发BFC

    1. 根元素,即html
    2. float的值不为none(默许)
    3. overflow的值不为visible(私下认可)
    4. display的值为inline-block、table-cell、table-caption
    5. position的值为absolute或fixed

    20 为啥晤面世转移和怎么时候需求免去浮动?撤除浮动的方法?

    更动成分遇到包罗它的边框也许转移成分的边框停留。由于变化元素不在文档流中,所以文档流的块框表现得就疑似浮动框不设有相像。浮动成分会上浮在文书档案流的块框上。
    浮动带来的主题素材:

    1. 父成分的万丈相当小概被撑开,影响与父成分同级的因素
    2. 与变化成分同级的非浮动成分(内联成分)会尾随其后
    3. 若非率先个要素浮动,则该因素早先的要素也急需扭转,不然会影响页面显示的布局。

    清除浮动的点子:

    1. 父级div定义height
    2. 末段三个变迁成分后加空div标签 并增多样式clear:both。
    3. 包括浮动元素的父标签增加样式overflow为hidden或auto。
    4. 父级div定义zoom

    21 上下margin重合的难题

    在重叠元素外包裹意气风发层容器,并触发该容器生成叁个BFC。
    例子:

    <div class="aside"></div> <div class="text"> <div class="main"></div> </div> <!--下面是css代码--> .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属性。 }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div class="aside"></div>
    <div class="text">
        <div class="main"></div>
    </div>
    <!--下面是css代码-->
    .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属性。
            }

    22设置成分浮动后,该因素的display值是微微?

    电动成为display:block

    23 移动端的布局用过媒体询问吗?

    经过媒体询问可感到差别尺寸和尺寸的传播媒介定义分裂的css,适应相应的装置的突显。

    1. <head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
    2. CSS : @media only screen and (max-device-width:480px) {/css样式/}

    24 使用 CSS 预管理器吧?
    Less sass

    25 CSS优化、升高质量的形式有啥?

    1. 防止超负荷限定
    2. 防止后代选拔符
    3. 制止链式选拔符
    4. 应用紧密的语法
    5. 幸免不供给的命名空间
    6. 制止不须要的双重
    7. 最佳使用表示语义的名字。三个好的类名应该是陈述她是怎么着实际不是像什么
    8. 防止!important,能够选用任何选取器
    9. 尽心竭力的简短准则,你能够统一不一样类里的再一次准绳

    新葡亰496net,26 浏览器是如何深入深入分析CSS选择器的?

    CSS选拔器的分析是从右向左拆解解析的。若从左向右的卓绝,开掘不符合法则,须求进行追思,会损失相当多属性。若从右向左相称,先找到全数的最右节点,对于每贰个节点,向上寻找其父节点直到找到根成分或满意条件的相称法规,则截止那几个分支的遍历。三种相称准则的属性差别相当的大,是因为从右向左的匹配在首先步就筛选掉了大批量的不适合条件的最右节点(叶子节点),而从左向右的非凡准则的习性都浪费在了退步的搜寻上边。
    而在 CSS 剖判达成后,必要将解析的结果与 DOM Tree 的内容一齐进行拆解深入分析创设朝气蓬勃棵 Render Tree,最后用来开展绘图。在确立 Render Tree 时(Web基特 中的「Attachment」进程),浏览器就要为各样 DOM Tree 中的成分依照 CSS 的剖判结果(Style Rules)来明显生成如何的 Render Tree。

    27 在网页中的应该利用奇数依旧偶数的字体?为何吧?

    使用偶数字体。偶数字号绝对更易于和 web 设计的别样一些组成比例关系。Windows 自带的点阵行书(中易大篆)从 Vista 从头只提供 12、14、16 px 那三个大大小小的点阵,而 13、15、17 px时用的是小风华正茂号的点。(即种种字占的长台湾空中大学了 1 px,但点阵没变),于是略显荒凉。

    28 margin和padding分别相符哪些情况使用?

    哪天使用margin:

    1. 内需在border外侧增加空白
    2. 空白处无需背景象
    3. 上下不断的五个盒子之间的空域,须求相互抵消时。

    何时使用padding:

    1. 内需在border内侧增加空白
    2. 空白处要求背景颜色
    3. 上下不断的八个盒子的空域,希望为互相之和。

    包容性的主题素材:在IE5 IE6中,为float的盒子钦点margin时,侧边包车型客车margin恐怕会化为两倍的上升的幅度。通过转移padding或然钦定盒子的display:inline消除。

    29 成分竖向的比重设定是相对于容器的冲天吗?

    当按百分比设定八个因素的上涨的幅度时,它是相对于父容器的拉长率总结的,可是,对于一些意味着竖向间隔的质量,例如padding-top , padding-bottom , margin-top , margin-bottom 等,当按比例设定它们时,依据的也是父容器的宽窄,并不是莫斯中国科学技术大学学。

    30 全屏滚动的规律是怎么着?用到了CSS的怎么属性?

    1. 规律:有一点点相似于轮播,全部的成分一向排列下去,即便有5个要求体现的全屏页面,那么惊人是500%,只是彰显百分百,剩下的能够透过transform举办y轴定位,也足以因此margin-top达成
    2. overflow:hidden;transition:all 1000ms ease;

    31 什么是响应式设计?响应式设计的基本原理是怎么?如何合营低版本的IE?

    响应式网址设计(Responsive Web design)是二个网址能够合作五个顶峰,并不是为每一个极限做三个一定的本子。
    基本原理是通过媒体询问检测分化的设施荧屏尺寸做拍卖。
    页面尾部必需有meta表明的viewport。

    <meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

    1
    <meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

    32 视差滚动作效果应?

    视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,调整背景的移位速度比前途的移动速度慢来创立出令人侧目的3D效果。

    1. CSS3实现
      亮点:开垦时间短、质量和支付效能相比好,瑕疵是不能够合作到低版本的浏览器
    2. jQuery实现
      经过调节不一致层滚动速度,计算每意气风发层的大运,调整滚动作效果应。
      亮点:能合作到种种版本的,效果可控性好
      症结:开辟起来对制我供给高
    3. 插件完成情势
      举例:parallax-scrolling,宽容性十二分好

    33 ::before 和 :after中双冒号和单冒号有怎么着界别?解释一下那2个伪成分的效率

    1. 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。
    2. ::before便是以三个子成分的留存,定义在要素主体内容前边的二个伪成分。并不设有于dom之中,只设有在页面之中。

    :before 和 :after 那八个伪成分,是在CSS2.1里新面世的。发轫,伪成分的前缀使用的是单冒号语法,但随着Web的迈入,在CSS3的正统里,伪成分的语法被涂改成选择双冒号,成为::before ::after

    34 你对line-height是何等通晓的?

    行高是指意气风发行文字的冲天,具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height,未有定义height属性,最后其表现效能自然是line-height。
    单行文本垂直居中:把line-height值设置为height相通大小的值能够达成单行文字的垂直居中,其实也得以把height删除。
    多行文本垂直居中:需求安装display属性为inline-block。

    35 怎么让Chrome扶植小于12px 的文字?

    p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

    1
    p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

    36 让页面里的书体变明晰,变细用CSS咋做?

    -webkit-font-smoothing在window系统下并未有起功用,可是在IOS设备上起效能-webkit-font-smoothing:antialiased是一流的,灰度平滑。

    37 position:fixed;在android下无效怎么管理?

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

    1
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

    38 借使急需手动写动画,你以为最小时间隔离是多短时间,为何?
    多数字显示示器私下认可频率是60Hz,即1秒刷新五18次,所以理论上异常的小间距为1/60*1000ms = 16.7ms。

    39 li与li之间有看不见的空域间距是怎么样原因引起的?有啥息灭办法?

    行框的排列会遭到中间空白(回车空格)等的影响,因为空格也属于字符,这一个空白也会被应用样式,吞没空间,所以会有间距,把字符大小设为0,就从不空格了。
    缓慢解决情势:

    1. 能够将<li>代码全体写在一排
    2. 浮动li中float:left
    3. 在ul中用font-size:0(谷歌(Google)不支持);能够应用letter-space:-3px

    40 display:inline-block 哪天会显得间隙?

    1. 有空格时候会有暇时 解决:移除空格
    2. margin正值的时候 解决:margin使用负值
    3. 使用font-size时候 解决:font-size:0、letter-spacing、word-spacing

    41 有一个惊人自适应的div,里面有四个div,一个可观100px,希望另叁个填满剩下的惊人

    外层div使用position:relative;中度须求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

    42 png、jpg、gif 那么些图片格式解释一下,分别哪天用。有未有领会过webp?

    1. png是便携式互连网图片(Portable Network Graphics)是生龙活虎种无损数据压缩位图像和文字件格式.优点是:压缩比高,色彩好。 半数以上地点都足以用。
    2. jpg是大器晚成种针对照片使用的风姿罗曼蒂克种失真压缩方法,是生机勃勃种破坏性的回退,在色彩及颜色平滑变化做的不利。在www上,被用来囤积和传导照片的格式。
    3. gif是风度翩翩种位图像和文字件格式,以8位色重现真色彩的图像。能够落成动画效果.
    4. webp格式是Google在二〇〇八年生产的图片格式,压缩率唯有jpg的2/3,大小比png小了四分之二。短处是减少的时刻更加久了,包容性倒霉,近些日子Google和opera扶植。

    43 style标签写在body后与body前有哪些界别?

    页面加载自上而下 当然是先加载样式。
    写在body标签后由于浏览器以逐行情势对HTML文书档案实行深入分析,当剖析到写在尾巴部分的样式表(外联或写在style标签)会招致浏览器甘休以前的渲染,等待加载且解析样式表完结未来再也渲染,在windows的IE下可能会产出FOUC现象(即样式失效导致的页面闪烁问题)

    44 CSS属性overflow属性定义溢出成分内容区的情节会如何地理?

    参数是scroll时候,必会师世滚动条。
    参数是auto时候,子元素内容超越父成分时现身滚动条。
    参数是visible时候,溢出的剧情出今后父成分之外。
    参数是hidden时候,溢出隐蔽。

    45 演讲一下CSS 百事可乐s

    将三个页面涉及到的兼具图片都富含到一张大图中去,然后使用CSS的 background-image,background- repeat,background-position 的重新整合展开背景定位。利用CSS Sprites能很好地压缩网页的http央浼,进而大大的进步页面包车型大巴属性;CSS Pepsi-Colas能减弱图片的字节。

    接连不断矫正中…

    2 赞 26 收藏 2 评论

    新葡亰496net 1

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:基础面试题

    关键词: