css面试笔记（一）

1. 消除图片底部间隙

• 图片块状化-无基线对齐：img{display：block;}
• 图片底线对齐：img{vertical-align：bottom;}
• 父级设置：font-size：0;
• 行高足够小-基线位置上移：.box{line-height：0;}

2. 文本显示行数控制

• 单行：

p{
	width: xxx;
	overflow: hidden;
	text-overflow: ellipsis; // 溢出显示...
	white-space: nowrap; //不进行换行
}

• 多行：

p{
	max-width: 200px;
	display: -webkit-box; // 将元素作为弹性伸缩盒子模型显示
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2; // 限制行数
	-webkit-box-orient: vertical; // 子元素的排列方式
}

不换行必须设置 word-break或while-space

3. 响应式网站

响应式网站设计是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做相应的处理。

页面头部必须有meta声明的viewport

  <meta name="viewport" content="width=device-width, initial-scale=1.0" min-scale="1.0" max-scale="1.0" user-scalable="false">

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• height：和 width 相对应，指定高度。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。

媒体查询

@media only screen and (min-width: 375px) and (max-width: 413px) {
    html{
		font-size: 100px;
	}
}

媒体类型

• screen：计算机屏幕（默认）
• speech：应用于屏幕阅读器等发声设备
• print：打印预览模式/打印页面。
• all：适用于所有设备

具体可看：https://www.runoob.com/cssref/css3-pr-mediaquery.html

4. 常见的单位

• px：绝对单位，相对于显示器屏幕分辨率而言的
• em：相对长度单位，相对于父元素（不常用）
• rem：相对长度单位，相对于根元素html字体大小（用于响应式布局）

5. CSS3过渡和动画

• 过渡：transition用于做过渡效果，没有帧概念，只有开始和结束状态，性能开销较小，被动触发。
• 动画：animation用于做动画，有帧的概念，可以重复触发且有中间状态，性能开销较大，主动触发

动画多数显示器默认频率60HZ 所以 1/60 * 1000ms = 16.7ms
具体属性：https://www.runoob.com/cssref/css-animatable.html

6. 精灵图（css sprite）

概念：把一堆小的图片整合到一张大的图片上

优点

• 很好的减少网页的请求，大大的提高页面的性能
• 减少图片的字节
• 解决命名的困扰
• 换风格方便

缺点

• 图片合并时需预留好足够空间，宽屏、高分辨率的屏幕下易出现背景断裂
• 开发较麻烦，测量繁琐
• 维护麻烦，背景少许改动有可能影响整张图片，使得字节增加还要改动css

7. 选择器优先级

!important>行内样式>id选择器>类选择器、伪类、高级选择器>标签选择器>通配符（*）>继承

权重算法(!important，id选择器，类选择器，标签选择器)
比较大小：从左到右比较（0，1，2，3）> （0，1，1，5）

8. CSS引入

• link：XHTML标签，权重高、无兼容问题
• @import：CSS提供

<style type="text/css">
	@import url(css/example.css)
</style>

注意：当用JS控制DOM去改变样式时，只能用link，因为@import眼里只有CSS

区别
加载顺序的区别，当一个页面被加载的时候，link引用css会同时被加载。而@import（可再次嵌套其他样式表）引用的css会等到页面全部被下载完再被加载。@import引入的话服务器压力太大。