网页设计（二）——DIV+CSS布局1

前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~

网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿，有关HTML+CSS框架的编程，比较基础。当时为了给入门的同学更多感性认识，提供了很多小实例，这里也都给出来了。
 

目录

DIV+CSS布局

DIV+CSS布局概念

DIV标签

DIV标签——盒子模型

CSS概念

CSS的优先次序

使用CSS

CSS选择器

CSS选择器——元素选择器

CSS选择器——元素选择器——实例3

CSS选择器——类选择器

CSS选择器—— ID选择器

CSS选择器——派生（后代）选择器

CSS选择器——实例4

---

DIV+CSS布局

 

DIV+CSS布局概念

DIV+CSS布局方式并不是一种新的语言或者体系，它就是html语言中的一部分。

简单来说就是把标签中的样式和部分属性，放到另外一个文件中，通过一定语法将它们联系起来，浏览器通过CSS中的语句来决定html中的DIV（之前提到过，div为html中的一种标签）如何在页面中显示。

这种布局中，div承载的是内容，而css承载的是样式。

具体什么是CSS将在后面讲到。

 

DIV标签

<div>标签的使用方法和其他标签的使用方法完全一样，在网页中它的性质和<p>是一样的，均为块级元素。

DIV本身就是容器性质的，它的主要作用就是承载内容，让css有一个作用的对象，当然其他标签也可以作为css的作用对象，但div有着一些其他标签不具有的优势，例如div之间可以任意嵌套，<p>标签之间是不可以嵌套的。

一般我们利用盒子模型来理解div。

 

DIV标签——盒子模型

每个div都可看做是一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。尽管这些边距都是空白的，但它们在布局中却能够发挥意向不到的作用，往往只要通过设置边距的大小就可以实现定位。

 

下图中的border为夸张版，但可以帮助大家认清border的地位：

 

CSS概念

 

在了解div之后，我们可以开始学习CSS了。

CSS 指层叠样式表 (Cascading Style Sheets)，它的作用主要是提供对文档外观的更好更全面的控制，而且不干扰文档的内容。

CSS能够很好地解决内容与表现分离的问题 ，极大地提高了工作效率。