CSS入门

---

1 .css简介

css2.1是目前世界上应用最广泛的版本，2011年开始css被分为多个模块单独升级，统称为CSS3，查看 css spec文档
PS: 没有css4, 只有各个模块的level 4。

---

2. 如何做横向布局（float + clearfix）

1. 给那几个元素全加上style="float:left/right" .
2. 给他们的父元素加上class="clearfix".

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

---

3. 高度

文档流: 文档内元素的流动方向

• div（块级元素）：高度是由内部文档流元素高度的总和决定的。文档流：文档内元素的流动方向，内联元素是从左往右，块级元素是从上往下
• span（内联元素）：高度是由其中文字高度决定的，内联元素设置width和height是无效的，上下的margin和padding也无效，要将它们设为display:inline-block才有效。

---

4. TIPS

四种引入 CSS 的方式：style 属性、style 标签、css link、css import

尽量不写height和width，会引出很多问题，要设置宽高的时候用padding，另外span元素设置宽高的时候要将它设为display:inline-block，因为内联元素是不能设置宽高的，inline-block具有inline的同行特性，也具有block的高度特性。
对于display:inline(内联元素)的元素，设置width, height, 上下margin和padding都是无效的

---

5. 居中

1. 若想让一个背景图居中，并且让它自适应屏幕

background: url("xxx.jpg") no-repeat center center ;
background-size: cover;

2. div水平居中

margin-left:auto;
margin-right:auto;

3. 内联元素居中，给它们的父元素加上,

text-align:center;

若不是内联元素想让它居中，则加display:inline-block，加了之后一般还要加下面这句，不然可能会有bug（下面空出一行）

display:inline-block;
vertical-align: top;

---

6. 怎样脱离文档流

1. 相对于窗口定位：
   position:fixed
2. 相对于父级元素定位：
   在父级元素加上：position:relative
   给自己加上：position:absolute（绝对定位之后就会变成display:block）

---

7. 伪类

在使用::before和::after时

必须加上

content: "";
display:block;

:nth-child(even): 偶数个元素
:first-child : 第一个元素

---

8. CSS学习资源

1. Google搜索关键词: MDN
2. CSS Tricks
3. Google 搜索: 阮一峰 CSS
4. 张鑫旭 CSS博客
5. Codrops CSS的效果
6. CSS 阴影效果

---