1. 首页
  2. IT资讯

前端面试题及答案 – CSS篇

这篇文章并不是最全的前端面试题(没有最全,只有更全),只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记,方便后面有面试需要的小伙伴们借鉴,后续内容会不定时更新,有错误之处希望大家不吝指出。

1、CSS3的新特性

  • 实现圆角(border-radius)
  • 阴影(box-shadow)
  • 文字加特效(text-shadow)
  • 线性渐变(gradient)
  • 旋转(transform)
  • 媒体查询,多栏布局

具体
2、CSS中 link 和@import 的区别

  • link属于HTML标签,而@import是CSS提供的;
  • 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
  • import只在IE5以上才能识别,而link是HTML标签,无兼容问题;
  • link方式的样式的权重 高于@import的权重.

3、介绍一下CSS的盒子模型

通过css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型(content-box)和IE模型(border-box)详细介绍

  • 两种盒模型:标准W3C盒模型、IE盒模型。
  • 区别对比:(注意蓝色背景区域大小)
  1. 标准盒模型元素宽度width=content=100px,高度计算相同
前端面试题及答案 - CSS篇

    1. IE模型元素宽度width=content + 2 x padding + 2 x border = 70px + 2 x 10px + 2 x 5px = 100px。
前端面试题及答案 - CSS篇

4、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)
  • 继承
1. 可继承的样式: font-size font-family color, text-indent; 2. 不可继承的样式:border padding margin width height;
  • 新增伪类
p:first-of-type 选择属于其父元素的首个 <p> 元素。 p:last-of-type  选择属于其父元素的最后 <p> 元素。 p:only-of-type  选择属于其父元素唯一的 <p> 元素。 p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。 p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。 :enabled  :disabled 控制表单控件的禁用状态。 :checked        单选框或复选框被选中。
  • 优先级算法规则:优先级就近原则,同权重情况下样式定义最近者为准;
!important >  id > class > tag   important  内联优先级高,但内联比 id 要高

5、为什么要清除浮动?如何清除?
引起的问题:
(1)父元素的高度无法被撑开,影响与父元素同级的元素
(2)与浮动元素同级的非浮动元素会跟随其后
(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

解决方法:
1、利用clear清除浮动

.son {         clear: left | right | both | auto     }

2、在父元素后面额外添加标签

<div class="parent">     ...     <div style="clear:both;"></div> </div>

3、父元素上使用after伪类

#parent:after {     content: '';     clear: both;     height: 0;     display: block; }

4、利用overflow清除浮动

#parent {     overflow: auto;     display: inline-block; }

6、实现垂直居中的几种方法

<div class="parent">     <div class="son"></div> </div>
  • margin: auto
.parent {     width: 400px;     height: 400px;     position: relative;     .son {         position: absoulte;         left: 0;         right: 0;         top: 0;         bottom: 0;         margin: auto;     } }
  • margin-left、margin-top负值法(需知道子元素width、height)
.parent {     width: 400px;     height: 400px;     position: relative;     .son {         position: absolute;         width: 100px;         height: 160px;         left: 50%;         top: 50%;         //margin-top: translateY(-50%);         //margin-left: translateX(-50%);         margin-top: -80px;         margin-left: -50px;     } }
  • flex
.parent{     display: flex;     align-items: center;     justify-content: center; }
  • table-cell(未脱离文档流)
.parent {     display: table-cell;     vertical-align: middle;     text-align: center; }

原作者姓名:lishaoh
原出处:SegmentFault
原文链接:人类身份验证 – SegmentFault

原文始发于:前端面试题及答案 – CSS篇

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/23029.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code