CSS的盒子模型必知的CSS知识点Word下载.docx
《CSS的盒子模型必知的CSS知识点Word下载.docx》由会员分享,可在线阅读,更多相关《CSS的盒子模型必知的CSS知识点Word下载.docx(13页珍藏版)》请在冰点文库上搜索。
![CSS的盒子模型必知的CSS知识点Word下载.docx](https://file1.bingdoc.com/fileroot1/2023-5/8/9e2a49d2-8010-444b-8392-69370444dec6/9e2a49d2-8010-444b-8392-69370444dec61.gif)
实现结构与表现分离
在真正开始布局实践之前,再来认识一件事——结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更新才方便,这不正是我们学习CSS的目的所在吗?
举个例来说P是结构化标签,有P标签的地方表示这是一个段落区块,margin是表现属性,我要让一个段落右缩进2字高,有些人会想到加空格,然后不断地加空格,但现在可以给P标签指定一个CSS样式:
P{text-indent:
2em;
},这样结果body内容部分就如下,这没有外加任何表现控制的标签:
<
p>
加进天涯社区有一段时间了,但一直没有时间写点东西,今天写了一篇有关CSS布局的文章,并力求通过一种通俗的语言来说明知识点,还配以实例和图片,相信对初学CSS布局的人会带来一定的帮助。
如果还要对这个段落加上字体、字号、背景、行距等修饰,直接把对应的CSS加进P样式里就行了,不用像这样来写了:
fontcolor="
#FF0000"
face="
宋体"
>
段落内容<
/font>
/p>
这个是结构和表现混合一起写的,如果很多段落有统一结构和表现的话,再这样累加写下去代码就繁冗了。
再直接列一段代码加深理解结构和表现相分离:
用CSS排版
以下是引用片段:
styletype="
text/css"
!
--
#photoListimg{
height:
80;
width:
100;
margin:
5pxauto;
}
-->
/style>
divid="
photoList"
imgsrc="
01.jpg"
/>
02.jpg"
03.jpg"
04.jpg"
05.jpg"
/div>
不用CSS排版
width="
100"
height="
80"
align="
middle"
05。
jpg"
第一种方法是结构表现相分离,内容部分代码简单吧,如果还有更多的图片列表的话,那么第一种CSS布局方法就更有优势,我打个比喻你好理解:
我在BODY向你介绍一个人,我只对你说他是一个人,至于他是一个什么样的人,有多高,是男是女,你去CSS那里查下就知道。
这样我在BODY的工作就简单了,也就是说BODY的代码就简单了。
如果BODY有一个团队人在那里,我在CSS记录一项就行了,这有点像Flash软件里的元件和实例的概念,不同的实例共享同一个元件,这样动画文件就不大了,把这种想法移到CSS网页设计中,就是代码不复杂,网页文件体积小能较快被客户端下载了。
演示地址:
像上面我做的那个版面,一共分为四个区块,每个区块的框架是一样的,这个框架就是用CSS写出来的,样式写一次,就可以被无数次调用了(用class调用,而不是ID),只要改变其中的文字内容就可以生成风格统一的众多板块了,它的样式和结构代码是(请不要直接复制生成网页,把下面代码分别粘贴到网页中它们应在的位置):
*{margin:
0px;
padding:
}
body{
font-size:
12px;
margin:
0pxauto;
height:
auto;
width:
805px;
.mainBox{
border:
1pxdashed#0099CC;
3px;
padding:
0px;
float:
left;
300px;
192px;
.mainBoxh5{
20px;
179px;
color:
#FFFFFF;
6px3px3px10px;
background-color:
#0099CC;
16px;
.mainBoxp{
line-height:
1.5em;
text-indent:
35px5px5px5px;
divclass="
mainBox"
h5>
前言<
/h5>
正文内容<
CSS盒子模式<
正文内容<
转变思想<
熟悉步骤<
熟悉工作流程
在真正开始工作之前我们脑海中要形成这样一种思想:
表格是什么我不知道,在内容部分我不能让它再出现表现控制标签,如:
font、color、height、width、align等标签不能再出现,(简单说工作前先洗脑,忘掉以前的一惯做法,去接受和使用全新的方法),我不是单纯的用DIV来实现排版的嵌套,DIV是块级元素,而像P也是块级元素,例如要分出几个文字内容块,不是一定要用DIV才叫DIV排版,不是“<
div>
文字块一<
文字块二<
文字块三<
”,而用“<
”更合适。
用DIV+CSS设计思路是这样的:
1.用div来定义语义结构;
2.然后用CSS来美化网页,如加入背景、线条边框、对齐属性等;
3.最后在这个CSS定义的盒子内加上内容,如文字、图片等(没有表现属性的标签),下面大家跟我一起来做一个实例加深对这个步骤的理解。
先看结果图:
演示地址:
1.用div来定义语义结构
现在我要给大家演示的是一个典型的版面分栏结构,即页头、导航栏、内容、版权(如下图),典型版面分栏结构其结构代码如下:
div
id="
header"
nav"
content"
footer"
上面我们定义了四个盒子,按照我们想要的结果是,我们要让这些盒子等宽,并从下到下整齐排列,然后在整个页面中居中对齐,为了方便控制,我们再把这四个盒子装进一个更大的盒子,这个盒子就是BODY,这样代码就变成:
body>
/body>
最外边的大盒子(装着小盒子的大盒子)我们要让它在页面居中,并重定义其宽度为760像素,同时加上边框,那么它的样式是:
body
{
font-family:
Arial,
Helvetica,
sans-serif;
12px;
0px
auto;
760px;
1px
solid
#006633;
}
页头为了简单起见,我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙,目的是让页头的图像不要和下面要做的导航栏连在一起,这样也是为了美观。
其样式代码为:
#header
100px;
background-image:
url(headPic.gif);
background-repeat:
no-repeat;
3px
导航栏我做成像一个个小按钮,鼠标移上去会改变按钮背景色和字体色,那么这些小小的按钮我们又可以理解为小盒子,如此一来这是一个盒子嵌套问题了,样式代码如下:
#nav
25px;
14px;
list-style-type:
none;
li
left;
a{
#000000;
text-decoration:
padding-top:
4px;
display:
block;
97px;
22px;
text-align:
center;
#009966;
margin-left:
2px;
a:
hover{
#FFFFFF;
内容部分主要放入文章内容,有标题和段落,标题加粗,为了规范化,我用H标签,段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离,这里用填充。
内容区块样式代码为:
#content
740px;
1.5em;
10px;
p
2em;
h5
16px;
版权栏,给它加个背景,与页头相映,里面文字要自动居中对齐,有多行内容时,行间距合适,这里的链接样式也可以单独指定,我这里就不做了。
其样式代码如下:
#footer
50px;
最后回到样式开头大家会看到这样的样式代码:
*
这是用了通配符初始化各标签边界和填充,(因为有部分标签默认会有一定的边界,如Form标签)那么接下来就不用对每个标签再加以这样的控制,这可以在一定程度上简化代码。
最终完成全部样式代码是这样的:
style
type="
结构代码是这样的:
ul
li>
a
href="
#"
首
页<
/a>
/li>
文
章<
相册<
Blog<
论
坛<
帮助<
/ul>
第一段内容<
理解CSS盒子模式<
第二段内容<
关于华升
|
广告服务
华升招聘
客服中心
Q
Q留言
网站管理
会员登录
购物车<
Copyright
©
2006
-
2008
Tang
Guohui.
All
Rights
Reserved<
好了,此文到此结束,更多内容,如:
CSS中的盒子宽度计算,浏览器兼容问题,XHTML规范化写法等请大家去参考其它资料。