CSS盒子模型

1.盒子模型介绍

• 页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
• 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们形象的称之为盒子

盒子模型：CSS中规定每个盒子分别是：内容区域（content）、内边距间距（padding)、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。

1.1 内容的宽度和高度

作用：利用 width 和 height 属性默认设置是盒子 内容区域的大小。

常见取值：数字+px

1.2 边框（border）——单个属性

作用：给设置边框粗细、边框样式、边框颜色效果

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	boder-style	实线solid、虚线dashed、点线dotted
边框颜色	boder-color	颜色取值

1.3 边框（boder）——连写形式

  单个取值的连写，取值之间以空格隔开。如border: 10px solid red;  快捷键是bd+tab

/* boder：粗细 线条样式 颜色 ---不分先后顺序 */

solid：实线

dashed：虚线

dotted: 点线

就记着三种线就可 ！！！

1.4 边框（border）——单方向设置

只给盒子的某个方向单独设置边框，

属性名：border - 方向名词

属性值：连写的取值

1.5 盒子实际大小初级计算公式

• 盒子宽度= 左边框+内容宽度+右边框
• 盒子高度=上边框+内容高度+下边框

如果盒子被border撑大后，如何满足需求？

计算多余大小，手动在内容中减去（手动内减）

结构布局要从外到内，宽高背景色，放内容，调节内容的位置（水平居中），控制文字细节（大小颜色）

1.6 内边距（padding）——取值