一、盒子(框)模型
1.1图形示例：
1.2盒子模型的主要构成，由内向外：
内容区：width,height
内边距：padding
边框：border
外边距：margin
可见宽高 = 内容区+内边距+边框
1.3块级元素的盒子模型（在文档流中）： 内容区：可以设置宽高 width，height
内边距：内边距指的是内容区和边框之间的距离，内边距会影响盒子的大小
边框：盒子可见框最外侧，边框是盒子的边缘。
边框要同时设置3个样式：border-width（宽度），border-color（颜色），border-style（风格），推荐使用简写模式
外边距：外边距盒子和其他盒子之间的距离，外边距不会影响可见框的大小，但是会影响盒子的位置
相邻的垂直外边距会发生重叠现象：相邻元素的外边距会取最大值，子元素的外边距会传递给父元素(子元素设置外边距，父元素会跟着走)
水平外边距不会重叠，而是取和
关于垂直外边距重叠现象参考：/zhaihaohao1/article/details/103441942
块级元素的盒子模型，测试代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0px;padding: 0px;}.container {background: #00FF00;}.box1 {width: 100px;height: 100px;background: #FF0000;margin-top: 20px;}</style></head><body><!-- 子元素的外边距会传递给父元素(子元素设置外边距，父元素会跟着走)--><div class="container"><div class="box1"></div></div></body></html>
1.4内联元素的盒子模型（在文档流中）：
内容区：不能设置宽高(width，height设置无效)，宽高由内容撑开
内边距：支持水平方向的padding，垂直方向的padding也支持，但是不会影响布局
边框：支持四个方向边框，但是垂直的边框不会影响布局
外边距：支持水平方向外边距，不支持垂直方向的
内联元素的盒子模型，测试代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{padding: 0px;margin: 0px;}</style></head><body><!-- 不能设置宽高(width，height设置无效)，宽高由内容撑开 --><span style="background-color: #FFFF00; width: 100px;height: 100px;">span0</span><!-- 垂直方向的padding也支持，但是不会影响布局 --><span style="background-color: #FFFF00;padding-bottom: 10px;">span1</span><!-- 支持水平方向的padding --><span style="background-color: #00FF00;padding-left: 100px;">span2</span><div style="width: 100px;height: 100px;background-color: #FF0000;"></div><!-- 支持四个方向边框，但是垂直的边框不会影响布局 --><span style="background-color: #FFFF00; border: #00FF00 30px solid;">span3</span><span style="background-color: aqua ">span4</span><div style="width: 100px;height: 100px;background-color: #008000;"></div><!-- 支持水平方向外边距，不支持垂直方向的 --><span style="background-color: #FFFF00;margin-top: 20px;margin-left: 20px;">span5</span></body></html>
二、display和visibility属性：
2.1display 设置元素的显示类型，常用属性值如下：
block：元素会作为块元素显示
inline：元素会作为内联元素显示
inline-block：元素会作为行内块元素显示（1.不独占一行 2.宽高被内容撑开 3.可以设置宽高 ）
none：元素不会在页面中显示，并且不会占据页面的位置
2.2visibility 设置元素是否在页面中显示，常用属性值如下：
visible：默认值，元素在页面中正常显示
hidden：元素不在页面中显示，但是依然在页面中占据位置
display ，visibility 测试代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;}/* display 设置元素的显示类型，常用属性值如下：block：元素会作为块元素显示inline：元素会作为内联元素显示inline-block：元素会作为行内块元素显示（1.不独占一行 2.宽高被内容撑开 3.可以设置宽高 ）none：元素不会在页面中显示，并且不会占据页面的位置*/.item{width: 100px;height: 100px;background-color: #00FF00;display: inline-block;/* display: block; *//* display: inline; *//* display: none; */}/* visibility 设置元素是否在页面中显示，常用属性值如下：visible：默认值，元素在页面中正常显示hidden：元素不在页面中显示，但是依然在页面中占据位置*/.box4{width: 100px;height: 100px;background-color: #FFFF00;/* visibility: visible; *//* visibility: hidden; */}</style></head><body><div class="item">box1</div><div class="item">box2</div><div class="item">box3</div><div class="box4">box4</div></body></html>
三、overflow属性
overflow 设置元素如何处理溢出内容，常用属性值如下：
visible：默认值，不会处理溢出的内容，在父元素以外的地方显示
hidden：溢出的内容会被隐藏不会显示
scroll：在父元素中同时添加水平和垂直方向的滚动条，不内容是否溢出都会添加滚动条
auto：根据需要自动生成滚动条
overflow 测试代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{padding: 0px;margin: 0px;}/*overflow 设置元素如何处理溢出内容，常用属性值如下：visible：默认值，不会处理溢出的内容，在父元素以外的地方显示hidden：溢出的内容会被隐藏不会显示scroll：在父元素中同时添加水平和垂直方向的滚动条，不内容是否溢出都会添加滚动条auto：根据需要自动生成滚动条*/.container{width: 200px;height: 200px;background-color: #7FFF00;overflow: auto;}.box1{width: 150px;height: 300px;background-color: #FF0000;}</style></head><body><div class="container"><div class="box1">box1</div></div></body></html>
四、长度单位：
px：像素
像素，像素就是构成一个图片的最小的单位，我们的屏幕就是由一个一个像素点构成
一个像素指的就是一个像素点
在不同的显示器中，一个像素的大小是不同的，越清晰的屏幕像素越小
%：百分号
可以将一个元素的样式值设置为一个百分比的值，这样浏览器将会根据父元素的值去计算出相应的值
当父元素的值改变时，子元素的值会按照一定比例一起改变，经常用于自适应的页面
em：相对长度单位
em会相对于当前元素的字体大小来计算
1em = 1fontSize
em经常用于设置文字相关的一些样式，因为当文字大小发生改变时，em会随之改变
em测试代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{padding: 0px;margin: 0px;}/* em：相对长度单位em会相对于当前元素的字体大小来计算1em = 1font-sizeem经常用于设置文字相关的一些样式，因为当文字大小发生改变时，em会随之改变下面的5em = 5font-size = 5*20 = 100px*/.box1{font-size: 20px;background-color: #FFFF00;width: 5em;height: 5em;line-height: 5em;margin: 5em;padding: 5em;text-align: center;}p{font-size: 20px;/* 行高就是40 */line-height: 2em;/* 首行缩进40，就是两个字的大小 */text-indent: 2em;}</style></head><body><!-- 1设置首行缩进2设置行高--><div class="box1">box1</div><p>1954年加入中国少年先锋队，1960年参加中国人民解放军，同年11月加入中国共产党。1961年5月，雷锋作为全团候选人，被选为辽宁省抚顺市第四届人民代表大会代表。1962年2月19日，雷锋以特邀代表身份，出席沈阳军区首届共产主义青年团代表会议，并被选为主席团成员在大会上发言。1962年8月15日，雷锋因公殉职，年仅22岁。1954年加入中国少年先锋队，1960年参加中国人民解放军，同年11月加入中国共产党。1961年5月，雷锋作为全团候选人，被选为辽宁省抚顺市第四届人民代表大会代表。1962年2月19日，雷锋以特邀代表身份，出席沈阳军区首届共产主义青年团代表会议，并被选为主席团成员在大会上发言。1962年8月15日，雷锋因公殉职，年仅22岁。1954年加入中国少年先锋队，1960年参加中国人民解放军，同年11月加入中国共产党。1961年5月，雷锋作为全团候选人，被选为辽宁省抚顺市第四届人民代表大会代表。1962年2月19日，雷锋以特邀代表身份，出席沈阳军区首届共产主义青年团代表会议，并被选为主席团成员在大会上发言。1962年8月15日，雷锋因公殉职，年仅22岁。1954年加入中国少年先锋队，1960年参加中国人民解放军，同年11月加入中国共产党。1961年5月，雷锋作为全团候选人，被选为辽宁省抚顺市第四届人民代表大会代表。1962年2月19日，雷锋以特邀代表身份，出席沈阳军区首届共产主义青年团代表会议，并被选为主席团成员在大会上发言。1962年8月15日，雷锋因公殉职，年仅22岁。1954年加入中国少年先锋队，1960年参加中国人民解放军，同年11月加入中国共产党。1961年5月，雷锋作为全团候选人，被选为辽宁省抚顺市第四届人民代表大会代表。1962年2月19日，雷锋以特邀代表身份，出席沈阳军区首届共产主义青年团代表会议，并被选为主席团成员在大会上发言。1962年8月15日，雷锋因公殉职，年仅22岁。1954年加入中国少年先锋队，1960年参加中国人民解放军，同年11月加入中国共产党。1961年5月，雷锋作为全团候选人，被选为辽宁省抚顺市第四届人民代表大会代表。1962年2月19日，雷锋以特邀代表身份，出席沈阳军区首届共产主义青年团代表会议，并被选为主席团成员在大会上发言。1962年8月15日，雷锋因公殉职，年仅22岁。</p></body></html>
