css-8. 盒模型

最新推荐文章于 2024-07-19 15:50:46 发布

小虾仁she

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量118

点赞数

分类专栏：前端css 文章标签： css

本文链接：https://blog.csdn.net/weixin_43552734/article/details/114380357

版权

前端css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

所有html元素都可以看成盒模型

组成

content 内容
padding 内边距
border 边框
margin 外边距

margin和padding

以margin说明设置方式：

单值法：margin:10px 设置上下左右外边距为10px
二值法：margin:10px 20px 设置上下外边距为10px，左右外边距为20px
三值法：margin:10px 20px 30px 设置上边距10px，左右边距为20px，下边距为30px
四值法：margin:10px 20px 30px 40px 设置上、右、下、左（顺时钟方向）外边距分别为10px、20px、30px、40px
指定方向：margin-top、margin-left、…

设置时可以使用百分比表示：不管哪个方向，都是参照父级元素的宽度width设置

注意：在没有设置align时，margin-left优先级高于margin-right（默认左对齐）。

margin塌陷（针对块级元素）

同级元素如果分别设置了上下外边距，两个盒子之间的上下外边距会发生合并。之间的距离取margin-bottom（上盒子）和margin-top（下盒子）的较大值
存在嵌套关系的元素，父盒子在不设置padding、border、overflow的情况下，会发生上外边距传递（一直传递到body）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 400px;
            height: 400px;
            background: pink;
        }
        /* 不止div，h1，p等块级元素也存在margin塌陷问题 */
        h1 {
            margin-top: 100px;
        }
        /* 而span为行内元素，设置margin-top和margin-bottom无效，不存在margin塌陷问题 */
        span {
            margin-top: 100px;
        }
        /* img为行内块元素，可以设置margin-top和margin-bottom，但不存在margin塌陷问题 */
        img {
            width: 200px;
            height: 200px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- <h1>HELLO WORLD</h1> -->
        <!-- <span>hello world</span> -->
        <img src="image/a.jpg" alt="">
    </div>
</body>
</html>

border

按方向设置：border-top、border-bottom、border-lefr、border-right

按属性设置：

border-style：设置边框线型：solid实线、dashed虚线
border-width：设置厚度
border-color：设置边框颜色

复合属性：border:style width color

注意

border至少需要设置两个方向，只设置一个方向等于没边框
border这个复合属性三个值都必须设置，否则没设置的值默认没有

背景色background设置到边框

小虾仁she

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css-8. 盒模型

所有html元素都可以看成盒模型组成content 内容padding 内边距border 边框margin 外边距分类css3中可以利用box-sizing定义盒子模型类型属性content-box：标准盒模型border-box：怪异盒模型（IE低版本会使用）标准的盒模型设置width、height为内容content的宽高元素的宽度和高度：width|height+padding+border+margin大多情况下，默认margin不为0px，padding和bo
复制链接

扫一扫