05.默认显示类型和显示类型转换
1.什么是显示样式
**显示样式:**是W3C规定浏览器采取哪种盒模型规则来显示一个元素,常用显示样式的值有:
块级盒模型:block
行内盒模型:inline
行内块级模型:inline-block
盒模型:是W3C规定一个浏览器如何渲染、显示一个元素,根据元素的种类分为块级元素盒模型和行内元素盒模
display:block
型。
行内模型:是W3C规定一个浏览器如何渲染、显示、排版文字的一整套规则。
display:inline
行内块级模型:行内块级盒模型(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>
```