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

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

​ 一、什么是显示样式？

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

二、块级标签 ：block

行内标签：inline

行内块级：inlie-block

display:inline-block;可以是元素在同一行显示 比如 缝隙可以在body添加font-size：0；就可以清除缝隙

没有加 display:inline-block;就不会在同一行显示<

数字和字母不会换行，因为浏览器会将它默认为一个字符串

overflow:hidden 可以将元素给隐藏起来

inline-block出现的两个问题：

​ 1.解析空格，给父级设置font-size:0;

​ 2.元素之间的对齐会一以最下面一排字对齐； vertical-align; top;

三种显示类型特征

三种显示类型特征
一、块级元素特性：** **block: (div/p/dl/form/h1-h6/ol/ul)	二、行内元素特性：** **inline: (a/b/em/i/img/span)	三、行内块元素特性(集合两种盒模型的特征)： inline-block: (input)
1、独占一行	1、和其他行内元素处于同一行	1、本质上是行内元素，具有行内元素的性质
2、高度由里面的元素撑开	2、不支持宽高	2、支持宽高
3、宽度默认100%(继承父元素宽度)	3、上下外边距无效**，auto无效(不支持auto居中)	3、上下外边距有效,**auto无效(不支持auto居中)
4、可以设置外边距/内边距	4、内边距只对内联元素产生影响，无视块元素	4、内边距只对内联元素产生影响，无视块元素
5、可以包裹其他任意元素	5、标签之间的空格解析	5、标签之间的空格解析
6、p标签不可包裹块级元素(只存放文本	6、a标签能包裹块级元素(特殊、区域链接)	6、img标签不是行内块元素(是行内元素,但是可以设置宽高，

**元素可见性：**1、visibility:hidden;(对象隐藏：默认值visible) opcity：0；(透明度) opcity：0；为零完全透明 但位置还在

元素溢出（就是文字多出来了）：1、overflow:hidden （溢出隐藏 ）

​ 2、overflow：visible；（默认值）

​ 3.overflow:auto;（文字超出时才有滚动条）

​ 4、overflow:srcoll;(文字超不超出都会有滚动条·)

​ 5、overflow-y:srcoll; overflow-x:hiddenl; (分别设置横纵滚动条)

​ 默认样式清除：

​