CSS3 box-sizing 属性分为content-box和border-box
content-box：在该盒属性下，对元素设定的width和height会被应用到元素内容框，在内容框宽高之外绘制元素的内边距和边框。
border-box：在该盒属性下，对元素设定的width和height会被应用到元素边框盒，为元素设置的的任何padding和border都将在已设定的width和height内进行绘制。 通过从已设定的宽高分别减去padding和border得到内容框的宽高。
display:block：block元素会独占一行，默认情况下宽度会自动填满父级元素的宽度；可以手动设置width和height属性，也可设置padding和margin属性。
display:inline：inline元素在有多个的情况会自动排列填满一行后换行，宽度是由元素内容决定，设置width、height属性无效，设置竖直方向的padding、margin属性无效。
display:inline-block：inline-block元素是借鉴了以上两种元素的特性，在有多个该元素的情况时会保持同行排列，同时也可以对其中每一个元素设置宽高、间距属性。
文档流：文档内元素的流动方向，即内联元素从左到右，块级元素独占一行从上到下。
div 块级元素的高度：是根据内部文档流元素的总和来决定的。
关于块级元素的height属性，一般情况下不建议手动设置，不易修改元素内容，易产生页面显示误差。
通常该通过对该元素的padding元素来实现页面需求，设置padding可防止元素内容改变时造成元素的height改变。
span行内元素的特殊情况：行内字体size比较大时，可能会出现设置的line-height与浏览器显示的元素高度不一致的bug情况！【暂时未能解决，可能是要将line-height属性放在font属性后方能确保无误】
word-break:break-all ：任意中日韩字、字母之间可换行。
word-break:break-word ：只能在单词或字之间换行。
列表左右双列布局：可通过对dt dd设置浮动，然后在对其width设置百分比属性，从而可实现左右两列五五分或者其他比例的双列布局
在元素浮动并且设置了width：100%的情况下，设置横向padding会导致元素宽度超出body宽度。这种情况我们可以通过给该元素增加一个父元素，对父元素单独设置横向padding。
清除浮动：
css设置
.clearfix::after{
content: "";
display: block;
clear: both;
}
background-size：cover
background-position：center center
max-height 属性用来设置给定元素的最大高度。如果height 属性设置的高度比该属性设置的高度还大，则height 属性会失效。
min-height、max-height、height 优先级：同时出现时max和min谁大谁优先（height已失效）；只有当height小于max-height时，height优先。
文字对齐是由基线对齐，而不是中线对齐。
每一种字体存在其自带的建议行高，在未对字体设置行高的情况时浏览器会默认采用字体建议行高。
【关于字体度量的详细讲解可参考此文：《深入理解 CSS：字体度量、line-height 和 vertical-align》——方应杭】
相对定位（relative）：相对定位的元素是在文档流中的正常位置偏移给定的值，而且不会影响其他元素的偏移。
绝对定位（absolute、fixed）：绝对定位的元素脱离了文档流，而且不占据空间，相对于最近的非 static 祖先元素定位。
固定定位（fixed）：元素的包含块为 viewport 视口，在没有滚动条时和absolute没有差异，在有滚动条的情况下，fixed定位不会随滚动条移动而移动。例：fixed应用在页面边缘固定的小广告。
粘性定位（sticky）：可看作相对定位和固定定位两种特性合于一体的定位。元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。举个例子，将阈值设定为top:0 ，这个值表示当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。
字体默认像素大小16px
inherit 继承 优先级：设置颜色>设置继承颜色>浏览器默认颜色>body默认继承颜色
页面调试小技巧：给需要调试的元素添加border属性{border：1px solid red}