这个顾名思义,就是一个装东西的盒子,咱们生活中的盒子太多了,我下来给大家画图演示一下

很明显,这是一个生活中我们常见的盒子,它包含的元素有长,宽,高

那么我们css模型的盒子和与之对应的元素有什么关系呢?

我们可以这样理解,CSS模型中盒子的长度与现实中盒子的长度是一样的,高度也是一样的,唯一的问题就是宽怎么去理解,生活中的宽我们知道,因为网页是一个平面,所以css模型的“宽度”就是边框的粗细,形状,颜色。

盒子与盒子直接的距离我们用间距来表示,盒子与内容直接的距离我们用填充来表示,这很好理解。

现在我们来正式的介绍一下盒子的概念

盒子模型用来存放页面中的各种元素

页面设计的文字图片等元素,都可可以放在盒子内(div嵌套),大家可能会想到span吧。在我的理解中,div是一个大盒子,span是大盒子里面的小盒子。


下面我们来学习一番这些属性值是如何设置的

宽度属性

width: 长度值 | 百分比 | auto

最大宽度

max-width: 长度值 | 百分比 | auto

最小宽度

min-width: 长度值 | 百分比 | auto

宽度属性和高度属性的设置是一样的。

当我们不只设置一个高度不设置宽度,或者只设置一个宽度不设置高度的时候,另外一个属性默认是auto

我们在使用的过程中,有的元素可以设置高宽,有的元素设置了以后并不能生效

这是因为,只有块级元素和替换元素才可以设置高和宽的属性

块级元素包括<p>,<div>,<h1>~<h6>,<ul>,<li>,<ol>,<dl>,<dt>,<dd>等

替换元素包括<img>,<input>,<textarea>等

边框属性

边框宽度 border-width

边框颜色 border-color

边框样式 border-style

边框宽度

border-width: thin(表示一个窄的边框) | medium(表示一个中等边框)| thick(表示一个厚的边框) | 长度值

边框颜色

border-color: 颜色 | transparent(透明色)

边框样式

border-style


border-style边框属性
解释
none无定义边框,默认值
hidden与“none”相同,除非在表格元素中解决边框冲突时
dotted定义点状边框
dashed定义虚线
solid定义实线
double
定义双线
groove定义3D凹槽边框
ridge定义3D凸起边框
inset定义3Dinset边框
outside定义3Doutside边框
inherit规则应该从父元素继承边框样式

我们还可以分别给一个边框的四个边设置不同的属性


boder-[left | right | top | bottom]-width

boder-[left | right | top | bottom]-color

boder-[left | right | top | bottom]-style

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光css之盒子模型</title>
<style type="text/css">
     p{border- left-width: 10px;border-left-color: red;border-left-style: double;
      border- right-width: 20px;border-right-color: blue;border-right-style: solid;
      border- top-width: 30px;border-top-color: green;border-top-style: dotted;
      border- bottom-width: 40px;border-bottom-color: pink;border-bottom-style: dashed;
       }
    </style>
</head>
<body>
     <p>臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。</p>

</body>
</html>

 

边框属性简写

边框缩写:border: [宽度] [样式] [颜色]

不同方向:border-top: [宽度] [样式] [颜色]      

                 border-left: [宽度] [样式] [颜色]

                border-right: [宽度] [样式] [颜色]

                 border-bottom: [宽度] [样式] [颜色]

内边距

padding-top: 长度值 | 百分比

padding-left: 长度值 | 百分比

padding-right: 长度值 | 百分比

padding-bottom: 长度值 | 百分比

值不能为负值

内边距属性缩写

padding: 值1;   代表四个方向的值都为1

padding: 值1 值2;   代表上下值为1,左右值为2

padding: 值1 值2 值3;    代表上为1,左右为2,下为3

padding: 值1 值2 值3 值4;   代表上为1,右为2,下为3,左为4

大家可能已经发现了,这个顺序其实是一个顺时针顺序。

外边距

方向还是一个顺时针,上,右,下,左

margin-top: 长度值 | 百分比 | auto

margin-right: 长度值 | 百分比 | auto

margin-bottom: 长度值 | 百分比 | auto

margin-left: 长度值 | 百分比 | auto

值可以为负值

外边距属性缩写

内边距属性缩写

margin: 值1;   代表四个方向的值都为1

margin: 值1 值2;   代表上下值为1,左右值为2

margin: 值1 值2 值3;    代表上为1,左右为2,下为3

margin: 值1 值2 值3 值4;   代表上为1,右为2,下为3,左为4

默认情况下,相应的html块级元素存在外边距,例如body、h1、p.... 

声明margin属性后,将覆盖默认样式,例如 p{margin:0;}

margin值为auto时,将会实现水平方向居中,由浏览器计算外边距