前端开发--css--盒子类型:块元素 行内元素 行内块元素

前端开发--css--盒子类型:块元素 行内元素 行内块元素_第1张图片
块元素:




	
	块元素
	


	
这是div标签

这是p标签

前端开发--css--盒子类型:块元素 行内元素 行内块元素_第2张图片
内联元素:




	
	块元素
	


	
	


前端开发--css--盒子类型:块元素 行内元素 行内块元素_第3张图片

在这里插入图片描述
前端开发--css--盒子类型:块元素 行内元素 行内块元素_第4张图片
前端开发--css--盒子类型:块元素 行内元素 行内块元素_第5张图片
前端开发--css--盒子类型:块元素 行内元素 行内块元素_第6张图片




	
	块元素
	


	
	


前端开发--css--盒子类型:块元素 行内元素 行内块元素_第7张图片
总的来说:
inline 内联元素 不支持宽高,即使设置了,也不起作用。
block 块元素 支持宽高。
下图是inline。
前端开发--css--盒子类型:块元素 行内元素 行内块元素_第8张图片
inline-block 内联块元素 支持宽高。不单独成行,之间有间隙。
block 块元素,单独成行。
前端开发--css--盒子类型:块元素 行内元素 行内块元素_第9张图片
前端开发--css--盒子类型:块元素 行内元素 行内块元素_第10张图片
上面我们利用行内块元素制作了菜单,下面我们尝试一下利用列表制作菜单。




	
	块元素
	



	
	


前端开发--css--盒子类型:块元素 行内元素 行内块元素_第11张图片
这里用到了 浮动float。下篇介绍。

你可能感兴趣的:(html,+css,+javascript)