默认显示类型与显示类型转换

1. 什么是显示样式

   显示样式（display），是W3C规定浏览器采取哪种盒模型规则来显示一个元素，常用显示样式的值有：

   block（块级盒模型）
   inline（行内盒模型）
   inline-block（行内块级盒模型）

常用显示样式 display:block；

	盒模型（box moldel），是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型

常用显示样式 display:inline;

	行内盒模型（inline box moldel），是W3C规定一个浏览器如何渲染、显示、排版文字的一整套规则

常用显示样式 display:inline-block;

	行内块级盒模型（inline-block  box moldel），让一个元素拥有块元素的宽高、边距、边框等特性的同时，还拥有垂直居中对齐，文本对齐方式等文字的特性

2. 默认显示样式

为什么需要默认显示样式？

在前端诞生之初，只有HTML没有CSS，为了保证这些HTML标签展示的内容能够给用户提供较高的可读性，浏览器自己默认设置了一些排版规则，这些规则就是默认样式的前身。简单来说，浏览器默认样式的目的是为了在用户的样式不起作用或是用户没有给网页设置样式的情况下，保证网页内容最基本的可读性。

浏览器内核
内核名称:

① Trident(IE内核)->IE系列/360浏览器/猎豹浏览器/百度浏览器/世界之窗->    -ms- 
② Gecko(Firefox内核)->火狐浏览器    -moz-  
③ Webkit(Safari内核,Chrome内核原型,开源)->苹果Safari浏览器/安卓默认浏览器     -webkit- 
④ Blink->Chrome(谷歌自主研发)   -webkit- 
⑤ Opera现已改用Google Chrome的Blink内核  -o-
//Presto(Opera前内核)(已弃用) 

现在最新版的浏览器基本都支持css3 基本都不用写前缀 ，写前缀是为了向前兼容老版本的浏览器。

1. 显示类型转换
   三种显示类型特征
   注意：块内标签能写行内标签，但是行内标签不能写块级标签

   3.1块级元素特性

     block: (div/p/dl/form/h1-h6/ol/ul)
       1. 独占一行
       2. 高度由里面的元素撑开
       3. 宽度默认100%(继承父元素宽度)
       4. 可以设置外边距/内边距
       5. 可以包裹其他任意元素
       6. p标签不可包裹块级元素(只存放文本)
   

   3.2行内元素特性：

    inline: (a/b/em/i/img/span)
   	1. 和其他行内元素处于同一行
   	2. 不支持宽高
   	3. 上下外边距无效，auto无效(不支持auto居中)
   	4. 内边距只对内联元素产生影响，无视块元素
   	5. 标签之间的空格解析
   	6. a标签能包裹块级元素(特殊、区域链接)
   

   3.3行内块元素特性(集合两种盒模型的特征)：

   inline-block: (input)
   	1. 本质上是行内元素，具有行内元素的性质
   	2. 支持宽高
   	3. 上下外边距有效,auto无效(不支持auto居中)
   	4. 内边距只对内联元素产生影响，无视块元素
   	5. 标签之间的空格解析
   	6. img标签不是行内块元素(是行内元素,但是可以设置宽高，这源自于历史…)
   

3. 元素的显示与隐藏

隐藏对象: 	
	display: block有显示的意义，和display: none;隐藏不显示
				特点：
				1. 不占据空间（如同消失一般），无法点击交互
				2. 内部子元素也不会显示
				3. display为none的元素浏览器不会渲染
    visibility: vidible显示对象和visibility:hidden隐藏对象
    			特点：
    			1.占据空间(如同隐形一般），可以交互；
    			2. 内部子元素也不会显示
    			3. 阅览器会加载渲染

在使用行内块元素的时候，两个块级元素之间若有空格或换行，就会在阅览器显示一小条的空格，要想消除这种空格解决方法是：
1. 给行内块元素父级设置字体大小为零，行内块元素字体大小重新设置
2. 删除标签之间空格
3. 从根本解决问题（不要使用）/这种方法就是使用通配符清除清除所有的样式后，之后在元素内重新设置，但是这种方法尽量不要使用，会增加阅览器的负担，以及会出现不必要的麻烦/