【学习笔记】HTML+CSS

主流浏览器及其内核

浏览器	内核
IE	trident
Chrome	webkit/blink
Safari	webkit
Firefox	gecko
Opera	presto

二、选择器的权重值

选择器	值
!important	10000
行间样式	1000
id	100
class、属性、伪类	10
标签、伪元素	1
通配符	0

三、HTML的结构
1、行级元素只能嵌套行级元素【有例外】
2、a标签不能嵌套a标签
3、块级元素可以嵌套任何元素【有例外】
4、p标签不能包裹div标签

四、文本类元素之间有分隔符的问题
无需解决，文本类元素之间有分隔符（空格/回车）时会有间隔，去掉分隔符即可

<span style="background-color: #FFCCFF">行间元素 1</span>
<span style="background-color: #ffcccc">行间元素 2</span>
<img src="img/0.jpg" style="width: 400px;border: none;">

五、行间元素添加定位/浮动样式
行间元素在添加了以下两个CSS样式后会自动转换成行级块元素（display:inline-block）：
position:absolute;
float:left/right;

六、文本类元素会底对齐
文字与行级块元素同行时，文字与元素会底部对齐；但行级块元素内部在包含文字时，外部的文字就会变成与元素内部文字底对齐。

<span style="display:inline-block; width:100px; height:50px; background-color: #FFCCFF;"></span>
123456
<br>
<br>
<span style="display:inline-block; width:100px; height:50px; background-color: #FFCCCC;">654321</span>
123456

七、网速过慢图片无法加载时，保证网站可正常运行的小技巧
网速过慢时网页会先屏蔽掉CSS和JS文件，仅加载HTML文件，可以将该区域高度设置为0，利用padding将盒子撑开显示背景图，再设置盒子超出隐藏，就能够将a标签的内容隐藏起来。

HTML结构：

<a href="http://www.baidu.com" target="_blank">请点击这里</a>

CSS样式：

*{
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
	color: #333;
	font-size: 50px;
	display: inline-block;
	width: 300px;
	height: 0;
	background: url(../img/Rella：32971519_p0.jpg) no-repeat;
	background-size: 300px 150px;
	text-align: center;
	overflow: hidden;
	padding-top: 150px;
}