css个人盲点笔记（一）

        最近在准备假期实习的事情了，但是平日里代码还是敲得少，所以error...........

，参看网上一些面试题，对照个人在css（嗯，说css3也可以了）中存在的盲点做了点记录，希望这份总结除了对自己也能对看到的你有用。

文字内容溢出时显示....用于表示文字未全部显示结束。方案：用text-overflow:ellipsis;
外边距（margin）有一个特殊的行为，称为 外边距塌陷： 当两个盒子挨在一起时，二者之间的距离为两个挨着的外边距中最大的那个值，而不是二者的和。

盒子的 outline 看起来像边界，但是它不是盒模型的一部分。它表现得像边界，但是是画在盒子之上，不会修改盒子的大小（具体来说，ouline 是画在边界框之外，外边距区域之内）。

不透明度的设置方案：1：opacity设置，2：在设置背景色时用，rbga（）函数第四个参数就是不透明度。两者值的范围在0 - 1——设置透明度,或alpha通道。0是完全透明的,1是完全不透明的。其中opacity属性的透明对元素以及元素内的所有内容设置透明，而rgba()函数只作用元素自身或其背景色。
盒子的 outline 看起来像边界，但是它不是盒模型的一部分。它表现得像边界，但是是画在盒子之上，不会修改盒子的大小（具体来说，ouline 是画在边界框之外，外边距区域之内）。

css hack:由于不同厂商的浏览器或同一浏览器的不同版本对css的支持，解析不一样，导致在不同浏览器下呈现出来的页面展示效果不同。这时我们为了获得统一的页面效果，就需要针对不同的浏览器或版本写特定的css样式。我们便把这个过程叫做css hack。

CSS中属性值的类型有很多种:数值，颜色，百分比，函数，坐标位置。数值型：一般用于指定长度和尺寸，分绝对单位：px（像素），pt（点），pc（十二点活字），mm（毫米），cm（厘米），in（英寸）。相对单位，em（1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度），它们是相对于当前元素的字号或视口的尺寸。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。），rem（REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用），ex, ch（分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持。），vw, vh: 分别是视口宽度的1/100和视口高度的1/100，其次，它不像rem那样被广泛支持。

box-sizing常用属性值：content-box(w3c标准盒模型),border-box(怪异模型)。

link与@import的区别，link是HTML引入方式，而@import是css的引入方式，link的使用更早。当使用@import方式导入css样式时可能会发生FOUCF(Flash of Unstyled Content)，即在IE浏览器页面中不含样式的内容出现闪烁。解决，用link标签引入就好了。
HTML5中引入的隐藏方式<div hidden="hidden"></div>这种隐藏方式与用display:none;实现的效果相同。
最后顺带推荐看下关于css和Sass的代码规范文章：（曾经有同写前端的同学问我：“你们为什么都喜欢写注释啊？“。答约：“怕自己看不懂啊。”充分说明了好的代码规范重要性！！！！！！！！！！！！！虽然现在我不写注释了，但是我依旧看不同自己的代码。问题意识到了，希望有生之年得以改正。）

前端编码规范（4）—— CSS 和 Sass (SCSS) 规范