HTML 学习笔记 CSS样式（框模型）

CSS框模型( Box Model)规定了元素框处理元素的内容内边距边框和外边距的方式

CSS框模型概述

可以用下面的模型图概述

元素框的最内部分是实际的内容直接包围内容的是内边距内边距呈现了元素的背景内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距边框组成的区域。

内边距和外边距都是可以选的默认值是0 但是许多元素将由用户代理样式表设置外边距和内边距可以通过将元素的margin 和 padding 设置为零来覆盖这些浏览器的样式这可以分别进行也可以使用通用选择器对所有的元素进行设置。

*{

    padding:0;
    margin:0;    
}

在CSS中 width 和 height 指的是内容区域的宽度和高度。增加内边距边框和外边距不会影响内容区域的尺寸。但是会增加元素框的总尺寸。

假设框的每个边上有10个像素的外边距和5个像素的内边距如果希望这个元素框达到00个像素就需要将内容的宽度设置为70像素。如下图所示。

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

CSS内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性就是padding属性

CSS padding属性定义元素边框与元素内容之间的空白区域。

CSS padding 属性

CSS padding 属性定义元素的内边距 padding属性接受长度值或者百分比但不允许出现负值

例如你希望所有h1元素的各边都有10像素的内边距只需要这样

h1 {padding: 10px;}

你还可以按照上右下左的顺序分别设置各边的内边距各边均可以使用不同的单位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

单边内边距属性：

也可以通过使用下面四个单独的属性分别设置上右下左内边距：

padding-top //上内边距

padding-right //右边的内边距

padding-bottom//下边的内边距

padding-left// 左边的内边距

内边距的百分比数值

百分比数值是相对于其父元素的width计算的这一点与外边距一样所以如果父元素的width改变他们也会跟着改变。

CSS内边距实例：

1:所有内边距属性在一个声明中

<html>
    <head>
        <meta charset="UTF-8">
        <title>链接</title>
        <style type="text/css">
            table td.text1 {
                padding: 1.5em;
            }
            table td.test2 {
                padding: 0.5em 2.5em;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <tr>
                <td class="text1">这个表格单元的每个边拥有相等的内边距</td>
            </tr>
        </table>
        
        <table border="1">
            <tr>
                <td class="test2">这个单元格的上和下边距是0.5em 左右边距是2.5em</td>
            </tr>
        </table>
    </body>
</html>

如果想要保持一个盒子的占有宽度不变，那么加width就要减padding 加padding就要减width

padding的区域有背景颜色也就是说background-color 将填充所有board以内的区域

HTML 学习笔记 CSS样式（框模型）

CSS内边距

推荐阅读