本文最初发表于博客园,并在 GitHub 上持续更新。以下是正文。
一个盒子中主要的属性就 5 个:width、height、padding、border、margin。如下:
盒子模型的示意图:
代码演示:
上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是 302*302。 这是因为还要加上 padding、border。注意:宽度和真实占有宽度,不是一个概念!
一定要知道,在前端开发工程师眼中,世界中的一切都是不同的。
比如说,丈量稿纸,前端开发工程师只会丈量内容宽度:
下面这两个盒子,真实占有宽高,都是 302*302:
盒子 1:
- .box1 {
- width: 100px;
- height: 100px;
- padding: 100px;
- border: 1px solid red;
- }
盒子 2:
- .box2 {
- width: 250px;
- height: 250px;
- padding: 25px;
- border: 1px solid red;
- }
真实占有宽度 = 左 border + 左 padding + width + 右 padding + 右 border
上面这两个盒子的盒模型图如下:
如果想保持一个盒子的真实占有宽度不变,那么加 width 的时候就要减 padding。加 padding 的时候就要减 width。因为盒子变胖了是灾难性的,这会把别的盒子挤下去。
PS:小技巧:在 sublime text 中,为了快速输入
这个属性,可以直接输入
- border:1px solid red;
,然后选第二个后回车。
- bd
padding 就是内边距。padding 的区域有背景颜色,css2.1 前提下,并且背景颜色一定和内容区域的相同。也就是说,background-color 将填充所有 boder 以内的区域。
效果如下:
padding 是 4 个方向的,所以我们能够分别描述 4 个方向的 padding。
方法有两种,第一种写小属性;第二种写综合属性,用空格隔开。
小属性的写法:
- padding - top: 30px;
- padding - right: 20px;
- padding - bottom: 40px;
- padding - left: 100px;
综合属性的写法:(上、右、下、左)(用空格隔开)
- padding: 30px 20px 40px 100px;
如果写了四个值,则顺序为:上、右、下、左。
如果只写了三个值,则顺序为:上、右、下。?? 和右一样。
如果只写了两个值,比如说:
- padding: 30px 40px;
则顺序等价于:30px 40px 30px 40px;
要懂得,用小属性层叠大属性。比如:
- padding: 20px;
- padding - left: 30px;
上面的 padding 对应盒子模型为:
下面的写法:
- padding - left: 30px;
- padding: 20px;
第一行的小属性无效,因为被第二行的大属性层叠掉了。
下面的题,会做了,说明你明白了。
题目 1:说出下面盒子真实占有宽高,并画出盒模型图。
- div {
- width: 200px;
- height: 200px;
- padding: 10px 20px 30px;
- padding - right: 40px;
- border: 1px solid#000;
- }
答案:
题目 2:说出下面盒子真实占有宽高,并画出盒模型图。
- div {
- width: 200px;
- height: 200px;
- padding - left: 10px;
- padding - right: 20px;
- padding: 40px 50px 60px;
- padding - bottom: 30px;
- border: 1px solid#000;
- }
答案:
和
- padding-left:10px;
没用,因为后面的 padding 大属性,层叠掉了他们。
- padding-right:20px;
盒子模型如下:
题目 3:现在给你一个盒子模型图,请写出代码,试着用最最简单的方法写。
答案:
- width: 123px;
- height: 123px;
- padding: 20px 40px;
- border: 1px solid red;
题目 4:现在给你一个盒子模型图,请写出代码,试着用最最简单的方法写。
答案:
- width: 123px;
- height: 123px;
- padding: 20px;
- padding - right: 40px;
- border: 1px solid red;
一些元素,默认带有
,比如 ul 标签。如下:
- padding
上图显示,不加任何样式的 ul,也是有 40px 的 padding-left。
所以,我们做站的时候,为了便于控制,总是喜欢清除这个默认的 padding。
可以使用
进行清除:
- *
- * {
- margin: 0;
- padding: 0;
- }
但是,
的效率不高,所以我们使用并集选择器,罗列所有的标签(不用背,有专业的清除默认样式的样式表,今后学习):
- *
- body,
- div,
- dl,
- dt,
- dd,
- ul,
- ol,
- li,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- pre,
- code,
- form,
- fieldset,
- legend,
- input,
- textarea,
- p,
- blockquote,
- th,
- td {
- margin: 0;
- padding: 0;
- }
border 就是边框。边框有三个要素:像素(粗细)、线型、颜色。
颜色如果不写,默认是黑色。另外两个属性不写,要命了,显示不出来边框。
border 的所有的线型如下:(我们可以通过查看
得到)
- CSS参考手册
比如
这个属性,在 chrome 和 firefox、IE 中有细微差别:(因为可以显示出效果,因此并不是兼容性问题,只是有细微差别而已)
- border:10px ridge red;
如果公司里面的设计师是处女座的,追求极高的页面还原度,那么不能使用 css 来制作边框。就要用到图片,就要切图了。
所以,比较稳定的 border-style 就几个:solid、dashed、dotted。
border 是一个大综合属性。比如说:
- border: 1px solid red;
就是把 4 个边框,都设置为 1px 宽度、线型实线、red 颜色。
border 属性是能够被拆开的,有两大种拆开的方式:
现在我们明白了:一个 border 属性,是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值,那么就是上右下左的顺序。举例如下:
- border - width: 10px 20px;
- border - style: solid dashed dotted;
- border - color: red green blue yellow;
效果如下:
(1)按三要素拆:
- border - width: 10px; //边框宽度
- border - style: solid; //线型
- border - color: red; //颜色。
等价于:
- border: 10px solid red;
(2) 按方向来拆:
- border - top: 10px solid red;
- border - right: 10px solid red;
- border - bottom: 10px solid red;
- border - left: 10px solid red;
等价于:
- border: 10px solid red;
(3)按三要素和方向来拆:(就是把每个方向的,每个要素拆开。3*4 = 12)
- 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: 10px solid red;
- border - right - color: blue;
为了实现上方效果,写法如下:
- border: 10px solid red;
- border - style: solid dashed;
border 可以没有:
- border: none;
可以某一条边没有:
- border - left: none;
也可以调整左边边框的宽度为 0:
- border - left - width: 0;
步骤如下:
(1)当我们设置盒子的 width 和 height 为 0 时,此时效果如下:
(2)然后将 border 的底部取消:
(3)最后设置 border 的左边和右边为白色:
这样,一个三角形就画好了。
来源: http://www.cnblogs.com/smyhvae/p/7256371.html