CSS3面试题

CSS3面试题
1 解释box-sizing
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

应用场景：统一风格的表单元素 表单中有一些input元素其实还是展现的是传统IE盒模型，带有一些默认的样式，而且在不同平台或者浏览器下的表现不一，造成了表单展现的差异。此时我们可以通过box-sizing属性来构建一个风格统一的表单元素

2 水平垂直居中的方法？

行内元素布局

line-height + text-align

行内块元素布局

vertical-align + line-height + text-align

块布局

position absolute + margin auto +top,bottom,left,right=0

position absolute + top:50%,left50% + translate(-50%, -50%)

 position absolute + top:50%,left50% +

margin:-元素宽度一半 0 0 -元素高度一半

父容器子容器不确定宽高的块级元素，做上下居中

1.flex

#wrap{

    display:flex;

    justify-content:center;

    align-items:center;

}

2.table

.parent {

   text-align: center;//水平居中

   display: table-cell;

   vertical-align: middle;//垂直居中

}

.child {

    display: inline-block;//防止块级元素宽度独占一行，内联元素可不设置

}

3.webkit-box

//对父级元素设置

position: relative;

display: -webkit-box;

-webkit-box-align: center;

-webkit-box-pack: center;

3 实现左边定宽右边自适应效果

1.table(父级元素)与tabel-cell（两个子集元素）

2.flex(父级元素)+flex :1（右边子元素）

3.左边定宽，并且左浮动；右边设置距离左边的宽度

4.左边定宽，左边设置position:absolute；右边设置距离左边的宽度

4 三列布局（中间固定两边自适应宽度）

1. 采用浮动布局（左边左浮动，右边右浮动，中间margin：0 宽度值）

2. 绝对定位方式（左右绝对定位，左边left0右边right0，中间上同）

3. 圣杯布局与双飞翼布局

5 清除浮动元素的方法和各自的优缺点

清除浮动，实际上是清除父元素的高度塌陷。因为子元素脱离了父元素的文档流，所以，父元素失去了高度，导致了塌陷。要解决这个问题，就是让父元素具有高度。

浮动元素的特性： 在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。浮动到右侧的元素，其他内容将从左侧环绕它（浮动元素影响的不仅是自己，它会影响周围的元素对其进行环绕。float仍会占据其位置，position:absolute不占用页面空间 会有重叠问题 ）

1.在浮动元素末尾添加空标签清除浮动 clear:both （缺点：增加无意义标签）

<div style="clear:both;"></div>

2.给父元素设置 overflow:auto属性

3.after伪元素

6 css实现自适应正方形

方案一：CSS3 vw 单位（相对值的单位）

方案二：设置垂直方向的padding撑开容器

方案三：利用伪元素的 margin(padding)-top 撑开容器

7 介绍position的值

1. absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位；如果没有定位父级，则参照初始包含块进行定位。

2. fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口。

3. relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

4. static 默认值。没有定位，元素出现在正常的流中

8 如何在页面上实现一个圆形的可点击区域

1、字体图标

2、border-radius

3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

9 CSS3新增伪类有那些

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

    p:last-of-type 选择属于其父元素的最后<p> 元素的每个<p>元素

    p:only-of-type  选择属于其父元素唯一的<p>元素的每个<p>元素

    p:only-child   选择属于其父元素的唯一子元素的每个<p>元素

    p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素

    ::after   在元素之前添加内容,也可以用来做清除浮动

    ::before  在元素之后添加内容  

    :disabled  控制表单控件的禁用状态

    :checked   单选框或复选框被选中

10 CSS3有哪些新特性

    新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）

    圆角           （border-radius:8px）

    多列布局     （column）

    阴影和反射   （Shadow\Reflect）

    文字特效      （text-shadow）

    线性渐变      （gradient）

    旋转，缩放,定位,倾斜 （transform）

    动画          （Animation）

多背景，背景裁剪

11 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景

   一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

   较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。

   采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。

   它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

   常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。

在布局上有了比以前更加灵活的空间

12 用纯CSS创建一个三角形的原理是什么

  把上、左、右三条边隐藏掉（颜色设为 transparent）

        #demo {width: 0;height: 0;border-width: 20px;border-style: solid;

              border-color: transparent transparent red transparent;}

13 一个满屏 品 字布局 如何设计

上面的div宽100%，

下面的两个div分别宽50%，

然后用float或者inline使其不换行即可

14 css等高布局如何实现

  利用padding-bottom|margin-bottom正负值相抵；

  设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，

  当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差

15 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

     行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了

16 为什么要初始化CSS样式

  因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

  最简单的初始化方法： * {padding: 0; margin: 0;}

  淘宝的样式初始化代码：

  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {margin:0; padding:0; }

  body, button, input, select, textarea { font:12px/1.5tahoma, arial; }

  h1, h2, h3, h4, h5, h6{ font-size:100%; }

  address, cite, dfn, em, var { font-style:normal; }

  code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

  small{ font-size:12px; }

  ul, ol { list-style:none; }

  a { text-decoration:none; }

  a:hover { text-decoration:underline; }

  sup { vertical-align:text-top; }

  sub{ vertical-align:text-bottom; }

  legend { color:#000; }

  fieldset, img { border:0; }

  button, input, select, textarea { font-size:100%; }

  table { border-collapse:collapse; border-spacing:0; }

17 请解释一下为什么需要清除浮动？清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

  1、父级div定义height；

  2、父级div 也一起浮动；

  3、常规的使用一个class；

    .clearfix::before, .clearfix::after {

        content: " ";

        display: table;

    }

    .clearfix::after {

        clear: both;

    }

    .clearfix {

        *zoom: 1;

}

18 SASS/LESS编译的时候，浮动元素的父级div定义伪类:after

    &::after,&::before{

        content: " ";

          visibility: hidden;

          display: block;

          height: 0;

          clear: both;

    }

  解析原理：

  1) display:block 使生成的元素以块级元素显示,占满剩余空间;

  2) height:0 避免生成内容破坏原有布局的高度。

  3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

  4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；

  5）zoom：1 触发IE hasLayout。

通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

19 CSS优化、提高性能的方法有哪些

  关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；

  如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；

  提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;

  使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；

20 怎么让Chrome支持小于12px 的文字

  1、用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

  2、使用12px及12px以上字体大小：为了兼容各大主流浏览器，建议设计美工图时候设置大于或等于12px的字体大小，如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜。

  3、继续使用小于12px字体大小样式设置：如果不考虑chrome可以不用考虑兼容，同时在设置小于12px对象设置-webkit-text-size-adjust:none，做到最大兼容考虑。

  4、使用12px以上字体：为了兼容、为了代码更简单 从新考虑权重下兼容性。

21 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

22 display:inline-block 什么时候会显示间隙？(携程)

 移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing、浮动

23 超链接访问过后hover样式就不出现的问题是什么？如何解决

被点击访问过的超链接样式不再具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

24 rgba()和opacity的透明效果有什么不同

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

25 px和em的区别

px和em都是长度单位，区别是：

px值固定，容易计算。

em值不固定，是相对单位，其相对应父级元素的字体大小会调整

26 描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？
Reset样式的目的是清除浏览器某些默认样式，方便css书写，例如：

*｛margin:0;padding:0;list-style:none;｝

Normalize的理念与reset不同，它并不清除浏览器默认样式，而是尽量将所有浏览器的默认样式统一

27 Sass、LESS是什么？大家为什么要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

为什么要使用它们？

结构清晰，便于扩展。

可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

可以轻松实现多重继承。

完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

28 为什么要初始化样式

用于浏览器默认css样式的存在并且不同浏览器对相同HTML标签的默认样式不同，若不初始化会造成不同浏览器之间的显示差异

29 对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性

30 使用css实现一个持续的动画效果

animation:mymove 5s infinite;

@keyframes mymove {

from {top:0px;}

to {top:200px;}

}

31 重排和重绘

部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。

由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。

32 什么情况会触发重排和重绘？

添加、删除、更新 DOM 节点
通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
移动或者给页面中的 DOM 节点添加动画
添加一个样式表，调整样式属性
用户行为，例如调整窗口大小，改变字号，或者滚动

33. animation对应的属性
写法：animation: name duration timing-function delay iteration-count direction; 
下面是对应的属性的介绍 
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 
animation-timing-function 规定动画的速度曲线。 
animation-delay 规定在动画开始之前的延迟。 
animation-iteration-count 规定动画应该播放的次数。 
animation-direction 规定是否应该轮流反向播放动画。

34  transition?
css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 注意区别transform，transform是进行2D转换的 如移动，比例化，反过来，旋转，和拉伸元素。