当前位置 知且行 大前端 css盒子模型 下一篇:

css盒子模型

以照片墙为例说明:

一个盒子的宽度 = width + 左边padding + 右边padding + 左边border宽度 + 右边border宽度

padding内边距

padding: 50px; 作用于四个方向

如果要单独设置,可这么处理:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

等价于:padding: 10px 20px 30px 40px;

如果写三个数值:padding: 10px 20px 30px; 相当于:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px; /* 与right值一致 */

如果写两个属性:padding: 10px 20px; 相当于:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px; /* 与top值一致 */
padding-left: 20px; /* 与right值一致 */

有些元素默认有padding值,如ul,为了避免影响页面效果,在页面开头写上:

* {
    padding: 0;
    margin: 0;
}

border边框

border有三要素:粗细、线型、颜色 border: 1px solid #000; 等价于:

border-width: 1px;
border-style: solid;
border-color: #000;

如果想细化到为某个边单独设置三要素,可拆分为12个具体的属性:

border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;

border-color 可按照上右下左的顺序书写,与 padding 的顺序一致

示例:

<head>
    <title></title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            border: 10px solid red;
            border-width: 20px 10px;
            border-color: black red blue green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

如果想去掉某个边框,可以设置border-bottom: none;

margin外边距

margin有四个方向:margin-top, margin-right, margin-bottom, margin-left

margin的塌陷现象:

转载必须注明出处:https://www.zhiqiexing.com/16.html

关于我

我希望能成为一个认真、有趣、创造更多价值的人
关注微信
微信扫一扫关注我

微信扫一扫关注我

返回顶部