前端——盒子模型及css三大特性

#博学谷IT学习技术支持#

目录

盒子模型

元素显示模式转换

css三大特性

层叠性

继承性

优先级

盒子模型

我们所用到的标签，全都可以看做是一个盒子，里面的内容可以看做是盒子里的物品，如果标签里面嵌套的有别的标签，那就可以看成是大盒子里面的小盒子，能够设置宽高的我们称之为块级标签，一个标签占据一行，不能设置宽高的我们成为行内标签，多个标签可以占据一行显示，但是有些时候我们就需要让多个块级标签显示在一行，行内标签独占一行怎么办呢，这就要用到我们的元素显示模式转换，display。

元素显示模式转换

元素显示模式转换，display，上面我们提到，想要把多个块级元素设置在一行显示，把行内元素独占一行，我们就给需要的盒子设置display属性，属性值设置成 block ，就可以独占一行，具有块级元素的特点，同时也可以设置宽高等属性，而属性值设置成 inline ，就可以实现多个行内元素显示在一行，具备行内元素的特点，同时也不能设置宽高了，或者说设置宽高是不生效的。可以看一下下图示例：

这个是正常情况下，三个div盒子（块级元素）的排列情况，三个盒子均是独占一行的，且可以设置宽高，下面来看一下，设置成 display：inline；的情况：

 可以看到，前两个盒子设置了display：inline；之后，具有行内元素的特点，但是设置的宽高已经不生效了，如果只给一个盒子设置display：inline；属性，相当于第一个盒子同意排在一行，但是其他的不同意，显示结果还是独占一行，下面我们来看行内元素如何独占一行：

 还是先看正常情况，这里是三个span盒子（行内元素），不加display：block；属性是排列在一行的，而且宽高属性不生效，那么，我们给他加上display：block；属性再来看一下：