HTML中部分元素介绍和CSS的层级关系

<div>元素

<div>元素是块级元素，他可用于组合其他HTML元素的容器。

<div>元素没有特定的含义。由于他属于块级元素，浏览器会在其前后显示换行。

使用CSS，<div>元素可以对所对应的内容块设置样式属性。

<span>元素

<span>元素可作用文本的容器，没有特定的含义。

使用CSS时，<span>元素可用于部分文本设置样式属性。

CSS优先级和层叠

级别	选择器	权重
A	行内样式	1000
B	ID选择器	100
C	类、伪类和属性选择器	10
D	标签选择器和伪元素选择器	1

CSS的层叠

<div id="one" class="two">
    <p>CSS的层叠</p>
</div>

.two{
  background-color:blue;
  color:green;
}
#one{
  background-color:red;
}

这个时候的背景颜色是红色，红色的覆盖了绿色。

继承

特定的CSS属性向下传递到子孙

<div class="three">
    <p>
        CSS的继承
    </p>
</div>

.three{
    color：red;
border:1px solid red;
}

这个时候div标签中的所有文本包括p标签里的中文都会变成红色。

当然也不是所有的CSS属性都会被子类型继承，例如border属性,div标签有了边框，而p标签就没有边框。

CSS颜色

颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。

CSS的颜色可以通过以下等方法指定：十六进制颜色、RGB颜色、RGBA颜色、颜色名等值指定

p{
background-color:red;
}

p{
background-color:rgb(255,0,0)
}

p{
background-color:#fff
}

盒子模型的边框和边距

用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。

用margin属性或者padding属性分别设置边距和内边距的宽度。