2021-05-26 Day-06元素的分类

回顾

框模型
	内容(width和height)、内边距、边框、外边距
	外边距：
	单方向外边距margin-top
	margin:10px 20px 30px 40px;
	margin:0 auto;
	垂直方向外边距相遇问题,以大值为准
	无法设置尺寸的行内元素(span,a,b,...)垂直方向外边距不生效
	外边距传递
	内边距
	padding-top上内边距
溢出属性
	overflow:visible默认值,溢出可见 / hidden溢出隐藏/scroll滚动条/auto;
	overflow-x:
	overflow-y:
文单行本溢出显示省略号效果
	width:200px;
	white-space:nowrap;文本不换行
	overflow:hidden;溢出隐藏
	text-overflow:ellipsis;省略号

元素的分类

块级元素
	独占一行，能设置宽高
行内元素
	逐行排列,容不下才会自动换行,部分元素可以设置尺寸(img,input,select,textarea)

元素的显示类型display

***1.display:none;元素消失,空间不再占据
***2.display:block;转为块级元素
3.display:inline;转为行内元素
4.display:inline-block;转为行内块(既具备块级元素能设置宽高的特点,还具备行内元素不换行的特点)
5.display:list-item;

置换元素

img,input,select,textarea
这一类元素默认自带宽高比,根据不同的属性和值来决定最终的显示效果

鼠标移入父元素控制子元素效果

父元素:hover 子元素{
	样式
}