CSS框模型怎么用

发布时间：2021-12-07 09:55:33 作者：小新
来源：亿速云阅读：179

这篇文章将为大家详细讲解有关CSS框模型怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

CSS框模型

CSS框模型(Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。
元素框的最内部是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框外面是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

CSS框模型怎么用

padding内边距

在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸。
例如：假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素，请看下图：
```
# box {
    width:70px;
    margin:10px;
    padding:5px;
}
```
内边距、边框和外边距都是可选的，默认值是零。
```
* {
    margin:0;
    padding:0;
}
```
width和height

CSS框模型怎么用

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

内边距边距属性
属性描述
padding 设置元素的内边距属性。
padding-bottom 设置下内边距
padding-left 设置左内边距
padding-right 设置右内边距
padding-top 设置上内边距

属性	描述
padding	设置元素的内边距属性。
padding-bottom	设置下内边距
padding-left	设置左内边距
padding-right	设置右内边距
padding-top	设置上内边距

通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom

padding-left

h2{
    padding-top:10px;  /* px 是像素，相对于显示器屏幕分辨率而言。 */
    padding-right:0.25em;  /* em 是相对长度，相对于当前元素内文本的字体尺寸 */
    padding-bottom:2ex;  /* ex 相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半 */
    padding-left:20%;
}

可以为元素的内边距设置百分比数值。百分比数值是相当于父元素的width计算的，这一点与外边距一样。所以，若父元素的width改变，它们也会改变。
注意：上下内边距和左右内边距一致，即上下内边距的百分比数值会相对于父元素宽度设置，而不是相当于高度。

例如：若一个段落的父元素是div，那么它的内边距要根据div的width计算。

<div 
<p> This paragraph is contained within a DIV that has a width of 200 pixels.</p>
</div>

所有h2元素的各边都有10像素的内边距。
```
h2 {padding:10px;}
```
还可以按照上、右、下、左的顺序，分别设置各边的内边距，各边均可以使用不同的单位或百分比值。
```
h2 {padding:10px 0.25em 2ex 20%;}
```
假设给padding3个值，那么第一个值是上内边距、第二个值是右边距和左边距、第三个值是下边距。
假设给padding2个值，那么第一个值是上边距、下内边距，第二个值是左内边距、右内边距。
假设只给padding1个值，那么所有的内边距都使用这个值。
CSS padding属性定义内边距，padding接受长度值或百分比值，但不允许使用负值。
例如：
内边距的百分比数值
单边内边距属性

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style type="text/css">
        .test1 {
            padding: 1.5cm;
        }

        .test2 {
            padding: 1.5cm 0.5cm;
        }

        .test3{
            padding:0px 10px 20px 40px;
        }
    </style>
    <title>内边距</title>
</head>

<body>
    <table border="1">
        <tr>
            <td class="test1">
                这个表格单元的每个边拥有相等的内边距1.5cm。
            </td>
        </tr>
    </table>
    <br />
    <table border="1">
        <tr>
            <td class="test2">
                这个表格单元的上和下内边距是 1.5cm，左和右内边距是 0.5cm。
            </td>
        </tr>
    </table>
    <br />
    <table border="1">
        <tr>
            <td class="test3">
                这个表格单元的上和下内边距相同。
            </td>
        </tr>
    </table>
</body>

</html>

CSS框模型怎么用

border边框

CSS使用一个简单的border-color属性，它一次可接受最多4个颜色值，即上、右、下、左这四条边的颜色。
```
p{
    border-style:solid;
    border-color:blue rgb(25%,35%,45%) #909090 red;
}
```
定义单边颜色。

透明边框：transparent。这个颜色用于创建有宽度的不可见边框。

a:link,a:visited{
    border-stye:solid;
    border-width:5px;
    border-color:transparent;
}
a:hove {border-color:gray;}

bordder-top-color
bordder-right-color
bordder-bottom-color

bordder-left-color

h2{
    border-style:solid;
    border-color:black;
    border-right-color:red;
}

通过border-width属性为边框指定宽度。
可定义单边宽度
也可以通过属性分别设置边框的宽度
注意：如果没指定边框样式，那就没有宽度。若希望边框出现，就必须声明一个边框样式。例如：
按照top-right-bottom-left的顺序设置元素的各边边框。
bordder-top-width
bordder-right-width
bordder-bottom-width

bordder-left-width

案例：

p{
    border-style:solid;
    bordder-top-width:15px;
    bordder-right-width:5px;
    bordder-bottom-width:15px;
    bordder-left-width:5px;
}

p {border-style:none;border-width:50px}

尽管给边框指定了宽度为50px，但由于边框样式为none，此时不仅边框样式不存在且宽度也会变成0——即边框消失了。
none：无边框，缺省值
hidden：隐藏边框，常用于解决边框冲突。
dotted：点线边框，在很多浏览器中会呈现实线。
dashed：虚线边框，在很多浏览器中会呈现实线。
solid：实线边框。
double：双线边框。
groove：定义3D凹槽边框，效果和border-color、border-width值相关。
ridge：定义3D垄状边框，效果和border-color、border-width值相关。
inset，定义3D inset边框，效果和border-color、border-width值相关。
outset，定义3D outset边框，效果和border-color、border-width值相关。
inherit，从父元素继承边框样式。

边框风格可以分别定义，顺序是上、右、下、左，案例如下：

p.aside{border-style:solid dotted dashed double;}  /* 上实线，右点线 下虚线 左双线 */

定义单边样式：
border-top-style
border-right-style
border-bottom-style
border-left-style
样式border-style，边框样式有以下这些种类：
宽度border-width
颜色border-color

margin外边距

外边距合并指的是，当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
合并后外边距的高度等于两个发生合并的外边距的高度中较大者。
margin-top
margin-right
margin-bottom

margin-left

h3{
    margin-top:20px;
    margin-right:30px;
    margin-bottom:30px;
    margin-left:20px;
}

若缺少左外边距的值，则使用右外边距的。
若缺少下外边距的值，则使用上外边距的。
围绕在元素边框的空白区域是外边距。
围绕外边距会在元素外创建额外的“空白”
设置外边距的最简单方法是使用margin属性，这个属性接受任何长度单位、百分比数值设置负值。
设置规则：
单边外边距属性：
CSS外边距合并

CSS框模型怎么用

+ 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开)，它们的上外边距和下外边距也会发生合并。

CSS框模型怎么用

外边距合并的意义

若没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。
若外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

CSS框模型怎么用

+ 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

关于“CSS框模型怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

CSS框模型怎么用

CSS框模型

相关阅读