python 46 盒模型与盒模型布局

一：盒模型

1、盒模型的概念

　　广义盒模型：文档中所有功能性及内容性标签，及文档中显示性标签

　　侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）

　　盒模型组成：margin + border + padding + content

v_hint（提示）：content = width x height

2、盒模型成员介绍

　　content border padding margin

　1. content

通过设置width与height来规定
块级标签，可以设置自身宽高，默认宽父级宽（width = auto）、高为0（可由内容决定）
内联标签，不可以设置自身宽高，默认宽高均为0，宽高一定是由内容决定的

2.border

　border（边框）由border-width（宽度）、border-color（颜色）、border-style（风格）三部分组成

　　border成员：border-left 、border-right 、border-top 、border-bottom

　3.padding

padding成员：padding-left 、padding-right 、padding-top 、padding-bottom
整体设置

4.margin

margin成员：margin-left 、margin-right 、margin-top 、margin-bottom
整体设置

二：盒模型布局

　　分为两大布局：

　　　　影响自身布局

　　　　影响兄弟布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒模型布局</title>
    <style>
        /*做页面必备reset操作*/
        html, body {
            margin: 0
        }
        .box, .wrap {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .wrap {
            background: orange;
        }
        /*影响自身布局*/
        /*.box {
            margin-top: 30px;
            margin-left: 100px;
        }*/
        /*影响兄弟布局*/
        /*margin-bottom影响上下兄弟,尽量别对margin-right进行设置*/
        /*margin-right影响左右兄弟,尽量别对margin-bottom进行设置*/
        .box {
            /*margin-bottom: 30px;*/
            margin-right: 100px;
        }

        /*display:显示方式*/
        /*块:block*/
        /*内联:inline*/
        /*内联块:inline-block*/
        .box, .wrap {
            display: inline-block;
            /*vertical-align: top;*/
        }

        
        /*兄弟坑*/
        /*盒模型布局坑只出现在和margin-top相关的地方*/
        .s1, .s2 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        /*重叠取大值*/
        .s1 {
            margin-bottom: 30px;
        }
        .s2 {
            margin-top: 50px;
        }
        
        /*父子坑*/
        .sup {
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
        .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        /*父子top重叠,取大值*/
        .sup {
            margin-top: 50px;
        }
        .sub {
            margin-left: 50px;
        }
        /*解决盒模型经典布局坑*/
        /*1.将父级固定*/
        .sup {
            /*border-top: 1px solid black;*/
            /*border-top: 1px solid transparent;*/
            /*保证显示区域 200*200 */
            /*height: 199px;*/
        }
        .sub {
            /*margin-top: 50px;*/
        }
        /*2.通过padding*/
        .sup {
            padding-top: 50px;
            height: 150px;
        }

        
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="wrap"></div>

    <!-- 坑 -->
    <section class="s1"></section>
    <section class="s2"></section>

    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
</html>

盒模型的两种布局方式

python 46 盒模型 与盒模型布局

python 46 盒模型与盒模型布局