HTML5 CSS3 整体布局 | ICHARM

首页 » 博文 » Web » 正文

HTML5 CSS3 整体布局

       在HTML4中,通常人们习惯使用CSS+DIV进行整体布局,但是在HTML5中新增了很多结构标签,有<header>,<footer>,<nav>等。下面我们将介绍使用新的标签进行整体布局。

整体布局在网页设计中是最基本的,掌握好整体布局有助于后续的学习。

符合W3C规范的html5页面的结构:

<!DOCTYPE html>  
    <html lang="zh-CN">  
    <head>  
        <title>未命名文档</title>  
    </head>  
    <body>  
        ......页面内容部分
    </body>
    </html> 

网页的盒子模型

 

其实网页由一个个盒子拼凑和叠加出来的,之就是网页的盒子模型。

QQ截图20151004103749_2

 

把上面的网页简化,得到一个基本的网页结构图

 

1

 

这就是上面网页的基本的网页结构,由四个盒子组成,其中header盒子里还可以叠加nav(导航)盒子和logo盒子。其他的盒子里可以叠加许多盒子,来达到不同效果。

盒子模型的基本属性

  • margin(外边距)
  • border(边框)
  • padding(内边距)

上面的三个基本属性都有上、右、下、左四个方向的子属性,如:margin-top、margin-right、margin-left、margin-bottom;基本属性主要用来定位盒子和控制盒子的规格。

下面是各属性的示意图,第一张看起来比较抽象,但比较详细,第二张很容易理解。

 

 

b5d-35e5-8dc572db98

 

 

由第一张的示意图,我们可以看出,一个content在网页中实际占用尺寸为

  • s-width = width + padding-left + padding-right + border-left + border-left
  • s-height = height + padding-top + padding-bottom + border-top + border-bottom

下面是盒子模型的层次结构(3D结构示意图)

b15-af23-3ee7-92eb-d25d0

第1层:盒子的边框(border),
第2层:元素的内容(content)、内边距(padding)
第3层:背景图(background-image)
第4层:背景色(background-color)
第5层:盒子的外边距(margin)

 

HTML5新增的布局结构标签

在以前的HTML规则中,布局大多采用DIV + id 的方式,而在html5中新增了很多结构标签,下面是可以用来布局的标签的简单介绍:

  • <header>  定义一个页面或一个区域的头部。
  • <footer>   定义一个页面或一个区域的页脚。可包含文档的作者姓名、创作日期或者联系信息。
  • <nav>       定义导航链接。(注:如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。)
  • <article>   定义独立的内容,如论坛帖子、报纸文章、博客条目、用户评论等内容。
  • <section> 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
  • <aside>    定义两栏或多栏页面的侧边栏内容,如联系我们、客服、网站公告等内容。

注意:上面的标签支持html5的全局属性和事件属性

传统的布局方式:

HTML5布局方式:

 

HTML/CSS的三种布局模型

HTML/CSS的三种布局模型

流动模型(Flow)

流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型典型的特征:
1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
2.在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型

设置元素浮动就可以实现两个块状元素并排显示,下面有详细的介绍,这里就不多说了。

层模型

层模型类似于ps中的图层的概念,但是由于网页的大小是能动态改变的,所以层模型使用的效果并不好,所以这里就不介绍了。

HTML5布局代码分析

我们以实现上面漫漫邮子路的基本网页结构图为例

HTML结构代码:

<!DOCTYPE html>  
    <html lang="zh-CN">  
    <head>  
        <link rel="stylesheet" type="text/css" href="style2.css">
        <title>mmyzl基本结构图</title>  
    </head>  
    <body>  
            <header>header</header> 
            <article>main content</article>
            <aside>right side</aside>
            <footer>footer</footer>
    </body>
    </html> 

CSS样式:

body{
	background-color: #CCCCCC;  /*设置背景色为淡灰色*/
	max-width:1000px;           /*设置网页最大宽度,方便下面布局*/
	margin:50px auto;           /*设置网页顶部离浏览器边缘的距离,其他方向为auto*/
	border:3px solid white;     /*设置网页的边框为3px厚的实心白色线*/
}

header{
	background:white;             
	margin:50px; 
	height:200px;
}

article{
	background:white;
	margin:0px 50px 50px 50px; /*上 右 下 左的外边距分别为0px 50px 50px 50px*/
	height:700px;
	width:650px ;
	float:left;                /*设置article盒子向左浮动(关于float属性的详解在下面,需要好好理解)*/
}

aside{
	background:white;
	height:700px;
	margin:0px 50px 50px 0px;
	width:200px; 
	float:right;              /*设置aside盒子向右浮动*/
}

footer{
	background:white;
	margin:50px;
	height:150px;
	width:900px;
	clear:both;              /*clear是用来抵抗float属性的,由于上面的两个盒子带有float属性,所以这里需要应用clear属性,否则会发生重叠,可以试着注释本条属性看看*/
}


效果图:

zhengtibuju

 

float属性和clear属性

首先说明下CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术。.在HTML中的所有对象,默认分为两种:块元素(block element)、内联元素(inline element),虽然也存在着可变元素,但只是随上下文关系确定该元素是块元素或者内联元素。

其实CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后,它将不再独自占据一行。可以浮动到左侧或右侧。

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样

那么为什么要使用浮动float属性呢?没有作用float属性的main content盒子和right side盒子是以块元素的方式显示的,这样的显示方式会独自占据一行,如下图(在上面的CSS样式中注释Float属性),要想让他们并排显示,只有对他们分别作用float left和float right属性。

zhentibuju2

清除Float
      清除(clear)是浮动(float)的相关属性.一个设置了清除Float的元素不会如浮动所设置的一样,向上移动到Float元素的边界,而是会忽视浮动向上移动。
      clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

我们把上面HTML代码中footer标签注释掉,效果如下图:

float

 

我们把CSS样式中footer里的clear:both属性注释掉,看看效果图:

float1

有关float和clear属性的详细介绍可以查看鸣谢里的两篇博文,这里只对用在整体布局的简单介绍。

鸣谢

HTML CSS + DIV实现整体布局

HTML5–HTML标签的改变-崭新的布局

html5+css3布局尝试

CSS中float属性详解

详解CSS样式中的float属性

感谢上面博文的作者,本文参考或引用了上面博文的内容。

 

 

发表评论