网页设计之初学CSS

前言：

    学习网页制作，首先要认识网页，了解网页的组成部分，以及每一层数据的传递。我对网页前台制作的理解是：在一个页面上添加多个盒子，对每个盒子进行装饰，规范盒子与盒子之间的位置。

导图：

具体解析（请结合图）：

1、容器的类型

   块级元素和行内元素，就是一个个盛放文字，图片等内容的容器。

   块级元素：div，可以占满一行。在表现形式上相当于我们回车键产生的效果。

   行内元素：<span></span>中的内容。根据内容来换行，一行内容填写满了之后才能换行；

   行内元素也可以转换为块级元素，但是在不同的浏览器中显示出的效果不同，有些只能对块级元素操作，不能对行内元素操作。

2、盒子的内容

官方标图：

举个例子（我的手工操作版）：

    盒子中包括：外边距（margin）、 内边距padding 、内容区域（装进去的东西）：宽（width）高（height）、 厚度（border）

    “百度一下”下面的框 就是border，每一部分都可以有一个border，我们自己设置； 在百度中，我们发现，并不是所有的内容都是在框框中的，有的只是下边有一条线。其实它的框是“隐形”的，我们不给它的框设置颜色，或者只给border-bottom添加颜色，再设置一个虚线的形式。

    框中的内容和框之间的距离是padding；

    margin是边框与边框之间的距离，也分上下左右，但是对行内元素不顶用。上下边距都设置的时候不是给两者加和，是取两者之间的最大值。

3、盒子位置的设置

标准流：

   确定标签的排列方式，按书写顺序，谁在前，先显示谁，紧接着排列；

浮动：

           虽然，<div>块级元素是分块了，但是还是占一整行，在我们使用百度时，发现并不都是以一个内容独占一行的形式存在的，而是以一块一块存在的。

   所以需要：float--脱离标准流。但并不是所有的都需要浮动，对于在同一个body中的，我们不想使其浮动的块级元素，进行清除浮动：

    clear:left----清除向左浮动（之前对所有内容进行了向左浮动） 写在对框整体设置的部分。还在标准流中内容往前靠。

定位：

               在我们的块级元素中加入其它元素，就可以对这个元素进行格式设置。默认static，

    relative--相对定位，不脱离标准流；对位置的设置是相对于原来的位置移动的距离。top; left ;right，bottom。

    absolute--决定定位，脱离标准流，在本标签所在的父标签中的位置，不是都对于body的位置。

总结：

       “盒子”，对整个页面内容分块，用统一的规则对知识分开整理，再整体设置盒子之间的关系。对整理自己的知识也是一个不错的方法。