盒子模型
在HTML中,浏览器在解析每一个标签元素时,都会将标签解析成一个装东西的盒子,超文本标记语言中,内容本身就定义在标签内部的。它将标签解析一个一个盒子,盒子之间存在间距,盒子内部装的东西与盒子之间也存在间距,并且盒子本身也是存在边框的。
盒子本身的边框也就是(边框border ),盒子和盒子之间的距离也就是(外边距 margin ) ,盒子到内容之间的距离也就是(内边距padding ),剩下中间的就是内容(content)。
当外边距越大,盒子和盒子之间的距离就越大;当内边距越大,边框和内容之间距离就越大,相对而言,内容就越少。所以合理设置margin和padding是非常重要的。换句话说:一个元素的真实高度和真实宽度,并不仅仅由我们大家设置的width和 height来决定,还应该包括内边距,边框宽度,以及外边距来决定。
边框:我们可以通过border等其他的衍生属性来进行设置;内边距:我们就需要使用paddinq或者它衍生属性来进行设置;外边距:我们可以通过使用magin或者它的衍生属性进行设置。
boder设置边框
要显示边框,比如div这种,那么必须要设置broder-style,否则默认是没有边框的。
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性:
- border-width
- border-style
- border-color
如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。
例如:
border: medium double rgb(250,0,255);
属性:
值 | 描述 |
border-width | 规定边框的宽度。参阅:border-width 中可能的值。 |
border-style | 规定边框的样式。参阅:border-style 中可能的值。 |
border-color | 规定边框的颜色。参阅:border-color 中可能的值。 |
inherit | 规定应该从父元素继承 border 属性的设置。 |
magin属性设置外边距
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明:
这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。
注释:允许使用负值。
例子 1 margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px
| 例子 2 margin:10px 5px 15px; 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px
|
例子 3 margin:10px 5px; 上外边距和下外边距是 10px 右外边距和左外边距是 5px
| 例子 4 margin:10px; 所有 4 个外边距都是 10px
|
属性值:
值 | 描述 |
auto | 浏览器计算外边距。 |
length | 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的外边距。 |
inherit | 规定应该从父元素继承外边距。 |
它还有一些衍生属性,单独设置,比如:margin-top、margin-left等等
padding属性设置内边距
设置内边距我们要使用padding属性进行设置。
padding 简写属性在一个声明中设置所有内边距属性。
说明:
这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释:不允许使用负值。
例子 1 padding:10px 5px 15px 20px; 上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px | 例子 2 padding:10px 5px 15px; 上内边距是 10px 右内边距和左内边距是 5px 下内边距是 15px
|
例子 3 padding:10px 5px; 上内边距和下内边距是 10px 右内边距和左内边距是 5px | 例子 4 padding:10px; 所有 4 个内边距都是 10px
|
属性值:
值 | 描述 |
auto | 浏览器计算内边距。 |
length | 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的内边距。 |
inherit | 规定应该从父元素继承内边距。 |
它还有一些衍生属性,单独设置,比如:padding-top、padding-left等等