web前端练习32----Css，盒子模型,display,visibility,overflow,单位em

一、盒子(框)模型

1.1图形示例：

1.2盒子模型的主要构成，由内向外：
内容区：width,height
内边距：padding
边框：border
外边距：margin
可见宽高 = 内容区+内边距+边框

1.3块级元素的盒子模型（在文档流中）：
内容区：可以设置宽高 width，height
内边距：内边距指的是内容区和边框之间的距离，内边距会影响盒子的大小
边框：盒子可见框最外侧，边框是盒子的边缘。
边框要同时设置3个样式：border-width（宽度），border-color（颜色），border-style（风格），推荐使用简写模式
外边距：外边距盒子和其他盒子之间的距离，外边距不会影响可见框的大小，但是会影响盒子的位置
相邻的垂直外边距会发生重叠现象：相邻元素的外边距会取最大值，子元素的外边距会传递给父元素(子元素设置外边距，父元素会跟着走)
水平外边距不会重叠，而是取和
关于垂直外边距重叠现象参考：https://blog.csdn.net/zhaihaohao1/article/details/103441942

块级元素的盒子模型，测试代码：

1.4内联元素的盒子模型（在文档流中）：

内容区：不能设置宽高(width，height设置无效)，宽高由内容撑开
内边距：支持水平方向的padding，垂直方向的padding也支持，但是不会影响布局
边框：支持四个方向边框，但是垂直的边框不会影响布局
外边距：支持水平方向外边距，不支持垂直方向的

内联元素的盒子模型，测试代码：

	
		
		
		
	
	
		
		span0
		
		span1
		
		span2
		

		
		span3
		span4
		

		
		span5
		
		
	

二、display和visibility属性：

2.1display 设置元素的显示类型，常用属性值如下：
block：元素会作为块元素显示
inline：元素会作为内联元素显示
inline-block：元素会作为行内块元素显示（1.不独占一行 2.宽高被内容撑开 3.可以设置宽高 ）
none：元素不会在页面中显示，并且不会占据页面的位置

2.2visibility 设置元素是否在页面中显示，常用属性值如下：
visible：默认值，元素在页面中正常显示
hidden：元素不在页面中显示，但是依然在页面中占据位置

display ，visibility 测试代码：

	
		
		
		
	
	
		
box1
		
box2
		
box3
		
box4
		
	

三、overflow属性

overflow 设置元素如何处理溢出内容，常用属性值如下：
visible：默认值，不会处理溢出的内容，在父元素以外的地方显示
hidden：溢出的内容会被隐藏不会显示
scroll：在父元素中同时添加水平和垂直方向的滚动条，不内容是否溢出都会添加滚动条
auto：根据需要自动生成滚动条
overflow 测试代码：

	
		
		
		
	
	
		

			
box1
			
		
	

四、长度单位：

px：像素
像素，像素就是构成一个图片的最小的单位，我们的屏幕就是由一个一个像素点构成
一个像素指的就是一个像素点
在不同的显示器中，一个像素的大小是不同的，越清晰的屏幕像素越小

%：百分号
可以将一个元素的样式值设置为一个百分比的值，这样浏览器将会根据父元素的值去计算出相应的值
当父元素的值改变时，子元素的值会按照一定比例一起改变，经常用于自适应的页面

em：相对长度单位
em会相对于当前元素的字体大小来计算
1em = 1fontSize
em经常用于设置文字相关的一些样式，因为当文字大小发生改变时，em会随之改变

em测试代码：

	
		
		
		
	
	
		
		 
box1
		 
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岁。