06.默认显示类型和显示类型转换

最新推荐文章于 2021-01-14 22:00:16 发布

拾玥花开

最新推荐文章于 2021-01-14 22:00:16 发布

阅读量229

点赞数 1

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/weixin_44691513/article/details/104298071

版权

05.默认显示类型和显示类型转换

1.什么是显示样式

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

块级盒模型：block

行内盒模型：inline

行内块级模型：inline-block

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

display：block

型。 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mdQXh6SC-1581582732125)(C:\Users\dell\Desktop\我的博客\QQ截图20200213150101.png)]$

行内模型：是W3C规定一个浏览器如何渲染、显示、排版文字的一整套规则。

display：inline

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x9LNNtUh-1581582732126)(C:\Users\dell\Desktop\我的博客\QQ截图20200213150246.png)]$

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

2浏览器内核

内核名称:

① 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.显示类型转换

块级元素特性：
block: (div/p/dl/form/h1-h6/ol/ul)

独占一行
高度由里面的元素撑开
宽度默认100%(继承父元素宽度)
可以设置外边距/内边距
可以包裹其他任意元素
p标签不可包裹块级元素(只存放文本)

行内元素特性：
inline: (a/b/em/i/img/span)

和其他行内元素处于同一行
不支持宽高
上下外边距无效，auto无效(不支持auto居中)
内边距只对内联元素产生影响，无视块元素
标签之间的空格解析
a标签能包裹块级元素(特殊、区域链接)

行内块元素特性(集合两种盒模型的特征)：
inline-block: (input)

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

行内空格符的问题

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

1. 给行内块元素父级设置字体大小为零，行内块元素字体大小重新设置
2. 删除标签之间空格
3. 从根本解决问题（不要使用）

**元素的显示和隐藏：**display：none

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

对象隐藏：默认值visible

visibility: hidden;

透明度：opacity：0(取值为0-1)

4.溢出滚动条

<head>
    <style>
    	 div {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            /* 默认值 */
            /* overflow: visible; */
            /* 溢出隐藏 */
            /* overflow: hidden; */
            /* 文字超出时才会显示滚动条 */
            /* overflow: auto; */
            /* 文字超不超出都显示滚动条 */
          	  overflow: scroll;
            /* 分别设置横纵滚动条 */
            /* overflow-y: scroll;
            overflow-x: hidden; */
        }
    </style>
</head>
<body>
    <div></div>
</body>

/* overflow-y: scroll;
        overflow-x: hidden; */
    }
</style>

```

拾玥花开

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06.默认显示类型和显示类型转换

05.默认显示类型和显示类型转换1.什么是显示样式**显示样式：**是W3C规定浏览器采取哪种盒模型规则来显示一个元素，常用显示样式的值有：块级盒模型：block行内盒模型：inline行内块级模型：inline-block盒模型：是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模display：block型。行内模型：是W3C规定一个浏...
复制链接

扫一扫