Web前端技术开发（HTML5+CSS3+JavaScript）课件 第六单元 层与区块的页面布局

Web前端开发技术第六单元层与区块的页面布局掌握层的创建，掌握盒子模型，能够使用层进行页面布局层的控制，层定位，层和盒子模型的应用6.1CSS布局基础6.2创建层6.3盒子模型6.4边框属性6.8清除浮动6.9元素定位6.5填充属性6.7元素浮动6.6边距属性

CSS布局基础16.1.1文档流的概念

文档流又称标准文档流(NormalFlow)，

是文档中可显示对象在排列时所占用的位置。按照网页文档上的代码出现的位置从上到下，从左到右进行显示，这也是浏览器解析网页文档默认的方式。<div>标记它默认占用一整行，<p>标记默认占用宽度也是一整行，按照标记出现的先后次序从上到下来显示，而<img>标记可以在同一行上出现多个，从左到右依次显示，直到最后一个元素的右边没有足够的空间容纳下一个元素。网页中大部分元素默认是占用文档流，也有一些是不占文档流的，比如表单中隐藏域。在本单元还会详细介绍设置元素的浮动属性和定位方式来使网页元素脱离文档流。在文档流中不同的网页元素所表现出来的特性也有不同，如<p>元素独占一行，而<img>元素一行上可显示多个，因此，可将网页元素分为顶级元素、块级元素和行内元素。6.1.2块级元素与行内元素

顶级元素：

顶级元素(top-level)包括html标记，body标记，frameset标记，表现如块级元素。块级元素：

块级元素(blockelement)一般是其他元素的容器元素，能容纳其他块元素或行内元素。最常见的就是p和div这两个，说的简单点，块级元素就好比一个方盒子，还可以放其他的盒子。默认情况下块级元素，是独占一行的。常见的块级元素有<div>，<h1>…<h6>，<p>，<ul>，<ol>，<li>，<table><tr><td>，<form>等。6.1.2块级元素与行内元素行内元素：

行内元素(inlineelement)也叫内联元素，行内元素只能容纳文本或者其他行内元素，它允许其他行内元素与其位于同一行，但宽度(width)高度(height)不起作用。常见行内元素为<span>，<a>，<img>等。

例如：可以给div或p应用下面样式，但是a标签却无法应用下面的样式。

但是，可以通过样式display属性来改变元素的显示方式。当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。所以可以给a标签应用以下样式：创建层26.2创建层整个网页文档内容需要进行分区，把文档分割为独立的、不同的部分。<div>标记可定义文档中的分区或节（division/section），它可以用作严格的组织工具，并且不使用任何格式与其关联。<div>是一个块级元素，这意味着它的内容自动地在新行上开始。实际上，换行是<div>固有的唯一格式表现。可以通过<div>的class或id属性应用额外的样式。可以对同一个<div>元素应用class或id属性，但是更常见的情况是只应用其中一种。创建层的基本语法：语法说明：<div>标记为双标记，标记中可以嵌套表示用于显示的HTML标记盒子模型36.3盒子模型

盒子模型是CSS的核心知识点之一，它指定元素如何显示以及相

互的影响。页面上的每个元素都被看成一个矩形盒子，这个盒子由内容(content)、填充(padding)、边框(border)、边距(margin)这4个要素组成。

如图所示6.3盒子模型

我们以照片墙为例，照片（content）周围有空白（padding）存在，使得照片可以不紧贴照片框（border），空白延伸到照片框，每幅照片之间还有间隔（margin），如下图所示。网页元素是这里的照片，设置网页元素的填充可以在内容周围创建一个隔离带，使内容不与边框连接在一起。如果给网页元素设置背景，那么背景应用于元素的内容和填充组成的区域。网页元素可以设置边框样式、宽度和颜色。外边距是透明的，一般使用它控制元素之间的间隔。填充(padding)、边框(border)、边距(margin)盒子模型中的3个要素在上（top）、右（right）、下（bottom）、左（left）这4个方向上可以分别进行设置，也可以同时进行设置。6.3盒子模型

盒子模型在浏览器不同模式下的解释有所不同，在浏览器标准模式与混杂模式下网页元素的实际宽度(width)和实际高度(height)的计算就所有不同，公式如下表混杂模式下元素的实际宽度和高度就是width和height属性设置的值。边框属性46.4边框属性网页元素分别有上、右、下、左四条边框，每一条边框上的样式（style）、宽度（width）和颜色（color）有对应的CSS属性进行设置，也可以在组合属性中同时设置。如下图所示。6.4边框属性注：任何的版本的InternetExplorer（包括IE8）都不支持属性值"inherit"或"hidden"6.4边框属性p{

border-top-style:double;border-top-width:2px;border-top-color:#FF0000;}p{border-top:double2px#FF0000;}实例6-1：设置段落文字的上边框为双实线、宽度为2像素，颜色为红色。第一种方案：第二种方案：第二种方案中使用的border-top属性是一个组合属性，该属性是可以同时设置样式、宽度和颜色，分别用3个值代表3个分量上的设置。其中，样式:double，宽度2px，颜色#FF0000，值与值之间用空格分隔。其他组合属性设置如表6-3所示。我们将通过实例6-2，3，4进行说明。6.4边框属性div{border-style:solid;

height:80px;}实例6-2：使用组合属性设置div元素的四条边框样式为实线。6.4边框属性实例6-3：使用组合属性设置div元素的上边框样式为实线，右边框为虚线，下边框为

双实线，左边框为点线。div{border-style:soliddasheddoubledotted;

height:80px;}p{border:solid1px#0000FF;height:80px;}实例6-4：使用组合属性设置段落文字的四条边框为实线，宽度为1像素，蓝色。

边框border-width和border-color这两个组合属性的用法与border-style相似。填充属性56.5填充属性设置内容样式属性说明上内边距padding-top长度|百分比，其中，百分比是相对于上级元素宽度width的百分比，随着上级元素width的变化而变化，和高度height无关。右内边距padding-right下内边距padding-bottom左内边距padding-left内边距padding取1~4个值。可参考border-style设置。填充（padding）也称为内边距，在盒子模型中用于调整元素内容到边框的距离。设置填充的CSS属性如表所示。6.5填充属性实例6-5第一段落使用双实线样式，第二个段落设置了四个方向上的填充除了使用组合属性padding进行设置外，还可以在4个方向上分开设置，示例代码如下所示。.b2{border:8pxsolidred;padding-top:35px; padding-right:10px; padding-bottom:15px; padding-left:25px;}边距属性66.6边距属性边距（margin）也称为外边距，边距用于网页元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。如果把网页元素看成是一个个盒子，盒子与盒子之间的距离通过设置边距进行控制。设置边距的CSS属性如表6-5所示。6.6边距属性实例6-6：设置图片和div层这两种元素的边距。实例6-6网页效果为了方便地控制网页元素，一般情况下，会清除网页元素的内外边距，代码如右body{padding:0px;margin：0px;}元素浮动76.7元素浮动浮动属性（float）是CSS中频繁用于网页布局的属性，该属性的取值如表6-6所示6.7元素浮动块级元素的默认排列方式如下图所示，每个元素独占一行，新的元素在新的一行上开始。在使用div层进行三栏式的页面布局时，需要设置div元素的float属性，使层浮动起来，同在一行上显示多个。选择器{float:left;}/*元素向左浮动*/选择器{float:right;}/*元素向右浮动*/网页元素在使用了float属性之后，会脱离标准文档流，此时块级元素会有明显的变化，表现出类似于行内元素的特征，默认元素的大小变成自适应元素内容的大小，能在一行上显示多个元素，只要余下的空间能容纳下一个元素，但跟行内元素相区别的是仍可以使用“width”和“height”属性自定义元素大小。清除浮动86.8清除浮动清除属性clear规定元素的哪一侧不允许其他浮动元素。该属性的取值如表6-8所示。6.8清除浮动实例6-11：给<div>层设置float属性，使得三个层显示在同一行上在所有子元素的后面添加一个层<div></div>，设置该元素的CSS属性“clear:both”，可以将非浮动父元素的下边框显示在浮动子元素下方。元素定位96.9元素定位positon属性用于网页元素定位，相对于float属性更加灵活。该属性的取值如表所示。值描述absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。relative生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20"会向元素的LEFT位置添加20像素。static默认值。没有定位，元素出现在正常的流中（忽略top,bottom,