CSS盒子模型

璃期

已于 2022-08-26 16:50:18 修改

阅读量102

点赞数

分类专栏： HTML 文章标签： css css3 html

于 2022-08-25 20:30:48 首次发布

本文链接：https://blog.csdn.net/weixin_51209513/article/details/126532122

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .box1{
            width: 300px;
            height: 300px;
            background-color: aqua;
            /* 文本两端对齐 */
            text-align: justify;
            /* 
            一：内边距padding 
              背景色能蔓延到内边距，不支持负值
              1个值：4个方向一样
              2个值：上下，左右
              3个值：上，左右，下
              4个值：上，右，下，左
              padding-top,padding-right,padding-bottom,padding-left
            */
            padding:30px;
            /* 
            二：边框 
              边框会增加盒子的大小，背景色也能蔓延到边框
              实线：solid,双实线：double,虚线：dashed,点虚线：dotted
              border-top,border-right,border-bottom,border-left
              border:
                border-width：1个值：4个方向一样
                              2个值：上下，左右
                              3个值：上，左右，下
                              4个值：上，右，下，左
                border-style
                border-color 
            */
            border:10px dotted red;   
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color:blueviolet;
            padding:30px;
            /* 
            三：外边距margin
              背景颜色不蔓延到外边距，外边距支持负值
              1个值：4个方向一样
              2个值：上下，左右
              3个值：上，左右，下
              4个值：上，右，下，左 
              屏幕水平居中：margin:0 auto;
              特性问题：
                1.兄弟关系，两个盒子垂直边距与水平边距问题
                  垂直方向，外边距取最大值
                  水平方向，外边距会进行合并处理
                2.父子关系，给子加外边距，但作用于父身上了，怎么解决？
                  1.把给子加外边距=>给父设置内边距padding
                  2.给子设置外边距，给父设置边框
                  3.给子或父加浮动float
                  4.overflow:hidden. BFC
            */
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box1">
        Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Ipsum, blanditiis
        porro? Odio incidunt libero quidem,
        atque ullam neque? Fugiat distinctio 
        nam voluptatem pariatur animi doloremque 
        consectetur nostrum, quisquam modi natus.
    </div>
    <div class="box2">
        Lorem ipsum dolor, sit amet consectetur 
        adipisicing elit. Ipsa eaque exercitationem 
        facilis harum possimus quasi quidem modi cum at. 
        Illum placeat soluta obcaecati earum eligendi modi 
        necessitatibus quaerat repudiandae consequatur!
    </div>
</body>
</html>