在开始css这部分之前，我们需要先在此着重提一下div这个标签，div标签在网页的标准化布局上起到了决定性的因素，我们通过使用div+css，可以完美的让我们的每个组件去到它自己应该去的地方。

 

　　我们在学习css样式前，需要从css选择器开始学起

 

　　css选择器

 

　　css常用选择器用下面这几种

 

　　派生选择器

 

　　id选择器

 

　　class类选择器

 

　　属性选择器

 

　　元素选择器

 

　　1、派生选择器

 

　　通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

 

　　2、id选择器

 

　　id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

 

　　id 选择器以 “#” 来定义。

 

　　id 选择器和派生选择器，在现代布局中，id 选择器常常用于建立派生选择器。

 

　　3、class类选择器

 

　　类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

 

　　4、属性选择器

 

　　对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。如下所示：

 

　　5、元素选择器

 

　　最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

 

　　创建css

 

　　创建样式的方式有三种，第一是使用外部链接，第二种是使用内部的<style>标签，最后一种就是在标签的style属性中添加css样式。

 

　　CSS样式

 

　　1、文本样式：

 

　　2、表格样式

 

　　3、CSS框模型

 

　　CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式

 

　　元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

 

　　4、CSS定位

 

　　CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

 

　　定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

 

　　div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

 

　　首先从position来开始看，这里很重要；

 

　　overflow常用值

 

　　前面我们层级说过块级和内联元素，块级会直接占满该行，而内联元素的会在当前行内继续填充内容。当然如果我们想让一个内联元素能够转换为块级，或者块级转换为内联，此时我们就可以使用display属性来完成了，下面的是display常用的元素