浏览器介绍
- 常见的浏览器有：谷歌（Chrome）、火狐（Firefox）、IE（万恶之源）、Opeara、Safari（苹果浏览器）
- 浏览器内核根据渲染引擎分为：Trident(IE）、Webkit(safari)、Blink(基于Webkit的内核，目前Chrome使用Blink内核)、Gecko（Firefox）
- 对于移动端来讲分为：Android-webkit、IOS/wp7-safari或者IE的Trident
CSS中的块级元素和行级元素
块级元素
块级元素特点：每个块级元素都是独占一行的。
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>
行级元素
行级元素特点：可以和其他元素处于同一行，不用另起一行。并且块级元素的高度、宽度、底部边距不可设置
<a>、 <img>、 <span>、 <br>、 <label>、 <input>
选择器
1.标签吗选择器
div{
}
2.类名选择器
.container{
}
3.Id选择器
#nav-bar{
}
4.后代选择器
.container ul li{
}
5.子代选择器
ul>li>a{
}
6.分组选择器
.container img,a{
}
或者
h1,h2{
}
7.伪元素选择器
1. link表示元素未被点击时的状态
2. hover表示鼠标悬停时的状态
3. active表示元素被点击时的状态
4. visited表示元素被点击后的状态
#id: over{
}
选择器的优先级
####优先级的权重会叠加，如 div .mf{}的权重为0001+0010
div a{}权重为0001+0001
！important 优先级最高
行内样式（内联样式） 1000
Id选择器 0100
类选择器 0010
标签选择器 0001
通配符或者继承 0000
内边距撑大盒子的问题
盒子的实际宽度=width（内容区域宽度）+padding（左右内边距）+border（左右边框）
盒子的实际高度=height（内容区的高度）+padding（上下内边距）+border（上下边框）
1.块级元素没有设置宽度，给这个块元素设置左右内边距，不会撑宽盒子
2.块级元素设置了宽度，必然撑宽盒子
3.行内元素设置了左右内边距，必然撑宽盒子，上下内边距必然撑搞高盒子