网络安全最新html5知识点：CSS盒模型_html盒子模型案例

前三个我们程序员习惯的称为：“内联样式表”、“内部样式表”、“外部样式表”，这三个样式表也是我们程序员所接触的css样式编写的部分，这里就不做多的介绍。

下面我们来认识下后面两个：“浏览器默认样式”以及“用于自定义样式”。

**a：**浏览器默认样式：

当你不为html设置任何样式时，显示在浏览器上，b标签会显示粗体、em标签有倾斜、h1-h6字号有默认的大小……这是就是浏览器默认的样式。

因为浏览器自带一个默认的样式，如果html中没有为标签设置样式，则浏览器会按照自己的样式来显示。但是浏览器默认样式的级别是最低的，一旦有其他地方设置了标签样式，浏览器默认样式就会被干掉。

注意，不同浏览器的默认样式有些地方是不一样的。例如，我们在写css时，都会首先设置 * {margin:0; padding:0;}，就是因为有浏览器兼容性问题。干脆，全部弄成0，这样各个浏览器就都统一了。

a：用户样自定义式：

在一些新闻网站中，经常看到可以设置字体大小的快捷菜单，例如下图就是搜狐新闻中的设置。这些都是用户可以根据自己的意愿去修改的。

其实浏览器也有这样的设置，例如chrome浏览器中，我们就可以设置字号和字体

2）CSS权重规则

每个选择器都有一些css规则，这些规则有可能不矛盾的，自然这些规则将会同时起效，然而有些规则是相互冲突的，为此需要为每条规则制定特殊性，当发生冲突的时候必须选出一条最高特殊性的规则来应用。

CSS规则的特殊性可以用4个整数来表示，例如0，0，0，0.计算规则如下：

**1、**对于规则中的每个ID选择符，权重值表示为0，1，0，0

**2、**对于规则中每个类选择符和属性选择符以及伪类，权重值表示为0，0，1，0

**3、**对于规则中的每个元素名或者伪元素，权重值表示为0，0，0，1

**4、**对于通配符，权重值表示为0，0，0，0.

**5、**对于内联规则，权重值表示为1，0，0，0

最终得到结果就是这个规则的权重。两个权重值的比较类似字符串大小的比较，是从左往右依次比较，第一个数字大的规则的权重高。例：

上例中两条规则的权重值分别是0，0，0，2 和0，0，0，1，显然第一条样式胜出，因此最终字是蓝色的。

注意，通配符的权重值0，0，0，0看起来没有作用，实际上不是。

css还有一个!important，用来改变css规则的特殊性。实际上，在解析css规则权重的时候，是将具有!important的规则和没有此标签的规则利用上述方法分别计算权重，分别选出权重值最高的规则。最终合并的时候，具有任何权重值的带有!important标记的规则胜出。

3）CSS设置规则

由于样式的来源不同，浏览器在加载样式时，需要计算出最终的样式值，这样才能显示出正确的界面效果——浏览器会通过叠加和覆盖这两种方式来生成最终的样式值。

根据上图描述箭头左侧分别是css外部样式和css内部样式对P/span标签的样式渲染，箭头右侧则是浏览器对css样式规则的解析。浏览器对css解析规则一目了然。

二、 css继承

想要了解CSS继承，我们必须要先谈谈文档树，例：

在HTML结构中各个元素的嵌套规则是我们前端程序员必须要掌握的专业技能，那么只要元素之间有了嵌套，那必然会产生父元素与子元素的关系，那继承是指我们设置上级（父级）的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。在CSS中有一些特定的属性，例如：color、font-size、font-family、text-align等，这些属性会在给父元素设定后传递到子元素甚至传递到孙元素的样式中，那么这些子元素/孙元素会得到样式的渲染，这就是CSS的继承机制。

在浏览器上显示的则是如下图所示：

**注：**在给body设置了font-size、color属性之后，嵌套在body里面的div、p、span标签也应用了此属性，那么这种情况就是CSS的继承属性传递到了子元素以及孙元素身上。这就是css继承机制。

三、 CSS盒模型

1）简述：

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含**内容区、补白（填充）、边框、边界****(外边距)**这就是盒模型。下面是盒模型的图例：

写在最后

在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。

需要完整版PDF学习资源私我

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！