盒子模型,英文即box model。无论是div、span、还是a都是盒子。 一个盒子中主要的属性就5个:width、height、padding、border、margin。如下: - width和height:内容的宽度、高度(不是盒子的宽度、高度)。
- padding:内边距。
- border:边框。
- margin:外边距。
标准盒子模型: IE盒子模型:
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式: - width和height:内容的宽度、高度(不是盒子的宽度、高度)。
- padding:内边距。
- border:边框。
- margin:外边距。
CSS盒模型和IE盒模型的区别: 注:Android中也有margin和padding的概念,意思是差不多的,如果你会一点Android,应该比较好理解吧。区别在于,Android中没有border这个东西,而且在Android中,margin并不是控件的一部分,我觉得这样做更合理一些,呵呵。 <body>标签也有margin<body>标签有必要强调一下。很多人以为<body>标签占据的是整个页面的全部区域,其实是错误的,正确的理解是这样的:整个网页最大的盒子是<document>,即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素,此时<body>占据了整个页面的一大部分区域,而不是全部区域。来看一段代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>有生之年</div>
<div>狭路相逢</div>
</body>
</html>
上面的代码中,我们对div标签设置了边距等信息。打开google浏览器,按住F12,显示效果如下:
padding区域也有颜色padding就是内边距。padding的区域有背景颜色,css2.1前提下,并且背景颜色一定和内容区域的相同。也就是说,background-color将填充所有boder以内的区域。 效果如下: padding有四个方向padding是4个方向的,所以我们能够分别描述4个方向的padding。 方法有两种: 第一种写小属性:
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
第二种写综合属性,用空格隔开: (上、右、下、左)(顺时针方向。margin的道理也是一样的)
padding:30px 20px 40px 100px;如果只写了三个值,则顺序相当于:上、右、下、右。 如果只写了两个值,则顺序相当于:上、右、上、右。
如果有小大属性的混用, 如:
padding: 20px;
padding-left: 30px;
要用小属性层叠大属性:即相当于:padding: 20px 20px 20px 30px 如: div{ width: 200px; height: 200px; padding: 10px 20px 30px; padding-right: 40px; border: 1px solid #000; }则相当于:padding: 10px 40px 30px 20px(40>20所以用40层叠20)
但是要切记,不要把小属性写在大属性前面padding: 20px; padding-left: 30px; padding: 20px; 这样写是错误的。这样写会起不到小属性层叠大属性的效果: div{ width: 200px; height: 200px; padding-left: 10px; padding-right: 20px; padding:40px 50px 60px; padding-bottom: 30px; border: 1px solid #000; }则相当于:padding: 40px 50px 30px 50px;
borderborder就是边框。边框有三个要素:像素(粗细)、线型、颜色。 颜色如果不写,默认是黑色。另外两个属性不写,要命了,显示不出来边框。 比如
border的所有的线型如下:(我们可以通过查看
border拆分border是一个大综合属性。比如说: border:10px solid red;就相当于:
border-width:10px; //边框宽度
border-style:solid; //线型
border-color:red; //颜色。
由于border有四个方向,所以也相当于:
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
由于每个border方向都有width、style、color属性,所以也相当于:
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
但是工作中尽量追求简单。 上面的实现:
border:10px solid red;
border-right-color:blue; //小属性写在大属性下面,小会层叠大
与padding相同,如果某一个小属性后面是空格隔开的多个值,那么就是上右下左的顺序。举例如下:
border-width:10px 20px; //上右下右
border-style:solid dashed dotted; //上右下右
border-color:red green blue yellow; //上右下右
所以上述实现:
border:10px solid red;
border-style:solid dashed; //小属性写在大属性下面,小会层叠大
另外: border可以没有: border:none;可以某一条边没有: border-left: none;也可以调整左边边框的宽度为0: border-left-width: 0;如果利用: 则border就是整体了:此时若
border:50px solid green;
border-top-color:red;
则是下面的效果:
然后我们将border的底部取消:
最后设置border的左边和右边为白色:
这样,一个三角形就画好了,是不是很有趣。。
|