CSS 知识碎片 [一] 面试常问

业精于勤 荒于嬉

1、css水平、垂直居中的写法，请至少写出4种？

水平居中

• 行内元素 text-align : center
• 块元素：margin 0 auto
• display:flex + justify-content: center
• position:absolute + left:50%+ transform:translateX(-50%)

垂直居中

• 设置line-height 等于 height 
• display:flex +align-items:center
• position:absolute+top:50% +transform:translateY(-50%)

• display:table-cell + vertical-align: middle

2、画一条0.5px 的直线

考察css 的 transform 

height: 1px;
transform: scale(0.5);

3、说一下盒模型

盒模型的组成，由里向外content,padding,border,margin.

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width指content部分的宽度

box-sizing的使用,box-sizing 的默认值是W3C 标准 content-box

 box-sizing: content-box 是W3C盒子模型
 box-sizing: border-box 是IE盒子模型

4、画一个三角形

   .a {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent #0099CC transparent transparent;
            transform: rotate(90deg);
            /*顺时针旋转90°* border-color 上 右 下 左 */
        }

    <div class="a"></div>

5、为什么要初始化CSS样式?

• 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
• 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化

6、知道css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

7、CSS3动画（简单动画的实现，如旋转等）

• 依靠CSS3中提出的三个属性：transition、transform、animation
• transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
• transform：定义元素的变化结果，包含rotate、scale、skew、translate。
• animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

8、清除浮动的几种方式，各自的优缺点

• 父级div定义height
• 结尾处加空div标签clear:both
• 父级div定义伪类:after和zoom
• 父级div定义overflow:hidden
• 父级div也浮动，需要定义宽度
• 结尾处加br标签clear:both
• 比较好的是第3种方式，好多网站都这么用

积跬步 至千里