CSS 框模型

CSS 框模型概述

CSS 框模型概述

1、padding属性

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

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

或者

h1 {
    padding-top: 10px;
    padding-right: 0.25em;
    padding-bottom: 2ex;
    padding-left: 20%;
}

百分数值是相对于其父元素的 width 计算的，所以，如果父元素的 width 改变，它们也会改变。

2、border边框

border-style 属性定义了 10 个不同的非 inherit 样式，包括 none

这两种方法是等价的：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

border-width属性为边框指定宽度

p {border-style: solid; border-width: 15px 5px 15px 5px;}

下面的规则与上面的例子是等价的：

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

border-color属性，它一次可以接受最多 4 个颜色值

    p {
    border-style: solid;
    border-color: blue rgb(25%,35%,45%) #909090 red;
    }

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

轮廓 outline 绘制元素周围的一条线，

边框外围，突出元素

outline设置轮廓的样式颜色 宽度

outline-style

outline-width

outline-color

轮廓的宽度不计算元素尺寸

3、CSS 外边距

margin

h1 {margin : 10px 0px 15px 5px;}

h2 {

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

4、CSS 尺寸 (Dimension)
属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

height（max min）

width(max min)

line-height

normal(默认)

number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距

length：设置固定的行间距。

百分比：基于当前字体尺寸的百分比行间距。

注意 ：效果要通过改变浏览器大小查看

5、CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

示例图：

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

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

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：