企业官网建设 营销型网站 微信分销系统 微信小程序 企业邮局

DIV+CSS

布局之基础篇

DIV+CSS的布局方法简单来说就是使用div标签作为容器,使用css技术排布标签的布局方法。

DIV+CSS布局


专题摘要

在对css基础知识有了一定的掌握后就可以开始学习div+css的布局方法了。DIV+CSS的布局方法简单来说就是使用div标签作为容器,使用css技术排布标签的布局方法。常用的css布局方式有浮动、定位等。

初识DIV+CSS布局流程

下面举例来说明一下网站主页的排版方式。如图:左侧为实景图,右侧为整体的结构图。 结构图中网页分为三大部分:第一部分为网页的头部,用于放置企业的logo和宣传的flash动画;第二部分为中间部分,内容是网站需要重点展示的部分;第三部分是网页的页脚。

DIV+CSS布局流程7.jpg


了解盒模型

盒模型是div+css布局的基础,要实现div+css布局必须了解盒模型的原理。页面上的每个元素都能看做是一个容器。这个容器就是一个盒子。例如,p标签是一个能装文字的容器,它的高度就是所承载文字的高度。使用div+css布局,div标签就是布局中所用到的容器。大部分人认为只有div标签能作为容器的安排布局。其实不然,在XHTML页面中几乎所用的标签都能被当做容器使用。页面上的每个容器均占用一定的位置。有一定的大小,都会影响其他容器的排布,它们互相作用,从而形成一个页面的布局。


1、div标签的盒模型举例
在XHTML中插入一对div标签,运行后在不同浏览器显示的效果不同,因为浏览器所设置的margin和padding的初始值不同。所以在设置页面时,建议把页面的整体边距和补白设置初始值为0。
2、基本盒模型
下图为基本盒模型,在页面中的所有元素都遵循该模型的设置方式。

基本盒模型

给一个元素设置了高度和宽度后,它就在页面中占有这样的高度和宽度。css提供的width属性用于设置元素的宽度。
3、边距
边距用于设置页面元素与其他元素的距离。Css的margin属性就是用于设置边距的。 其语法:Margin:length
其中length的值可以用长度单位定义,也可以用百分比定义,还可以使用关键字auto定义。margin属性的值可以有四种表示方法。但无论使用哪种方法设置margin值都能设置元素四周的边距。
设置四个值: Margin:10px 20px 30px 40px;分别是:上边距、右边距、下边距、左边距。
设置三个值: Margin:10px 20px 30px;分别是:上边距、左右边距、下边距。
设置两个值: Margin:10px 20px;分别是:上下边距、左右边距。
设置一个值: Margin:10px,当要设置的上下左右边距一致时,就应使用设置一个值的方法。对于border和padding两个属性的值也有与上述一样的缩写方法。
单边距值: 若要设置一个元素的上边距为10像素,其他边距都为0像素,可以应用以下方法:margin:10px 0 0;每个边距都有对应的css属性,可以单独设置某个边距的属性,设置单边的属性为margin-top,margin-bottom,margin-left,margin-right.对于border和padding也有单独设置某一边的属性。
边距重叠: 对垂直排列的块级元素应用了边距后,可能会发生边距重叠的现象。
4、补白
补白用于增加页面元素与内容之间的空间。Css的padding属性是用于设置补白的。
Paddin:length
其中length的值可以用长度单位定义,也可以使用百分比定义,还可以使用关键字auto定义。
使用长度单位设定paddng值。
使用长度单位设定页面元素的padding值,常使用像素或者em
5、边框
边框是页面元素可视范围的最外圈。边框包含的范围包括页面元素的补白和内容。Css提供了设置边框的属性。
border-width:设置边框宽度
css提供的border-width属性用于改变边框的宽度,其语法:border-width:width
其中width值可以使用长度单位和关键字进行设置。通常使用px或者em作为长度单位。而关键字thin、medium、和thick。在设置边框宽度之前,必须先指定边框的样式。
border-color:设置边框颜色
css提供的border-color属性用于改变边框的颜色,其语法:border-color:color,其中color值与其他设置颜色的方法是一样的。border-color是border-top,border-bottom,border-left,border-right的缩写。分别是设置四周的边框样式。border-color所缩写的顺序也是顺时针,与设置边距补白一样。
border-style:设置边框样式

常用边框样式


属性值

样式

none

无边框

hidden

隐藏边框

dotted

点线

dashed

虚线

solid

实线边框

double

双线边框,两条单线与其间隔的和等于指定的border-width值

groove

根据border-color的值画3D凹槽

ridge

根据border-color的值画菱形边框

inset

根据border-color的值画3D凸边

outset

根据border-color的值画3D凹边

页面元素布局

在了解基本盒模型后,就要开始进入页面元素布局的学习,细心理解每个示例能够深入了解页面元素布局的基本原则。页面元素布局的核心是定位和浮动的基本原理以及块级元素与行内元素的区别。


1、块级元素与行内元素
所有的XHTML页面元素只有两种,一是块级元素,二是行内元素。

常用块级元素和行内元素

块级元素

行内元素

blockquote

a

dir

b

div

span

fieldset

cite

form

em

H1-h6

i

hr

img

dl

input

ol

label

ul

select

p

br

pre

strong

 

textarea

当以上这些元素单独出现在XHTML页面时,它们会按照自己本身的语义表现样式。

块级元素和行内元素的区别

 

排列方式

可控属性

宽度

块级元素

垂直排列

高度、行高以及上下边距都可控制。

其宽度默认情况下与其父级元素宽度一致。可以设置width属性改变其宽度。

行内元素

水平排列

高度及上下边距都不可控制。

宽度就是其包含的文字或者图片的宽度,设置width属性不生效。

块级元素一般用作其他页面元素的容器,块元素一般都从新行开始,它可以容纳行内元素和块元素。Form标签这一块级元素比较特殊,它只能用来容纳其他块级元素。行内元素只能容纳文本或者其他行内元素。使用css的display属性能使块级元素和行内元素互相转换。Display属性中的block和inline,分别代表块级元素和行内元素。
2、css布局方式-常规流
css有三种基本的布局方式,分别是常规流、浮动和定位。常规流(normal flow)是指页面元素按照所在XHTML文档的位置排列的布局方式。在没有添加其他方面布局方式的情况下,页面遵循常规流的布局方式。
css布局方式-浮动

使用浮动布局是目前网页制作中最为常用的方式。应用了浮动的元素全部都会成为块元素,并且脱离原来的常规流模式。应用了浮动的元素可以向页面的左边或者右边移动。直到其边缘接触到其父元素的边框或者另外一个浮动元素的边框。

css提供的float属性用于设置元素的浮动,它包含三个值,分别是left(左)、right(右)、none(无)。

使用浮动布局是比较复杂的,影响浮动的布局因素很多。例如,一个父元素中有三个div标签,若对其中一个div标签应用浮动,在不同浏览器中的结果表现不同,若对两个或者三个div标签应用浮动,产生结果也不相同,若对父元素应用浮动,子元素的浮动效果也会不同。


1、两个元素的浮动应用
在页面布局中,很多时候会使用来年两个元素的浮动应用。例如,页面为两栏的结构,图文混排都应用了两个元素的浮动。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 

< title >两个元素的浮动应用< / title > 

< style > *{ margin:0; padding:0; font-size:14px; } 

div.father{ width:300px; height:300px; /*设置父元素的高度和宽度都为300像素*/ border:1px solid black; margin:10px;}/*设置父元素的边框为1像素黑色实线,边距为四周10像素*/ 

div.one{ width:100px; height:100px;/*设置第一个div标签的高度和宽度都为100像素*/ background-color:#999;/*设置第一个div标签的背景色为灰色*/ float:left; margin:10px;}/*设置第一个div标签为左浮动,四周边距为10像素*/ 

div.two{ width:100px; height:100px;/*设置第二个div标签的高度和宽度为100像素*/ background-color:#999; /*设置第二个div标签的背景色为浅灰色*/ float:left; margin:10px;}/*设置第二个div标签为左浮动,四周边距为10像素*/ 

< / style > 

< / head > 

< body > 

< div class="father" > 

< div class="one" >第一个div标签< / div > 

< div class="two" >第二个div标签< / div > 

< / div > 

< / body > 

< / html >

2、多个元素的浮动应用
在页面布局中,多个元素的浮动常用于相册、列表排版等。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 

< title >三个元素的浮动应用< / title > 

< style > 

 *{ margin:0; padding:0; font-size:14px;} 

div.father{ width:300px; height:300px;/*设置父元素的高度和宽度都为300像素*/ border:1px solid #000; margin:10px;}/*设置父元素的边框为1像素黑色实线,四周边距10像素*/ 

div.one,div.two,div.three{ background-color:#ccc;/*设置三个div标签的背景色为浅灰色*/ float:left;/*设置三个div标签为左浮动*/ width:100px; height:100px;/*设置三个div标签高度和宽度都为100像素*/ margin:10px;/*设置三个div标签四周边距10像素*/ display:inline;}/*设置三个div标签的显示属性为inline*/ 

< / style > 

< / head > 

< body > 

< div class="father" > 

< div class="one" >第一个div标签< /div > 

< div class="two" >第二个div标签< /div > 

< div class="three" >第三个div标签< /div > 

< /div > 

< /body > 

< /html >

3、清除浮动
使用浮动后,常产生很多意外的结果,因为浮动的元素会脱离原来的常规流。浮动元素可能会覆盖一些非浮动的元素,这是需要使用css的clear属性来清除浮动。Clear属性有四个值,分别是none、left、right、both。
None:允许两边都可以有浮动对象
Both:不允许有浮动对象
Left:不允许左边有浮动对象
Right:不允许右边有浮动对象
css布局方式-相对定位

除了使用浮动布局外,常用的布局方式还有定位。Css提供了position属性用于定位。使用position定位可以定义元素相对其父元素或者其他元素的精确位置。position属性共有四个关键字值。分别是static、absolute、relative和fixed。其中static为默认值,表示块保持在原来的位置上。absolute代表绝对定位,relative代表相对定位,这两种定位方式是最常用的。


1、单个元素的相对定位
使用相对定位,就是子元素相对于自身偏移的位置。要确定子元素相对于自身偏移了多少,就要使用top、bottom、left、right属性来确定。这四个属性能使用长度单位或者关键字auto设置。例如,设定子元素的position属性为relative,然后设置top为10像素,那么子元素就会相对于自身的顶部边界下移10像素。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head> 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 

< title>单个元素的相对定位< /title > 

< style > 

*{ margin:0; padding:0; font-size:14px;} 

div.father{ width:300px; height:300px;/*设置父元素的高度和宽度都是300像素*/ border:1px solid #000;/*设置父元素的边框1像素黑色实线*/ margin:10px;}/*设置父元素四周边距为10像素*/ 

div.one{ background-color:#666;/*设置第一个div标签的背景色为浅灰色*/ width:100px; height:100px;/*设置第一个div标签的高度和宽度都为100像素*/ position:relative;/*设置第一个div标签为相对定位*/ top:10px;}/*设置第一个div标签从上往下偏移10像素*/ 

< /style > 

< /head > 

< body > 

< div class="father" > 

< div class="one" >< /div > 

< /div > 

< /body > 

< /html >

2、两个元素的相对定位
当子元素增加到两个的时候,使用相对定位的情况就变得较为复杂。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 

< title >两个元素的相对定位< /title > 

< style > 

*{ margin:0; padding:0; font-size:14px;} 

div.father{ width:300px; height:300px;/*设置父元素的高度和宽度为300像素*/ border:1px solid #000;/*设置父元素的边框为1像素黑色实线*/ margin:10px;}/*社会组父元素四周边距为10像素*/ 

div.one{ width:100px; height:100px;/*设置第一个div标签的高度和宽度为100像素*/ position:relative;/*设置第一个div标签为相对定位*/ top:10px;}/*设置第一个div标签从上往下偏移10像素*/ 

div.two{ background-color:#999;/*设置第二个标签背景色为浅灰色*/ width:100px; height:100px}/*设置第二个div标签高度和宽度都是100像素*/ 

< /style > 

< / head > 

< body > 

< div class="father" > 

< div class="one" >第一个div标签< /div > 

< div class="two" >第二个div标签< /div > 

< /div > 

< /body > 

< / html >

css布局方式-绝对定位

使用绝对定位的子元素,其移动是相对于已经定位的父级元素。若其父元素并未定位,那么使用绝对定位的子元素就会相对最初的包含块来定位。通常这个最初的包含快是html标签。


1、单个元素的绝对定位
使用绝对定位同样有top、bottom、left、right四个用于移动的属性。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 

< title >单个元素的绝对定位< / title > 

< style > 

*{ margin:0; padding:0; font-size:14px;} 

div.father{ width:300px; height:300px;/*设置父元素的高度和宽度都是300像素*/ border:1px solid #000;/*设置父元素的边框为1像素黑色实线*/ margin:10px;}/*设置父元素四周边距为10像素*/ 

div.one{ background-color:#333; /*设置第一个div标签的背景色为灰色*/ width:100px; height:300px;/*设置第一个div标签的高度和宽度都是100像素*/ position:absolute;/*设置第一个div标签为绝对定位*/ top:10px;}/*设置第一个div标签从上往下偏移5像素*/ 

< / style > 

< /head > 

< body > 

< div class="father" > 

< div class="one" >< /div > 

< /div > 

< /body > 

< /html >

2、两个元素的绝对定位
当子元素增加到两个的时候,使用绝对定位的情况就变得较为复杂。使用绝对定位的元素会脱离原来的常规流,位置停留在父元素的左上角。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 

< title >两个元素的绝对定位< / title > 

< style > 

*{ margin:0; padding:0; font-size:14px;} 

div .father { width:300px; height:340px; /*设置父级元素的高度和宽度都为300像素*/ border:1px solid #000;/*设置父级元素的边框为1像素黑色实线*/ margin:10px;/*设置父元素四周边距为10像素*/ position:relative/*设置父元素为相对定位*/ } 

div.one{ background-color:#ccc;/*设置第一个div标签的背景色为浅灰色*/ width:100px; height:100px;/*设置第一个div标签的高度和宽度为100像素*/ position:absolute;/*设置第一个div标签为绝对定位*/ } 

div.two{ background-color:#999999; /*设置第二个div标签的背景色为浅灰色*/ width:100px; height:100px;/*设置第二个div标签的高度和宽度都是100像素*/ position:absolute;}/*设置第二个div标签为绝对定位*/ 

< / style >

< body > 

< div class="father" >< /div > 

< div class="one" >< /div > 

< div class="two" >< /div > 

< /body > 

< /html >

相关专题
css控制样式
了解css技术基础之 用css控制样式

CSS有助于实现负责任的Web设计,CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

css设置背景
了解css技术基础之css设置背景

CSS提供了控制背景颜色和背景图片的多个属性,用于产生表现丰富的网页背景。这样能使单调的页面变得丰富多彩。

css设置图片的样式
了解css技术基础之css设置图片的样式

图片在网页设计中占据相当重要的位置。使用css样式可以设置图片的大小和边框等属性。恰当的使用css其他属性和配合页面排布也能创造出很精美的图片效果。


新闻中心

联系我们
CONTACT
01.png
电话

024-83959235

02.png
传真

024-83953630

03.png
微信公众号

05.png
地址

沈阳市和平区青年大街322号 昌鑫大厦F座14层