css基础

CSS基础

1.介绍一下标准的CSS盒子模型？与低版本IE的盒子模型有什么不同？

标准盒子模型：宽度=内容宽度（content）+border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content + border + padding）+ margin

2.box-sizing属性

用来控制元素的盒子模型的解析模式，默认为content-box；
content-box：W3C的标准盒子模型，设置元素的height/width属性指的是content部分的宽/高；
border-box：IE传统盒子模型。设置元素的height/width属性指的是border+padding+content部分的宽高。

3.CSS选择器有哪些？哪些属性可以继承？

CSS选择符：id选择器、类选择器、标签选择器、属性选择器、相邻选择器、子选择器、后代选择器、通配符选择器、伪类选择器、伪元素选择器
可继承的属性：font-size、font-family、color
不可继承的属性：border、padding、margin、width、height
优先级：!important > id > class > tag
!important比内联优先级高。

4.CSS3新增伪类元素有哪些？

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

5.如何居中div?

div：100px；height:100px;margin:0 auto;
浮动元素上下左右居中：
div：float:left; position:absolute;100px; height:100px; left:50%;top:50%; margin:-50px 0 0 -50px;
绝对定位左右居中：
div：position:absolute; 100px; height:100px; margin:0 auto; left:0; right:0;
**更加优雅的居中方式使用flexbox。

6.display有哪些值，作用是什么？

inline(默认)：内联
none：隐藏
block：块显示
table：表格显示
list-item：项目列表
inline-block：行内块

7.position的值？定位方式。

static：按照正常文档流进行排列；
relative(相对定位)：不脱离文档流，参考自身静态位置通过top/bottom/left/right定位；
absolute(绝对定位)：脱离文档流，参考最近的一个已定位元素，通过top/bottom/left/right定位；
fixed(固定定位)：所固定的参照对象是可视窗口；

8.CSS3有哪些新特性？

1.RGBA和透明度；
2.background-image background-origin background-size background-repeat
3.word-wrap:break-word；对长的不可分割单词换行显示
4.文字阴影：text-shadow:5px 5px 5px #fff;（水平阴影，垂直阴影，模糊距离，阴影颜色）
5.font-face属性：定义自己的字体；
6.圆角：border-radius属性用于创建圆角
7.边框图片：border-image:url(…) 30 30 round;
8.盒阴影：box-shadow:10px 10px 5px #fff;
9.媒体查询：定义两套css，当浏览器的尺寸变化时采用不同的样式；

8.请解释一下CSS3的flexbox（弹性盒布局模型），以及适用场景？

该布局模型目的时提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block布局时把块在垂直方向上下依次排列的；而inline布局则是在水平方向上来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
适用场景：弹性布局适合在移动端开发。
采用felx布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为flex项目，简称“项目”；任何一个容器都可以指定为flex布局，行内元素也可以。Webkit内核的浏览器，需使用-webkit前缀。
*设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

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

首先将元素的宽度/高度设置为0，然后设置边框样式。
0;height:0;
border-top:40px solid transparent;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:40px solid #fff;

10.一个满屏品字布局如何设计？

方案一：三块高度是确定的；上面那块用margin:0 auto居中；下面两块用float或inline-block不换行；用margin调整位置使它们居中；
方案二：上面的div设置为100%，下面的div分别宽50%，然后使用float或者inline使其不换行。

11.常见的兼容性问题？

1.IE9以上浏览器刷新不显示eot等图标字体问题：IE9以上出于性能考虑，图标字体使用缓存，但业务框架通常是禁用缓存的，因此首次加载后显示正常，而刷新之后图标字体无法显示。方案：针对图标字体增加过滤器，设置其可使用缓存。
2.IE6双边距问题：块属性标签浮动之后，又有横行的margin情况下，在IE6显示margin比设置的大。hack:display:inline;将其转化为行内属性；
3.Chrome中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入CSS属性-webkit-text-size-adjust:none;解决；
4.超链接访问过后hover样式失效，被点击访问过的超链接样式不再具有hover和active了。解决方案：改变CSS属性的排列顺序：L-V-H-A a:link{} a:visited{} a:hover{} a:active{};

12.为什么要初始化css样式

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

13.display:none和visibility:hidden的区别

display:none不现实对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility:hidden隐藏对应元素，在文档布局中仍然占用原来的空间。
visibility:collapse当在表格元素中使用时，此值可删除一行/列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他元素上，会呈现为“hidden”；

14.对BFC规范（块级格式化上下文：block formatting context）的理解？

BFC规定了内部的Block Box如何布局：
定位方案：
1.内部的Box会在垂直方向上一个接一个放置；
2.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠；
3.每个元素的margin box的左边，与包含块border box的左边相接触；
4.BFC的区域不会与float box重叠；
5.BFC是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
6.计算BFC的高度时，浮动元素也会参与计算。

15.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素就会漂浮在文档流的块框上。
浮动带来的问题：
1.父元素的高度无法撑开，影响与父元素同级的元素；
2.与浮动元素同级的非浮动元素（内联元素）会跟随其后；
3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
1.父级div定义height;
2.最后一个浮动元素后追加空div元素，并clear:both;
3.包含浮动元素的父元素标签添加样式overflow为hidden或auto；
4.父级div定义zoom

16.移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。

17.浏览器是怎样解析CSS选择器的？

css选择器的解析是从右往左解析的。先找到多有的最后节点，对于每一个节点，向上寻找其父节点直到找到根元素或者满足条件的匹配规则，则结束这个分支的遍历。从右向左的匹配第一步就筛选掉了大量的不符合条件的最右节点（子节点）。
CSS解析完毕后，需要将解析的结果与DOM Tree的内容一起进行分析建立Render Tree，最终用来进行绘图。在建立Render Tree时，浏览器就要为每个DOM Tree中的元素根据CSS的解析结果（style Rules）来确定生成怎样的Render Tree。

18.元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top，padding-bottom，margin-top，margin-bottom等，当按百分比设定它们，依据的也是父容器的宽度，而不是高度。

19.全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度就是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现；
overflow:hidden; transition: all 1000ms ease;

20.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

21.视差滚动效果？

通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果；
1.css3实现：开发时间短，性能和开发效率比较好，缺点是不能兼容到低版本的浏览器；
2.jQuery实现：通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
3.插件实现方式：parallax-scrolling

22.：：before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用？

1.单冒号用于CSS3的伪类，双冒号用于CSS3 的伪元素；
2.：：before就是以一个子元素的存在，定义在元素主题内容之前的一个伪元素。并不存在于dom之中，只存在于页面之中。

23.你对line-height是如何理解的？

行高指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以删除height.
多行文本垂直居中：需要设置display属性为inline-block。

24.如果需要手动写动画，你认为最小时间间隔是多久？为什么？

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

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

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