CSS选择器、盒子模型与浮动（一）

---

前言

经过一段时间的学习与了解我了解了什么是CSS，今天我总结出了我认为在CSS中非常重要的四个知识点。第一个知识点就是：CSS选择器，第二个知识点就是：元素显示模式，第三个知识点就是：盒子模型，那么最后一个知识点就是：浮动，首先让我们先来看看CSS选择器和元素显示模式吧！

---

一、CSS选择器

1.CSS基础选择器

首先我们来说说基础选择器，基础选择器又细分为四个选择器：
1.标签选择器：顾名思义标签选择器是指用HTML标签名称作为选择器，按照标签名称分类。
2.类选择器：类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。
3.id选择器：样式用#定义，结构id调用，只能使用一次，别人不能使用。这就是id选择器。
4.通配符选择器：在样式中用*表示，把所有的标签统一修改样式。

2.CSS复合选择器

最上面的第一第二是是用复合选择器的好处，我们的重点是常用的复合选择器：
1.后代选择器：后代选择器又称为包含选择器，可以选择父元素里面子元素，写法是把外层标签写在前面，内层标签写爱后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。
2.子选择器：只选择作为某元素的最近一级子元素，也就是父元素的下一级。简单理解就是选亲儿子。
3.并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。并集选择器用逗号分割，同时任何形式的选择器都可以作为并集选择器的一部分。
4.伪类选择器：伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果。
伪类选择器最大的特点是用冒号：表示，比如：hover或者：first-child

二、元素显示模式

刚刚我们结束了我们的第一个知识点，现在我们一起来看看我们的第二个知识点：元素显示模式，那什么是元素显示模式呢？元素显示模式顾名思义就是我们网页元素也可以说是标签以什么方式进行显示。而元素显示模式又分为三类：

1.块元素

什么叫块元素：块元素就是一个盒子比如div，块元素都非常霸道，自己要独占一行，不允许其他的人来和他分享一行同时他的宽度和高度可以得到控制这就是块元素。

2.行内元素

那什么又是行内元素呢？行内元素你听名字就可以大概猜到，他没有块元素那么霸道，恰恰相反，他比较温柔懂事，在一行内可以出现多个行内元素，他们懂得分享。但是他们不能设置自己的宽度和高度。他们的宽度取决于他们内容的宽度。

3.行内块元素

这是最后一种叫行内块元素，那什么又是行内块元素？这个一看就知道是块元素和行内元素的结合体了，没错！他具备这行内元素的特点也具备着块元素的特点。这就是行内块元素。是是不是很好理解？

4.元素显示模式的转换

最重要的不是行内元素也不是行内块元素也不是块元素，最重要的是你要知道这些元素显示模式的转换，因为在后面网页的制作中很多时候都会用到元素显示模式的转换，如何将块元素转换成行内元素，如何将行内元素转换成块元素，如何将块元素或者行内元素转换成行内块元素。这个才是重中之重。不多说了看图！

---

总结

以上就是今天要讲的内容，内容不多但是都是我觉得非常重要，我们学习网页制作中不可缺少的。这次我们就先说到这里，后面的两个知识点呢我们下次再说！谢谢您的浏览！