<!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
<3>负负取最负 ===> -50 -60 取 -60
外边距合并解决方案
<1>避免竖直方向元素的外边距相遇
<2>生成BFC
父子级解决方案,添加border或者padding 给子级添加padding时需要注意子级没有背景颜色 使得两个盒子的边界不在一条直线上 overflow:hidden
兄弟级解决方案,直接只设置一个的margin 没有必要触发外边距合并
怪异盒模型 计算式
宽度=width
高度=height
标准盒模型
宽度=width+(padding-left)+(padding-right)+(border-left)+(border-right)
box-sizing: content-box 默认 标准盒模型
box-sizing: border-box 怪异盒模型 给合并的父级
开启之后就是怎么也超不过自己设置的width和height
颜色
英文单词 red green blue...
十六进制 #ff000
rgb rgb(0-255,0-255,0-255)
r red
g green
b blue
a alpha
-->
</body>
</html>
Python3Turtle