CSS知识总结

1. css引入三种方式

（1）行间样式；（2）页面内css；（3）外部css文件，用<link rel="stylesheet" href="">

注意：HTML标签解析时，解析一个标签，浏览器执行一个标签；当解析link标签时，浏览器开启一个新的线程， 异步的加载link标签引用的文件。

2. css选择器

（1）#id选择器；（2）.class选择器；（3）标签选择器；（4）通配符 * 选择器；

（5）父子选择器：有父子关系的选择器组成；比如：div  .demo{ }，即div标签下的所有class是demo的标签被选中；

（6）直接子元素选择器：div > span 即div下的子级span被选中，而子级的子级不会被选中。

注意：父子选择器和直接子元素选择器，是自子级向父级查找符合的标签。

（7）并列选择器：div.demo{ }

（8）分组选择器：div, span, p{ }

（9）伪类选择器：div:hover { }，当鼠标触碰时触发。（:hover 是伪类选择器之一）

（10）属性选择器：标签的属性有：id、class等

<div class="" id=""></div>，

有属性是id的标签都别选中：

有属性是id = “only”的标签被选中：

3. css权重

注意：权重值的进制是256，计算机中的infinity是个无穷大的定值，color: red !important;作用在属性上。

4. css属性

（1）border-style：solid（实线）、dotted（点状虚线）、dashed（线状虚线）

border是复合属性：

（2）font-size：字体大小，浏览器中字体的宽高一样；font-style：italic；斜体；font-family：arial；这个字体是苹果乔布斯创造的；

（3）text-align：left（左）、center（中）、right（右），文字在框中的左右位置。

（4）line-height：30px |  1.2em |  120%；“文字的行”高，即文字所在行的高度，不是文字的高度；文字在“文字的行”的垂直居中，所以当“文字的行”高度与框高一样时，会有文字垂直居中的效果。

padding也可以使文字垂直居中：文字所在行的高度inline-height 和height大小一样，然后给padding-top和padding-bottom赋相同的值。

div {
    width: 100px;
    height: 20px;
    line-height: 20px;
    padding: 30px 0px;
    background-color: green;
    color: white;
}

效果： 

好处：带有文本属性的标签会直接与文字对齐，其结果也是会居中。

比如：div标签里面的img标签，会直接与文字对齐。类似这种情况：

 

（5）单位：px 和 em 都是相对单位。px是相对屏幕的，em是相对文字的；1 em = 1 font-size；

（6）text-decoration：none（无线）| overline（上划线）| underline（下划线）|  line-through（中划线）

text-decoration也是复合属性：line（线）| style（样式）| color（颜色）

（7）cursor：pointe（小手）| move（十字架），还有很多值，参考w3school文档 。 

（8）行级元素：内容决定元素所占位置，不可通过css改变宽高；（a em del span strong）

块级元素：内容决定大小，独占一行，内容溢出时自动换行；（p ul ol li div form ）

div标签特性：高度：内容决定；宽度：自适应。

行级块元素：内容决定大小，可以改变宽高； （img）

注意：（重点）

（1）行级元素只能嵌套行级元素；块级元素可以嵌套行级和块级；

（2）p标签是块级元素，而p标签内不能嵌套块级元素

结果是：p标签被div切割成两个。

（3）a标签是行级元素，但是a标签不能嵌套a标签

5. margin的auto值的理解

父子级都是块级元素，让子级margin为auto，这样就可以自适应居中显示。

而在inline-block的元素中，margin：auto是无效的，是0；

6. 文本类元素的理解：inline、inline-block

文本类元素，都有文字间隙。

比如：多个img标签放在一起，会有文本间隙，解决办法：代码不要留空格。

代码：

效果：有文本间隙

解决办法：

效果：

7. 文字与前面标签的对齐方式：vertical-align属性

（1）块级元素后的文字：块级元素独占一行，所以后面文字在其下面。

效果：

（2）行级块元素：

img标签：后面文字与图片底边对齐

 效果：

有文字的行级块元素：

效果：

问题来了：带有文字的inline-block元素，后面的文字会和文字对齐，而不是与底边对齐。

如何解决：用vertical-align属性，调整标签后面文字的对齐线

vertical-align: top \ middle \ bottom | px;