来谈谈：HTML和CSS的关头:盒子模子(Box model)

只看该作者 · 发表于 2015-1-16 00:10:46

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
原文：http://jorux.com/archives/property-4-if-you-love-CSS/
本文作为属性篇的最初一篇文章,将报告HTML和CSS的关头—盒子模子(Boxmodel).了解Boxmodel的关头即是margin和padding属性,而准确了解这两个属性也是进修用css结构的关头.
注:为何不翻译margin和padding?缘故原由一,在汉语中并没有与之绝对应的词语;缘故原由二:即便有如许的词语,因为在编写css代码时,必需利用margin和padding,假如我们总用汉语词语取代其来注释的话,到了实践使用时简单搅浑margin和padding的观点.
假如有一点Html基本的话,就应当懂得一些基础元素(Element),如p,h1~h6,br,div,li,ul,img等.假如将这些元素细分,又能够分离回为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.

Block-levelelement:指可以自力存在,一样平常的块级元素之间以换行(如一个段落停止后另起一行)分开.经常使用的块级元素包含:p,h1~h6,div,ul等;
Inlineelement:指依靠其他块级元素存在,紧接于被联元素之间显现,而不换行.经常使用的内联元素包含:img,span,li,br等;
Top-levelelement:包含html,body,frameset,体现如Block-levelelement,属于初级块级元素.

块级元素是组成一个html的次要和关头元素,而恣意一个块级元素都可以用Boxmodel来注释申明.
BoxModel:恣意一个块级元素均由content(内容),padding,background(包含背景色彩和图片),border(边框),margin五个部分构成.平面图以下(Fig.1):

登录/注册后可看大图

该平面图引自:http://www.hicksdesign.co.uk/(UndertheCreativeCommonsLicense)
立体图以下(Fig.2):

登录/注册后可看大图

依据以上两图,信任人人关于Boxmodel会有个直不雅的熟悉.

以下申明margin和padding属性:
1.Margin:包含margin-top,margin-right,margin-bottom,margin-left,把持块级元素之间的间隔,它们是通明不成见的,关于Fig.2所示的上右下左margin值均为40px,因而代码为:
margin-top:40px;
margin-right:40px;
margin-bottom:40px;
margin-left:40px;
依据上,右,下,左的顺时针划定规矩,简写为
margin:40px40px40px40px;
为便于影象,请参考下图:

登录/注册后可看大图

当高低,摆布margin值分离分歧,可简写为:

margin:40px40px;

前一个40px代表高低margin值,后一个40px代表摆布margin值.

当高低摆布margin值均分歧,可简写为:

margin:40px;

2.Padding:包含padding-top,padding-right,padding-bottom,padding-left,把持块级元素外部,content与border之间的间隔,其代码,简写请参考margin属性的写法.

至此,我们已基础懂得margin和padding属性的基础用法.可是,在实践使用中,却老是产生一些让你揣摩不透的事,而它们又或多或少的与margin有关.

注:当你想让两个元素的content在垂直偏向(vertically)分开时,既能够选择padding-top/bottom,也能够选择margin-top/bottom,再此Jorux倡议你只管利用padding-top/bottom来到达你的目标,这是由于css中存在Collapsingmargins(折叠的margins)的征象.

Collapsingmargins:margins折叠征象只存在于邻近或有附属干系的元素,垂直偏向的margin中.笔墨申明大概让人隐晦,上面用一个例子申明margin-collapsing征象.

例:在html文件的<body></body>之间写进以下代码:

<divid=”ID1″>
<h1id=”ID2″>MarginsofID1andID2collapsevertically.<br/>元素ID1与ID2的margins在垂直偏向折叠.</h1>
</div>

在与其外联的css文件中写进:

*{
padding:0;
margin:0;
}
#ID1{
background-color:#333;
color:#FFF;
margin-top:10px;
margin-bottom:10px;
}
#ID2{
font:normal14px/1.5Verdana,sans-serif;
margin-top:30px;
margin-bottom:30px;
border:1pxsolid#F00;
}

代码注释:

在html写进的代码暗示,在html中拔出id分离为ID1和ID2的两个块级元素div,h1;
*{padding:0;margin:0;}:使扫瞄器默许的元素padding和margin值均回零;
#ID1{…}:使id为ID1的元素div的背景色彩为#333,字体色彩为#FFF,margin-top/bottom为10px;
#ID2{…}:使id为ID2的元素h1的字体巨细为14px,verdana字体,行高为字体高的150%,一般粗细.margin-top/bottom为30px,边框为1px宽,白色实线.

根据以上注释,我们应当失掉以下效果(Fig.3):

登录/注册后可看大图

即ID1的margin-top/bottom=ab=ef=10px;

ID2的margin-top/bottom=bc=de=30px;

但用扫瞄器翻开html文件,却失掉Example4的效果,以下图(Fig.4):

登录/注册后可看大图

即ab=cd=30px,ID1的margin-top/bottom=10px被折叠了,并且ID1应有的margin玄色背景也一同被折叠消散了.

为何会折叠:形成以上征象的缘故原由是,我们在css中并没有声明id为ID1的元素div的height(高),因而它的高便被设为auto(主动)了.一旦其值被设为auto,那末扫瞄器就会以为它的高为子元素ID2的border-top到border-bottom之间的间隔,即Fig.4中bc的长度,以是子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1以外,呈现了Fig.4中ab与cd之间的空缺地区.因而父元素ID1的margin-top/bottom因子元素的”不安于室”而被折叠消散了.

怎样办理折叠成绩:大概人人最后想到的举措就是依据折叠产生的缘故原由—auto,来办理成绩.可是,在实践操纵中,某些元素如div,h1,p等,我们是不成能事后晓得它的高是几的,因而在css文件中是不克不及惯例经由过程声明元素的高来办理折叠成绩.

我们必要在css文件中到场以下代码(白色部分):

#ID1{
background-color:#333;
color:#FFF;
margin-top:10px;
margin-bottom:10px;
padding-top:1px;
padding-bottom:1px;
}

或是：

#ID1{
background-color:#333;
color:#FFF;
margin-top:10px;
margin-bottom:10px;
border-top:1pxsolid#333;
border-bottom:1pxsolid#333;
}

经由过程增添以上代码,即可使扫瞄重视新盘算ID1的高,使其为子元素ID2的margin-top/bottom外缘(outertop/bottom)之间的间隔,即Fig.3中be的间隔.

看得是否是有点含混,折叠成绩难度对照年夜,它也曾是困扰我多时的困难,加上自己的叙说申明才能不敷,加倍年夜了人人进修的难度,在此Jorux深表歉意.

为查验人人进修折叠成绩的效果,给读者留下一个成绩:

html文件代码为(请将css地点改成你的css文件寄存地点):

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>Myfirsthomepage</title>
<linkrel=”stylesheet”href=”….css”type=”text/css”media=”screen”/>
</head>
<body>
<h1id=”title”>
Atitle</h1>
<divid=”content”>
Sometexthere</div>
</body>
</html>
外联css文件代码为:
*{
padding:0;
margin:0;
}
body{
font:14px/1.5Georgia,serif;
}
h1#title{
float:right;
width:50%;
font:14px/1.5Georgia,serif;
margin-top:0;
background-color:#F00;
color:#fff;
}
div#content{
background-color:#333;
color:#FFF;
margin-top:30px;
border:1pxsolid#333;
}
请将此代码存为css文件,并与以上html文件联系关系,失掉如Example5的效果,请分离用IE与Firefox扫瞄,效果不尽不异,IE下的效果是我们想要的,但用Firefox扫瞄却发明元素h1嵌进到元素div中,你能办理这个Firefox不克不及一般显现的成绩吗?假如能够,能和方才学过的折叠征象接洽起来吗?请在留言给出你的谜底!(Jorux的注释会在留言中或是下篇文章中给出)[END]
注:该成绩有必定难度,请读者实事求是!
至此,《Ifyoulovecss…》的属性篇全体停止,下篇将进进《结构篇》.

目前我们的站就是div+css做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.

只看该作者 · 发表于 2015-1-18 05:31:15

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-1-25 15:42:54

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-2-3 05:51:19

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

只看该作者 · 发表于 2015-2-8 20:27:38

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-2-26 06:09:20

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-3-16 02:15:49

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-3-22 19:09:36

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-3-22 19:09:39

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来谈谈：HTML和CSS的关头:盒子模子(Box model)

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

浏览过的版块