2017_7_17元素类型与转换 导航条心得

元素类型与类型转换

1元素类型

XHMTL元素被分为3大类：块级元素、内联元素（行内元素）、可变元素

1.1块级元素block element

1.1.1块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域；

1.1.2默认情况下，会占据一整行；块状元素之间会按照顺序自从而下排列；

1.1.3可以定义width、height；

1.1.4常作为其他元素的容器，可以容纳内联元素或其他的部分块级元素，如div可以包裹p，但是p不能包裹div。

常见块级元素，div h p ul ol dl <hr />。

1.2内联元素（行内元素）inline element

1.2.1一行可以显示多个；

1.2.2不能定义width、height;

1.2.3内联元素也遵循一些盒模型基本规则，如padding、border、margin、background，但个别属性如padding-top/bottom，margin-top/bottom，不能设置上下内填充he外边距，可以设置左右。

常见内联元素，span a b em

1.3可变元素

需根据上下文关系确定其实块级元素还是内联元素。

1.4元素的转换

盒子模型可以通过display来改变默认的显示类型。

1.4.1display属性与属性值

display:block/inline/inline-block(行内块级元素)/none(该元素不会被显示)。

display:inline-block；声明后，元素可以一行显示多个；

元素设置了float属性后，就变成了inline-block；

list-item:将元素转换成列表。li的默认类型。

1.5置换元素与非置换元素

置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。如img 标签，浏览器是根据img标签的src属性的值来读取图片的，input也是同样道理，所以内联元素如img,input是行内元素但是可以设置宽高。

非置换元素（不可替换元素）：HTML大多数元素都是非置换元素，即内容直接表现给用户端如浏览器。

 

练习导航条心得

如果父元素的第一个子元素加上margin-top，可能会出现塌陷问题，加上属性overflow:hidden；就可以了

hover时，如下图1时，因为在li标签里设置了margin-top，所以list的高度无法变高，此时需要将 list:hover{margin-top:0;}。 同时，因为高度变了，所以line-height也要变大，如图2红点显示，line-height的值可以比容器的height的值大

图1

 

图2

 

 

hover时li的变化比较大，如border,height,color都发生变化时，不要慌乱，将hover时的list里的a标签当做一个新的元素在正常时的属性值上进行修改就好。