近几日学习CSS小结（杂记）

CSS的引入方式：

内联style属性，
style标签，
外部文件CSS link，
@import url（./b.css）

英文单词具有不可分割性，可用以下代码处理：

word-break //单词打断
word-break-all //单词以字母为结构粉碎性打断

两个块级元素并排最好用float，然后在包裹它们的div里用clearfix，最好不要用display: inline-block;
clear fix：

.clearfix:after {
    content:" ";
    display: block;
    clear: both;
} //用于解决使用float后出现bug的问题。

文档流就是文档内元素的流动方向：

1.内联元素从左上往右下流动。
2.块级元素从上往下流。

div的高度是由其内部文档流元素的高度总和决定；
内联元素的高度基本不可测，在font-size比较小的时候可以用line-height来控制内联元素所占高度；
(一般情况下，字体大小比较小的时候，你写行高是多少，那么行高就是多少。)

内联元素高度：
1.基线对齐；
2.字体都有一个建议行高，如果不写行高，则浏览器会默认取建议行高；
3.span里只有一个字，那么这个span就由这个字的建议行高再综合其它的字体相关的设计，来得到一个无法确定的值，前端无法确定，由设计师确定。

content-box与border-box区别在于两者的盒子的宽度是否包含表框和内边距。

content-box的width不包括padding和border；
border-box的width包括padding和border；

给display:inline元素设置宽高是无效的，设置margin-top,margin-bottom是无效的。

position属性的五个取值：

static //默认值。没有定位，元素出现在正常的流中。
inherit //规定应该从父元素继承position属性的值。
relative //生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20”会向元素的LEFT位置添加20像素。
absolute //生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。
fixed //生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。

背景图片居中及按照比例缩放的代码：

background-position: center center; //第一个center表示水平方向上居中，第二个center表示垂直方向上居中
background-size: cover; //cover的意思是盖住所有面积按照比例缩放

div居中小方法：

如果有一个div，然后你有一个宽度，不管是max-width还是width，只需要写margin-right: auto; margin-left: auto; 此div就会水平居中。

用CSS做出 各种形状的网站：CSS tricks shape
图标的工具网站：iconfont.cn

svg的语法：
width ：宽 height ：高 fill ：颜色
vertical-align:top;