CSS盒模型的概念及组成 content padding border margin

嗯...ps随便大概画了一个参考图，色彩有点...见谅

CSS盒模型的概念及组成

    css盒模型概念——css盒模型是css的基石，每个html元素都可以看作是一个盒模型。

    css盒模型的组成——内容（content）、补白或填充（padding）、边框（border）、外边距（margin）

1.内容（content）

    语法:

width: 数值+单位;
height: 数值+单位;

    eg:

.box{
    width: 300px;
    height: 300px;
}

2.补白或填充（ content 和 border 之间的距离）

①设置一个值

    padding: 20px; （上下左右均为20px）

②设置两个值

    padding: 15px 25px; （上下为15px、左右为25px）

③设置三个值

    padding: 10px 5px 20px; （上下为10px、左右为5px、下为20px）

④设置四个值（顺时针方向）

    padding: 20px 10px 5px 0px; （上为20px、右为10px、下为5px、左为0px）

⑤还可以单独设置某一个方向的padding值

    padding-left: 20px; （left 还可以设置为 top、bottom、right）

注:

    ①当给元素设置了padding值后，要在原来的宽高上减去设置的padding值，保证总宽高不变;

    ②当需要调整子元素在父元素中的位置关系时，给父元素设置padding属性;

    ③padding不允许设置负值;

    ④背景可以延伸到padding区域。

3.边框（设置 padding和margin 之间的部分）

    语法:

        ①边框类型

border-style: solid（实线） | dashed （虚线） | dotted （点线） | double （双线）;

        ②边框颜色

border-color: 颜色值;

        ③边框宽度

border-width: 数值+单位;

        ④border简写方式

border: 宽度 线型 颜色;

        eg:

border: 5px solid black;

        ⑤还可以单独设置某一方向的边框

border-top: 2px solid black;
/*注: top可更改为 bottom、right、left*/

        注：

            ①背景可以延伸到border区域，当边框为实线时会遮挡住背景色

            ③当元素设置了border时，要在原来宽高的基础上减去设置的border值，保证总宽高不变

4.外边距

    语法：

margin: 数值+单位;

    注:margin属性值的设置方法同padding

        ①背景不能延伸到margin区域

        ②margin可以设置负值

        ③当需要调整元素之间的位置关系或子元素在父元素中的位置关系时，给本元素添加margin属性

注:

    标准盒模型的总宽高 = width + 左右padding + 左右border + 左右margin

    标准盒模型的总高度 = height + 上下padding + 上下border + 上下margin

    标准盒模型 = content + padding + border + margin

    怪异盒模型 = content + margin

    注: 当网页没有添加文档声明时，就会触发某些浏览器的怪异模式

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓