一：盒模型
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>