css盒子模型

css盒子模型 

外边距、内边距和边框

盒子模型简而言之就是CSS用来管理和布局页面上每一个元素的一种机制。

CSS 盒模型本质上是一个盒子，就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器，所有HTML元素可以看作盒子，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

具体说明如图所示： 

图片展示

 

基本属性 

宽高

每个盒子都需要一个宽高数值，如果不给的话你会发现这个盒子并不会显示出来。添加宽高的属性名称是width height。宽高值的单位有以下常用的：

1.像素（px）：像素是最常用的单位，表示屏幕上的一个像素点。它是固定的，具有确定的大小。

2.百分比（%）：百分比单位相对于父元素的尺寸进行计算。

背景颜色

颜色名称：可以使用预定义的颜色名称来表示颜色

有个特殊的

首先先看一下RGB表示法

RGB表示法：RGB表示红、绿、蓝三种颜色的组合值。可以使用十进制或十六进制表示

        十进制表示法：background-color: rgb(255, 0, 0);

        十六进制表示法：background-color: #FF0000;

看完这个之后，我们就不得不谈一下RGBA表示法

RGBA表示法：RGBA在RGB的基础上增加了第四个参数，用于控制颜色的透明度。取值范围是0到1，其中0表示完全透明，1表示完全不透明。

背景属性

background-size是CSS背景属性中的一项，用于设置背景图像的大小。它之后可以添加很多属性的值，比如：

auto

• auto
• cover
• contain
• length
• percentage

 边框

• none: 无边框样式

• solid: 实线边框样式

• dashed: 虚线边框样式

• dotted: 点线边框样式

• double: 双线边框样式