Css面试题
50道CSS基础面试题 https://segmentfault.com/a/1190000013325778
1、针对Chrome中文界面下，默认强制最小字体为12px的问题
font-size：20px -webikt-transform：scale（0.5）
2、display:none与visibility:hidden的区别
visibility在文档布局有位置占空间，适合在手机端切换显示，防止突然加一块内容会挤开原有布局
3、浮动
浮动带来的问题：
父元素的高度无法被撑开，造成父元素塌陷
与浮动统计的非浮动元素会跟随其后
若非第一个元素浮动，则该元素之前的元素也许要浮动，否则会影响页面显示的结构。浮动的元素会跑到第一元素位置
清除浮动的方式 ：
父元素设置height
clear：both
父元素overflow设置为hidden
父元素定义zoom （定义缩放比例）
对于overflow与zoom清除浮动带来影响的一些认识
由于浮动导致父元素塌陷，当使用overflow：hidden时有不能隐藏子元素，只能将父元素撑高
zoom是放大父元素和子元素，但是父元素height：0无法放大，只能将父元素撑高
4、zoom与scale的区别
zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origion来设置
zoom只在IE下起作用
5、transform、transition、animation
变形 transform
transform:rotate(-20deg) 旋转
transform:scale(x,y) 缩放
transform:translate(x,y) 移动
过渡 transition
transition: background-color 0.3s ease 0;
动画 animation
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
6、上下margion会重合，使用数值大的
7、浏览器字体应该使用偶数，使用奇数字体的时候，浏览器渲染的点阵实际是按照比奇数字体小一号的点，但是字体所占空间变大1号，于是就略显稀松，同时行高也没有显示对，使用对齐的时候会有问题
7、pading-top、bottom与margion-top、bottom当按照百分比设定它们时，依据的是父容器的宽度，而不是高度
8、：：before和：after中双冒号与单冒号有什么区别
单冒号是伪类，双冒号是伪元素
伪类是设置样式的，伪元素是以一个子元素存在，定义在元素主体之前/之后的一个伪元素，并不存在dom之中，只存在页面之中。在里面可以添加content：“文字”
9、line-hegiht
css中起高度作用的是heigth和line-height，没有定义height属性，最终变现作用一定是line-height
一般实现单行文本垂直居中
10、li与li之前看不见的空白间隔
是由于书写的时候换行符引起的，可以将li写在一行，可以使用font-size：0，再设置li里的字体。设置li中float：left
11、style文件需要写在头部head
页面自上而下加载，当解析到尾部的样式表会导致浏览器停止之前的渲染，等待加载且解析样式完成后，更新渲染。
12、script文件需要写在body后
js的下载和执行会阻塞dom树的构建，中断dom树的更新
13、第一个子元素的margion-top影响父元素
因为父元素没有设置padding和border时，第一个子元素的margion-top会和父元素重叠。
所有毗邻的两个或更多盒元素的margion将会合并为一个margion共享之。毗邻的定义为：同级或嵌套的盒元素，并且他们之间没有非空内容、padding或border分隔
解决办法是父元素设置padding或border或overflow
14、块级元素与行内元素
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.
块级元素可以设置width,height属性.行内元素设置width,height属性无效，它的长度高度主要根据内容决定.块级元素即使设置了宽度,仍然是独占一行.
块级元素可以设置margin和padding属性.行 内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.
块级元素对应于display:block.行内元素对应于display:inline.
块级元素常见的有：div......行内元素常见的有：a，span
如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。
