CSS知识总结

亦凉 2022-05-13 03:16 280阅读 0赞

**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的标签都别选中：

![70][]

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

![70 1][]

**3. css权重**

![70 2][]

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

**4. css属性**

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

border是复合属性：

![70 3][]

（**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;
    }

效果：

![70 4][]

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

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

![70 5][]

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

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

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

![70 6][]

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

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

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

![70 7][]

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

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

**注意：（重点）**

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

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

![70 8][]

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

![70 9][]

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

**5. margin的auto值的理解**

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

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

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

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

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

代码：

![70 10][]

效果：有文本间隙

![70 11][]

解决办法：

![70 12][]效果：

![70 13][]

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

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

![70 14][]

效果：

![70 15][]

（2）行级块元素：

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

![70 16][]

效果：

![70 17][]

有文字的行级块元素：

![70 18][]

效果：

![70 19][]

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

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

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

**8. list-style-type的值**

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>无标记。</td> 
  </tr> 
  <tr> 
   <td>disc</td> 
   <td>默认。标记是实心圆。</td> 
  </tr> 
  <tr> 
   <td>circle</td> 
   <td>标记是空心圆。</td> 
  </tr> 
  <tr> 
   <td>square</td> 
   <td>标记是实心方块。</td> 
  </tr> 
  <tr> 
   <td>decimal</td> 
   <td>标记是数字。</td> 
  </tr> 
  <tr> 
   <td>decimal-leading-zero</td> 
   <td>0开头的数字标记。(01, 02, 03, 等。)</td> 
  </tr> 
  <tr> 
   <td>lower-roman</td> 
   <td>小写罗马数字(i, ii, iii, iv, v, 等。)</td> 
  </tr> 
  <tr> 
   <td>upper-roman</td> 
   <td>大写罗马数字(I, II, III, IV, V, 等。)</td> 
  </tr> 
  <tr> 
   <td>lower-alpha</td> 
   <td>小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)</td> 
  </tr> 
  <tr> 
   <td>upper-alpha</td> 
   <td>大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)</td> 
  </tr> 
  <tr> 
   <td>lower-greek</td> 
   <td>小写希腊字母(alpha, beta, gamma, 等。)</td> 
  </tr> 
  <tr> 
   <td>lower-latin</td> 
   <td>小写拉丁字母(a, b, c, d, e, 等。)</td> 
  </tr> 
  <tr> 
   <td>upper-latin</td> 
   <td>大写拉丁字母(A, B, C, D, E, 等。)</td> 
  </tr> 
  <tr> 
   <td>hebrew</td> 
   <td>传统的希伯来编号方式</td> 
  </tr> 
  <tr> 
   <td>armenian</td> 
   <td>传统的亚美尼亚编号方式</td> 
  </tr> 
  <tr> 
   <td>georgian</td> 
   <td>传统的乔治亚编号方式(an, ban, gan, 等。)</td> 
  </tr> 
  <tr> 
   <td>cjk-ideographic</td> 
   <td>简单的表意数字</td> 
  </tr> 
  <tr> 
   <td>hiragana</td> 
   <td>标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）</td> 
  </tr> 
  <tr> 
   <td>katakana</td> 
   <td>标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）</td> 
  </tr> 
  <tr> 
   <td>hiragana-iroha</td> 
   <td>标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）</td> 
  </tr> 
  <tr> 
   <td>katakana-iroha</td> 
   <td>标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）</td> 
  </tr> 
 </tbody> 
</table>

[70]: /images/20220513/ca4b4a3eb4bf46e4b837efa77ed53ddb.png
[70 1]: /images/20220513/a25325a478424f8b91de298039d3a54d.png
[70 2]: /images/20220513/8a3412d1a50e4dcca2614255f5df1f7e.png
[70 3]: /images/20220513/2987cc07732c438e807678dc7e3bcd60.png
[70 4]: /images/20220513/2d7ddb090d1e4bfdb2ad74d322bb83d1.png
[70 5]: /images/20220513/bc17fc7feb57495f9837b18468969c4e.png
[70 6]: /images/20220513/ad574c197d9b4704b77c15cccd49e6b0.png
[w3school]: http://www.w3school.com.cn/cssref/pr_class_cursor.asp
[70 7]: /images/20220513/e12e08c2daf24b9699f046dc77e548b7.png
[70 8]: /images/20220513/f0ac80b29a20455b80971c021ba1c2dd.png
[70 9]: /images/20220513/a69314215e4c4f599c04fa4587951ee5.png
[70 10]: /images/20220513/463f0e40bf714fb0ae57e16f9f688e9c.png
[70 11]: /images/20220513/b52c6fabaf30470bbb98e20a0e63d6a4.png
[70 12]: /images/20220513/f2fddf3070cc4fc78de5e8c3137b794e.png
[70 13]: /images/20220513/b7a648e379aa4db28a05cde2f18058cc.png
[70 14]: /images/20220513/ce71dc59cc9f4835b27cda3e3a312830.png
[70 15]: /images/20220513/bc00b812ddcd47d7a354d5efe1c4096a.png
[70 16]: /images/20220513/2c2103d3d0064e94852abae2576c5b94.png
[70 17]: /images/20220513/33aa831796384b1a83a55e907348e7d0.png
[70 18]: /images/20220513/896f275ac3d241b785db13a5b254d5b7.png
[70 19]: /images/20220513/01f55aadf64b42d5a1a3f7d759dc4c8a.png