前端之css盒子

前端之css盒子

什么是盒子

盒子：承载内容的区域叫做盒子模型
盒子的元素： 内容 、 内边距（padding）、边框（border）、外边距（margin）

div标签

div标签简单而言就是一个块标签，可以实现网页的规划和布局。

可以在div标签中设置外边距、内边距、宽和高，同时内部可以容纳段落、标题、表格、图像等各种网页元素。

也就是说，大多数HTML标签都可以嵌套在div标签中。div标签还可以嵌套多层div。div的标签非常强大，通过与id、class等属性结合设置css样式，可以替代大多数块级文本标签。

盒子的大小

在css中使用宽度属性width和高度属性height控制盒子的大小。
扩展：实体化三属性 ，实体化值得是给标签划分区域，并通过宽度、高度、背景颜色三种属性，让标签实体化成为一个盒子。
注意：宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ < img/> 和< input/>标签除外）

盒子的属性

一、边框属性（border）

1、 边框样式（border-style）

格式：
border-style: 上 右 下 左 / 单属性（四条边框一样）
属性：单实线（solid）、虚线（dashed）、点线（dottde）、双实线(double)。

2、边框宽度（border-width）

格式：
border-width: 上 右 下 左 / 单属性（四条边框一样）
属性： 像素（px）

3、边框的颜色(border-color)

格式：
border-color：上 右 下 左 / 单属性（四条边框一样）
属性：#rrggbb rbga（r，g，b，a）

4、综合设置边框（border）

格式： border：样式 宽度 颜色 （顺序不分先后）

5、圆角边框（border-radius）

格式： border-radius：左上 右上 右下 左下 / 单属性（四个角一样）
属性：px 百分比
圆形边框：
border-radius：50%;

6、图片边框

---

二、内边距属性（padding）

内边距是相对父标签的
可以分别设置 上 top、下bottom、左left、右right 内边距。
例：上边距（padding-top）
属性：px（可以使用负值） 相对父标签的百分比

---

三、外边距属性（margin）

外边距是和附近盒子的距离
可以分别设置 上 top、下bottom、左left、右right 外边距。
例：上外边距（margin-top）
属性：px（可以使用负值） 相对父标签的百分比

---

四、盒子阴影属性（box-shadow）

格式：
box-shadow：h-shadow v-shadow blur spread color outset；
属性说明表

参数	描述
h-shadow	水平阴影位置，可为负值（必选）
v-shadow	垂直阴影位置，可为负值（必选）
blur	阴影模糊半径（可选）
spread	阴影扩展半径，不能为负值（可选）
color	阴影颜色（可选）
outset/inset	默认外阴影/内阴影（可选）

---

五、box-sizing属性

属性：
1、content-box:定义宽和高时，参数值不包括内外边距
2、border-box:定义宽和高时，参数值包括内外边距

---

六、背景属性

1. 背景颜色 background-color

2. 背景图像 background-image

3. 背景的平铺 background-repeat
   属性：
   repeat（水平和垂直方向平铺，默认值）
   no-repeat（背景图像不平铺，显示在左上角）
   repeat-x(水平方向平铺)
   repeat-y（垂直方向平铺）

4. 背景图像固定（background-attachment）：
   属性：
   scroll：图像随着页面一起滚动，默认值
   fixed：图像固定在屏幕上，不随页面滚动

5. 背景图片大小（background-size）
   属性：
   1、px
   2、相对于父标签的百分比
   3、cover（扩展的足够大，使背景图片完全覆盖背景区域）
   4、contain（把图像扩展至最大尺寸，使其的宽度高度，完全适应内容区域）

6. 背景复合属性（background）
   顺序随意。不需要的样式可以省略

7. 背景不透明度
   1、rbga(r,b,g,a)
   2、opacity:opacityValue（0~1的实数）