（四）元素类型基础知识+案例应用

元素类型

1、从CSS的显示为出发点，把所有的html标签分为：
	块状元素	 block
	内联元素	 inline
	内联块元素   inline-block
	不显示		  none 
	
2、block特点：
	(1)在页面中以矩形区域显示
	(2)能直接设置宽度和高度
	(3)自上而下排列，独占一行
	(4)块状元素一般作为其他内容的容器
	(5)块状元素在不添加宽度的时候，宽度跟随父元素宽度
3、inline特点：
	(1)在页面中以矩形区域显示
	(2)不能直接添加宽度和高度
	(3)在一行内从左到右排列
	(4)支持盒模型的规则，但是个别属性位置不能正常显示
			(padding/margin-top/bottom)
	(5)内联元素的宽度是被内容撑开的
	(6)内联元素在默认的情况下，如果给父元素添加text-align/line-height,会使整个内联元素的位置发生改变
4、inline-block特点：
	(1)根据上下文布局来确定最终生成的元素为块或内联
5、none的特点：
	在页面加载的时候是进行加载的，但是在渲染的过程中是不显示的

元素类型分类

块和内联显示的特点
1、块状元素在不添加宽度的时候，宽度跟随父元素的宽度
2、内联元素的大小是被子元素撑开的
3、内联元素在默认的情况下，如果给父元素添加text-align/line-height能使整个内联元素位置发生改变
4、如果给一个元素添加了display:none;这个元素在页面加载的时候也是会加载的，只是在页面渲染过程中是不显示的
5、DOM tree包括页面上所有的元素，RENDER tree包括了在页面上显示出来的元素
		display:none在DOM tree中，但不在RENDER tree中。
6、

常见的元素类型 ★★★★★

块元素

div   dl dt dd   form   h1-h6   hr   ol   p   ul 
fieldset   colgroup col   table tr td
li：display:list-item

内联元素

a   b   br   em i   img   
label   span   strong   sub sup   u   select
input/textarea：display:inline-block

行内块元素

特点：
	1、在一行内逐个显示
	2、能直接添加大小
	3、如果两个元素之间有回车，浏览器之间是有间距的

元素类型的转换

display属性
	检索或者设置元素所生成的元素类型
	属性值：
        block  转成块状元素
        inline 转成内联元素
        none   元素隐藏且不占据空间
        inline-block
        list-item

元素嵌套规则

1、尽量让块状元素作为父元素出现
2、内联元素的子元素尽量也是内联元素
3、h标签不能互相嵌套
4、p标签不能互相嵌套，p标签中尽量放内联元素

添加display:none声明的元素，在dom树和渲染树中的区别

在dom层中，display:none的元素是在dom树中存在的
在render层中，因为结合了css样式表，display:none的元素是不在渲染树中的

元素类型的应用

导航体验优化

给外围的nav添加背景，把a放在li中，将a转成block，只给a添加大小，用a撑开li，给a添加hover

上下对齐

垂直对齐virtical-align:
    top:顶线对齐
    middle:中线对齐
    baseline:基线对齐
    bottom:底线对齐

将元素上下居中：
	1、确定一个参照物的中线
        在要做上下居中的元素后面(不要回车)，添加一个span
        span{
            width:0px;
            height:100%;
            display:inline-block;
            vertical-align:middle;
        }
	2、要做上下居中的元素设置
        {
            display:inline-block;
            vertical-align:middle;
        }
	3、让元素左右居中
        给父元素添加text-align:center;
	

导航栏文字翻译

结构：
    <li>
        <a href="#">
            <p>home</p>
            <span>首页</span>
        </a>
    </li>
css编写思路：
	给p和span的样式设置一样，然后给span设置display:none; 最后给a添加hover，让p隐藏让span显示。
注意：
	1、给a只添加高度，使用padding撑开左右
	2、给li添加宽度，如果只靠a撑开li的话，在中英文变化的时候会造成文字框宽度的变化