css盒子概述

盒子的概念

       1.页面中的每一个标签,都可以看作一个盒子，通过盒子的视角更方便的进行布局。

       2.浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为盒子。

盒子组成

        css中规定每一个盒子分别由: 内容区域(content)、内边距区域(padding)、边框区(border)、外边距区域(margin)构成,这就是盒子模式。

标签用法:

我们首先要理解盒子的概念,css中盒子我们可以理解为我们平时的快递,运输的物品相当于content，我们用于装物品的纸壳相当于border，而纸壳和运输的物品之间填充的泡沫或者空气袋子可以理解为padding，而纸壳和快递箱之间的地方就叫做margin。

1. padding用法: 

            padding: 数字(n)px;      (表示给content四周加上宽度为n的内边距)

            padding-left/right/top/bottom:数字(n)px;      (表示给content单独一边加上宽度为n的内边距)

            padding:数字(n1)px 数字(n2)px 数字(n3)px; 数字(n4)px      (以上右下左的顺时针顺序给四周加上内边距,表示上内边距为n1，右内边距为n2，下内边距为n3，左内边距为n4)

            padding:数字(n1)px 数字(n2)px 数字(n3)px;      (表示上内边距为n1，左右内边距为n2，下内边距为n3)

            padding:数字(n1)px 数字(n2)px;(表示上下内边距为n1，左右内边距为n2)

2.margin用法:       

            加外边距用法与padding一致 可以参考上面的padding用法。

3.border用法:

            boder: 宽度(n px)+线的类型+线的颜色。(四周都会加上)

            border-left/right/bottom/top: 宽度(n px)+线的类型+线的颜色。(只给指定的一个方向加上)

            线主要的三种类型:solid(实线) dashed(虚线) dotted(点线)。

演示:

注意:给div标签的实际宽高是包括了border和padding的宽度的,所以要想让div标签宽高就为200,那就要加上 box-sizing: border-box,若不加上那么实际宽高就应为200px+20px+5px=225px。

运行结果:

按下F12进行检查可以明确看出content，padding，border，margin的分层。