05-默认显示类型与显示类型转换-CSDN博客

本文链接：https://blog.csdn.net/weixin_44035171/article/details/104283758

三种显示类型特征

块级元素特性：
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标签不是行内块元素(是行内元素,但是可以设置宽高，这源自于历史…)

字母或数字连起来会被浏览器当成一个字符去显示了，然后不会换行，。

overflow

overflow:hidden

oveerflow:visible

overflow:auto

overflow:scroll

overflow-x:overflow-y

解析空格

形成原因：行内元素之间会解析空格回车，形成间距。
解决办法：
1. 给行内块元素父级设置字体大小为零，行内块元素字体大小重新设置
2. 删除标签之间空格
3. 从根本解决问题（不要使用）

display:inline

文本基线：由字体本身的设计组成

行内元素的高度不是字体的高度，而是 line-height.这个line-height是实际高度，字体会居中在其中，所以让line-height=height可以上下居中就是这个道理。

所以行间距也就等于line-height减去font-size（因为下面的一行的字体上面的那一块加上这里的这一块刚好是行间距，这俩块高度相等哟）

display: none;

隐藏不显示
特点：

1. 不占据空间（如同消失一般），无法点击交互		
2. 内部子元素也不会显示

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

   **visibility:hidden (消失了，但是位置还在，它与opacity：0（范围是0-1）一样。而display:none，位置都没了)**

浏览器内核

内核名称:

① Trident(IE内核)->IE系列/360浏览器/猎豹浏览器/百度浏览器/世界之窗-> -ms-

② Gecko(Firefox内核)->火狐浏览器 -moz-

③ Webkit(Safari内核,Chrome内核原型,开源)->苹果Safari浏览器/安卓默认浏览器 -webkit-

④ Blink->Chrome(谷歌自主研发) -webkit-

⑤ Opera现已改用Google Chrome的Blink内核 -o-
//Presto(Opera前内核)(已弃用)

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

新一代样式重置规则normalize.css

normalize.css的目标如下：
保留有用的浏览器默认值而不是删除它们。
规范化各种HTML元素的样式。
纠正常见的浏览器的错误不一致。
提高可用性。
使用注释和详细文档解释代码。
它支持各种浏览器（包括移动浏览器），并包括用于规范化HTML5元素，排版，列表，嵌入内容，表单和表格。
方便调试，避免大量继承样式导致的调试界面混乱问题。

http://nicolasgallagher.com/about-normalize-css/