盒子模型（一）

坑军之王

2021-11-23

173

一、绪言

我们在写网页的结构的时候，时常会使用<div>标签或其他的语义化标签进行内容模块的划分，而利用CSS对各种模块的样式编写可以算是重要的一部分，但对于其内容的编写存在着许多的问题，宽高等属性到底是怎么算的？接下来对其内容进行一个简单的说明：

一个盒子包括内容区域（content）、内填充区域（padding）、边框区域（border）和外填充区域（margin）。父元素于子元素之间的区域划分见下图：

图1 父元素及子元素之间的盒子划分

对于盒子的属性调整，通常情况下包括以下元素。

二、属性说明

在上述对盒子的属性进行了一个简单的排列，接下来对这些属性的使用进行一个简单的说明：

长度的设定：

这里对于margin、padding、width、height等属性值，是指需要设置的长度值，这个长度以入门来说可以使用px（像素）。

在针对一些特殊的要求时，我们也可以使用百分比布局，即在属性值后写上一个百分比。表明该盒子的左上角是从哪里开始的，或者该盒子的大小是针对网页有多大等等。现在实际开发中实际上对其使用并不是很常用。

对于长度的值的不同，可以移步以下文章进行研读：

颜色的设定：

在针对颜色的设置时，颜色的值通常有以下几种：十六进制码、rgb值、rgba值、颜色单词。

设置颜色直接打颜色对应的单词是可以实现的，但在常规开发中对颜色的取值并不是那么简单，故该方法并不常用。当然的如果对某部分字体进行很单纯的突出展示，直接设置比较醒目的颜色就行，如红色。

十六进制码是根据一定的十六进制码进行颜色设置，通常表现形式是以“#”为开头后跟着共计六位的字母、数字的混合，如#ffffff是白色，#000000是黑色。

rgb和rgba的设置基本一样，先说rgb。rgb是以光的三原色（红、黄、蓝）进行混合得到颜色，分别由三个值进行控制，值的大小为0-255。rgba中的a是对设置的颜色进行透明度的设置，这个值的设置从0-1越来越不透明。

浮动：

将元素进行位置的设定，其值分为左（left）、右（right）、不设置（none）。对其设置的时候可以使用clear指定对应的浮动进行取消。