<!doctype html><!--声明文档类型 网页文档--> <html><!--根目录标签 父级--> <head><!--网页的头部 用户看不见的--> <meta charset='UTF-8'><!--国际编码 字符的编码格式--> <!--网页三要素 title keywords description--> <title>咸鱼联盟</title><!--网页的标题--> <meta name='keywords' content='关键的搜索字符'><!--让搜索引擎找到网页--> <meta name='description' content='这是一个简单的模板文件'><!--网页的描述--> <style type="text/css"> *{ /* 通配符标签 */ margin: 0; padding: 0; } .box-one{ /* 1和2展示了margin是通过改变位置而改变自身盒子与外部盒子的距离 */ width: 200px; height: 100px; background-color: deeppink; float: left; } .box-two{ width: 200px; height: 100px; background-color: green; overflow: hidden; } .box-three{ /* 使用margin时会产生外边距合并 即20+40=40 兄弟级*/ width: 200px; height: 100px; margin-bottom: 20px; background-color: yellow; } .box-four{ width: 200px; height: 100px; margin-top: 40px; background-color: purple; } .box-five{ /* 父子级 */ width: 200px; height: 100px; margin-top: 40px; /* border-top:20px solid blue; */ /* padding-top: 1px; */ /*这两个方法都可以解决外边距合并*/ background-color: red; } .box-six{ width: 100px; height: 50px; margin-top: 20px; background-color: deeppink; } .box-seven{ width: 200px; height: 200px; border: 20px solid purple; background-color: deeppink; padding: 40px; margin: 40px; /*box-sizing: content-box; 控制盒模型的模式:标准盒模型 */ box-sizing: border-box;/* 怪异盒模型 做手机的时候用到 */ } .box-eight{ width: 200px; height: 200px; background-color: yellow; /*margin: 50px;*/ /*margin: auto; 自动居中*/ margin: 100px auto 0;/* 上外边距 左右外边距 下外边距 */ } </style> </head> <body><!--网页的身体 用户可视化区域--> <div class="box-one"></div> <div class="box-two"></div> <div class="box-three"></div> <div class="box-four"></div> <div class="box-five"> <div class="box-six"></div> </div> <div class="box-seven"></div> <div class="box-eight"></div> <!-- 左右不会出现问题 直接相加就可以 为什么会发生外边距合并?? 不同长方形的边界在同一条线上 外边距合并的触发条件 <1>兄弟元素在竖直方向有margin时触发 <2>父子级元素在竖直方向有margin时触发 必须是在普通文档流的块级元素才会触发外边距合并,这是大前提!! 外边距的合并规则 <1>正正取最大值 ===> 50 60 取60 <2>正负值相加 ===> 50 -60 取-10-vue-router <3>负负取最负 ===> -50 -60 取 -60 外边距合并解决方案 <1>避免竖直方向元素的外边距相遇 <2>生成BFC 父子级解决方案,添加border或者padding 使得两个盒子的边界不在一条直线上 兄弟级解决方案,直接只设置一个的margin 没有必要触发外边距合并 怪异盒模型 计算式 宽度=width 高度=height 标准盒模型 宽度=width+(padding-left)+(padding-right)+(border-left)+(border-right) 颜色 英文单词 red green blue... 十六进制 #ff000 rgb rgb(0-255,0-255,0-255) r red g green b blue a alpha --> </body> </html>