元素类型与样式初始化
1. 样式初始化
样式为什么要初始化?
这个世界上有很多浏览器firefox/chrome/ie/opera等等,不同浏览器,不同浏览器版本对于页面的解析效果不相同,甚至同一个浏览器不同的版本都不一致,直接导致我们做出的布局会乱掉我们做出的页面做不同的浏览器上展示有可能是不同的,重点是影响布局,不要让浏览器污染我们的布局
浏览器的内核:
| 浏览器 | 内核名称 | 前缀 |
|---|---|---|
| IE/360/猎豹/百度/世界之窗 | trident内核 | -ms- |
| Firefox | gecko内核 | -moz- |
| Chrome/Safari | webkit内核 | -webkit- |
| Opera | blink内核 | -o- |
写前缀是为了向前兼容老版本的浏览器
通配符选择器*
<style>
*{/*选择页面中所有存在的元素,设置样式*/
margin: 0;
padding: 0;
}
</style>通配符选择器存在的弊端:
性能消耗大，根据匹配顺序,将首先匹配通配符,也就是说先匹配出通配符,然后匹配class选择器（就是要对dom树上的所有节点进行遍历他的父级元素）
浏览器，页面生成过程，影响页面渲染事项(深入)
https://www.cnblogs.com/CandyManPing/p/6635008.html
浏览器解析渲染html过程(简单)
我之所见:
页面中所有的标签,设置的越多,浏览器要所需要的计算,解析的越多,会把页面中所有标签都匹配一遍,性能消耗,浏览器渲染,浏览器读取代码完成之后,会一行一行解析,把我们的页面展示出来,我们要去渲染任何一个标签,我们都需要把样式读取出来,耦合到一起。按需分配,需要清除的才清除
例子:
清除li的默认样式,到底是写在ul下面还是li下面?当然是写在ul下面
简单来说,就是你妈叫你去买饮料,一种方法是一次性买5瓶饮料,另一种方法是一次买一瓶饮料,一共要跑5次,你希望采取哪一种方法,当然是第一种方法啦
解决办法: 不使用通配符,设置样式初始化表,对需要的元素进行样式设置
body,p,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
ul,ol{list-style:none;}
img{border:0px;}
a{text-decoration:none;color:#222;}样式初始化同样遵循优先级的顺序
id > class > tag > 通配符 > 用户代理样式
2. 标签分类
页面的元素基本分成两大类型:
要么是盒子要么是文本
块级元素:我们的盒子的本质就是块级元素
行内元素:我们的单个字的本质就是行内元素
标签分类
块级元素(block)
- 特性
- 独占一行
- 高度由里面的元素撑开
- 宽度默认100%(继承父元素宽度)
- 可以设置外边距和内边距
- 可以包裹其他任意元素(内联和其他块级元素)
- p标签不可以包裹块级元素(特殊,只存放文本)
- 常见块级元素
- div / p / dl / form / h1-h6 / ol / ul
行内元素/内联元素(inline)
- 特性
- 和其他行内元素处于同一行
- 不支持宽高
- 上下边距无效,auto无效(不支持auto居中)
- 内边距只对内联元素产生影响,无视块级元素
- 标签之间的空格解析
- a标签能包裹块级元素(特殊,区域链接)
- img标签是特殊可以设置宽高的行内元素,img标签可以设置宽高,margin,外边距上下有效
- 常见行内元素
- a / b / i / img / span / em / strong /label
行内块元素(inline-block)
特性
本质上是行内元素,具有行内元素的性质
- 支持宽高,内边距只对内联元素产生影响,无视块级元素
- 标签之间的空格解析
- 上下边距有效,auto无效(不支持auto居中)
- 内边距只对内联元素产生影响,无视块级元素
- 标签之间的空格解析
img标签不是行内块元素(是行内元素,但是可以设置宽高)
常见行内块元素
input / button
间隙解析解决方法:
给行内块元素父级设置字体大小为零,行内块元素字体大小重新设置
<style>
ul{font-size:0;}
li{display:inline-block;font-size:16px;}
</style>
<body>
<ul>
<li>今日事今日毕</li>
<li>光说不练假把式</li>
</ul>
</body>3.标签转换(属性:display)
- 内联元素转换为块元素
display:block - 块元素转换为内联元素
display:inline - 转换成行内块元素
display:inline-block - 隐藏对象
display:none
- 不占据空间,无法点击交互
- 内部子元素也不会显示
- 会产生页面的回流与重绘