常见问题
px, em, rem 的区别
- px : 固定单位，像素。在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；
- em : 相对单位， 值不固定的，会继承父级元素的字体大小，代表倍数；
- rem : 相对单位， 值不固定的，始终是基于根元素(html)的，也代表倍数
盒模型
W3C 标准中padding、border所占的空间不在width、height范围内；
IE盒模型中width包括“content尺寸+padding+border”。
- IE盒模型
D889D700-0A44-4602-82E4-53CC5FA36FDE.png
-
W3C盒模型
C638EE88-4111-4837-9821-D68E88CCCFDD.png
*{ box-sizing: border-box;}
*{ box-sizing: border-box;} 作用是告诉浏览器当前使用的是IE盒模型，设置的边框（border）和内边距（padding）值是包含在width和height内的。
line-height: 2和line-height: 200% 的区别
这两个都表示行高是字体大小的 2 倍， 他们的区别主要体现在子元素继承时， 如下所示：
-
line-height: 2行高是2倍的文字大小，均以相应的字体为基准。也就是说父元素设置line-height: 2会直接继承给子元素， 子元素会根据自己的 font-size 再去计算子元素自己的行高（继承倍数）； -
line-height: 200%行高是2倍的文字大小，文字大小是指父元素中设定的字体大小。父元素设置line-height: 200%是计算好了line-height 值（多少px）， 然后再把这个值继承给子元素，不随子元素的font-size改变（继承具体像素的行高值） 。
CSS sprite
原理：把多个小icon合成一个大的图片，使用的时候，元素以这张合成后的大图为背景，通过设置background-position的属性来获取指定icon。
优点：合并原来图片的请求，减少http的性能消耗。
缺点：CSS sprite不能太大，不然下载图片的时间会过长。
应用：
- 制作一张网页的图标。
- 制作动画。
让一个元素"看不见"有几种方式？有什么区别?
常规：
display:none;
visibility:hidden;
opacity:0;
其他(以下消失都是有前提条件的)：
height:0;width:0;padding:0;margin:0;border:0; ... etc
position:absolute; left:1000000px; top:100000px; ...etc;
z-index:-1000;...etc
background-color:rgba(0,0,0,0);
总结： 元素"看不见"的方式主要方式让元素用户在当前页面展示的视口里看不见。
区别
-
opacity: 0;透明度为0， 整体，仍旧会占据空间， 只是看不到，绑定的事件还是会触发 -
visibility: hidden;和opacity: 0类似，只是看不见， 但是实际依旧存在，利于SEO优化。如果父元素应用了 visibility: hidden ，则它的所有子元素也都会不可见，但是可以通过给子元素设置 visibility:visible 来让子元素可见。visibility:hidden;的元素绑定的事件不会触发 -
display：none;从文档流消失， 不占位置，对浏览器来说不存在， 还存在DOM树中,它但是不利于SEO。如果父元素应用了display：none;， 则它的所有子元素也都会不可见。display：none 绑定的事件不会触发 -
background-color: transparent;只是背景色透明
CSS 继承
什么是CSS继承
每个 CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。
当元素的一个继承属性 （inherited property）没有指定值时，则取父元素的同属性的计算值 。只有文档根元素取该属性的概述中给定的初始值。
通俗的讲就是当 Inherited: Yes 时 ， 子元素可以继承父元素的属性，即被包在内部的标签可以继承外部标签的样式。
- 所有元素可继承： visibility和cursor
- 内联元素可继承：
letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction - 块状元素可继承：text-indent和text-align
- 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
- 表格元素可继承：border-collapse
- 不可继承的：
display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi
常见样式写法
inline-block 特性及如何去除缝隙
inline-block特性
- 默认不占据一行
- 设置的上下padding、margin、border占据文档空间
- 水平排列按照base-line对齐，且元素之间会存在一个'空'元素的缝隙
- 可以用vertical-align设置垂直对齐，比如 设置
vertical-align: top；可以让 inline-block 元素顶端对齐 - 可以设置text-align属性有效
- 会形成一个BFC(块级格式化上下文)。
总结：一个拥有正常盒模型的行内元素，既拥有inline的特点，也有block的特性
去除缝隙
产生缝隙的原因是：回车、换行或者多个空格都会被浏览器当作一个空白字符。因此， 我们只要把空白字符去掉就可以了。
1. 去除HTML中的空格
<span class="box">
hello</span><span class="box">
hello</span>
或者是：
<span class="box">hello</span
><span class="box">hello</span>
又或者是：
<span class="box">hello</span><!--消除缝隙
--><span class="box">hello</span>
2. 父元素设置font-size:0。将父容器的font-size 设为0，这样空白字符大小为0 了， 自然就没有缝隙了。
.wrap{
text-align: center;
font-size: 0;
}
.box{
border: 1px solid;
width: 100px;
display: inline-block;
font-size: 16px
}
- 标签不闭合，但是此时不能为inline-block元素设置width属性（设置了会换行）
<span class="box">hello
<span class="box">hello</span>
或者：
<span class="box">hello
<span class="box">hello
3.元素设置浮动
文本溢出
单行文本溢出加 ...
{ white-space: nowrap; /* 禁止文字自动转行 */
over-flow: hidden; /* 溢出后隐藏 */
text-overflow: ellipsis; /* 文本溢出之后加 ···*/
多行文本溢出加 ...
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 这里的 3 是可以根据需要改变的，这里代表只显示3行。超出就会溢出
overflow: hidden;
用 CSS 实现一个三角形
思路：
- 将div的宽高设置为0 ；
- 然后分别设置上右下左边框（粗一些）；
- 最后将不需要的颜色改为transparent（透明）或跟背景色一样的颜色
CSS代码如下：
.triangle{
width: 0;
height: 0;
border-top: solid 30px transparent;
border-right: solid 30px blue;
border-bottom: solid 30px transparent;
border-left: solid 30px transparent;
}
或者这样写：
.triangle {
border-color: transparent blue transparent transparent;
border-style: solid;
border-width: 30px 30px 30px 0;
height: 0px;
width: 0px;
}
效果如下：
970FF355-062B-4D5F-8897-77F8C74C1E1B.png
变换字母大小写 ： text-transform && font-variant
text-transform: uppercase
text-transform: lowercase
text-transform: capitalize
font-variant: small-caps
/* font Variant用于将字体变成小型的大写字母（即与小写字母等高的大写字母 */
image.png
禁止自动换行
white-space: nowrap;
用图片替换文字
有时我们需要在标题栏中使用图片，但是又必须保证搜索引擎能够读到标题，CSS语句可以这样写：
h1 {
text-indent:-9999px;
background:url("h1-image.jpg") no-repeat;
width:200px;
height:50px;
}
CSS提示框
当鼠标移动到链接上方，会自动出现一个提示框
<a class="tooltip" href="#">
链接文字
<span>提示文字</span>
</a>
a.tooltip {
position: relative
}
a.tooltip span {
display: none;
padding: 5px;
width: 200px;
}
a:hover {
background: #fff;
}
a.tooltip:hover span {
display: inline;
position: absolute;
}
参考：
网友评论