html元素转换知识学习心得

一、块元素：重点需要记住：

块元素会占据一行，多个块元素自动换行， 在不设置它的宽度的情况下，  它的宽度默认占满整行空间。  如果有父元素包含它的话，它会根据父块的元素的宽度改变而改变。 主要作用：部分元素一般用来作为盒子来布局

二、内联元素：重点记住：

不用浮动也能一行显示，它是不能设置宽高，所以它不合适作为盒子来布局。

三、display:block    :把内联元素转成块元素

主要用来实现各种导航效果。

四、display:inline   :把块元素转成内联元素

与float:left类似，浮动起来。

五、display:inline-block：

把任何元素，类型转换成 内联+块 元素 

特点：既能像inline类型一样一行显示,又能像block类型一样设置宽高.

主要用它来实现京东购物列表效果 (图片垂直居中显示) 

六、display:none：

这个主要用来把某个元素人间蒸发（消失得无影无踪，好像从不出现过，也不占据空间，连原本的空间也消失了）

让它重新显示出来，设置 display:block 重新显示。

七、:hover  

不光是可以设置颜色 -  a:hover{} 也可以 其他元素 比如    div:hover {}