第五章默认显示类型与显示类型转换_5默认是什么类型-CSDN博客

本文链接：https://blog.csdn.net/Anthony_black/article/details/104886690

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），让一个元素拥有块元素的宽高、边距、边框等特性的同时，还拥有垂直居中对齐，文本对齐方式等文字的特性。

inline-block出现的两个问题：
1.解析空格：给父级设置font-size: 0;
2.元素之间的对齐会以最下面一排字对齐：vertical-align: top;

/* 没有显示类型 === 不显示 */
/* display: none; */

/* 对象隐藏：默认值visible */
visibility: hidden;
/* 透明度 */
/* opacity: 0; */

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 基本都不用写前缀，写前缀是为了向前兼容老版本的浏览器

3.显示类型转换

3.1块级元素特性：

block: (div/p/dl/form/h1-h6/ol/ul)

\1. 独占一行

\2. 高度由里面的元素撑开

\3. 宽度默认100%(继承父元素宽度)

\4. 可以设置外边距/内边距

\5. 可以包裹其他任意元素

\6. p标签不可包裹块级元素(只存放文本）

行内元素特性：

inline: (a/b/em/i/img/span)

\1. 和其他行内元素处于同一行

\2. 不支持宽高

\3. 上下外边距无效，auto无效(不支持auto居中)

\4. 内边距只对内联元素产生影响，无视块元素

\5. 标签之间的空格解析

\6. a标签能包裹块级元素(特殊、区域链接)

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

inline-block: (input)

\1. 本质上是行内元素，具有行内元素的性质

\2. 支持宽高

\3. 上下外边距有效,auto无效(不支持auto居中)

\4. 内边距只对内联元素产生影响，无视块元素

\5. 标签之间的空格解析

\6. img标签不是行内块元素(是行内元素,但是可以设置宽高，这源自于历史…)

3.2行内空白符问题

解析空格:

形成原因：行内元素之间会解析空格回车，形成间距。

解决办法：

\1. 给行内块元素父级设置字体大小为零，行内块元素字体大小重新设置

\2. 删除标签之间空格

3.3元素的显示与隐藏 display：none

隐藏对象:

display: block有显示的意义，和display: none;隐藏不显示

特点：

\1. 不占据空间（如同消失一般），无法点击交互

\2. 内部子元素也不会显示

\3. display为none的元素浏览器不会渲染

3.4溢出隐藏

/* 默认值 */
/* overflow: visible; */
/* 溢出隐藏 */
/* overflow: hidden; */
/* 文字超出时才会显示滚动条 */
/* overflow: auto; */
/* 文字超不超出都显示滚动条 */
/* overflow: scroll;*/
/* 分别设置横纵滚动条 */
/* overflow-y: scroll;*/