HTML中的span标记和div标记

在使用css排版网页时，span和div常用的两个的标记。利用这个两个标记，加上css样式控制，可以实现很复杂的网页效果，下面为大家详细讲解一下他们区别和使用。

span和div概念区别和相似点

div标记是html3.0时提出来的，但是不常用，直到css的出现才慢慢变得应用广泛起来。HTML4.0以后span才被引入，主要针对样式表设计的。div与之间可以理解成一个容器，这个容器可以放段落、标题、图片等各种HTML元素。div与之前的内容可看做一个独立内容的对象，对于css的控制。先需要对div控制，再对div中各标记的元素再进行控制。

CSS3发布了许多新特性，最好用的莫过于box-sizing了。对于一个非前端方向的程序猿，CSS2的盒子模型简直就是一坨屎，永远都无法理解div的宽度和高度为什么没有包括边框、padding、margin，这么反人类的设计是怎么搞出来的。

在CSS3中box-sizing终于纠正了这个错误：

box-sizing： content-box | border-box | inherit；

参数：
 content-box：css2中的邪恶盒子模型；
 border-box：内边距、边框宽度都向内计算；
 inherit: 继承父元素box-sizing；

前言

在响应式布局逐渐成为主流的今天，网页或者app的流式布局已经不算是一个新鲜的词汇了。今天我要讲的一个内容也是跟页面流式布局有关，如何让你的网页实现完美的缩放？

网页布局

我们可以很快速的写出一个响应式布局的页面，首先看一下效果图。

网页布局

其中html部分的代码如下：

这篇文章，小海老师带领大家一同做一个利用CSS技术实现的导航栏。通过这个导航栏的制作，希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识，并能够达到灵活运用的程度。

承接文章：灵活控制块级元素在一行内显示，CSS

内容导读

当父div的行高等于自身高度时，内部的行内元素会上下居中显示。行内块没有固定高度时也会上下居中显示。所以需要对父div的 line-height 进行调整。利用定位属性（top、left、right、bottom）百分比的模式。若为100%，则代表偏移的长度为父div的高度（宽度）的100%。定位属性top和bottom（或是left和right）值分别设置为0，但子div有固定高度（宽度），并不能达到上下（左右）间距为0，此时给子div设置 margin:auto 会使它居中显示。

一、让DIV在页面居中

* {
 margin:0;
}
#box {
 width:300px;
 height:300px;
 background:#03F;
 position:absolute;
 left:0;
 right:0;
 top:0;
 bottom:0;
 margin:auto;
}

二、让子DIV在父DIV中居中；文字在DIV中居中