HTML的区块属性

区块属性(区块模型)
margin
是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素边界,每个值都是长度、百分比或auto,百分比值参考上一级元素的宽度,允许使用负值边际。如果四个值都给出了,它们分别被应用于上、右、下和左边界。如果只给出一个值,它被应用于所有的边界。如果两个或三个值给出了,省略的值与对应的边相等。注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值。而水平方向则不会。也可以选择使用上边界margin-top、下边界margin-bottom、左边界margin-left和右边界的margin-right属性分别设置与上级元素的外的边距。

padding
用于设置区块的内边距属性,是边框的元素内容之间的间隔距离。与margin属性相反,但使用的是相同属性值,是上补白padding-top、右补白padding-right、下补白padding-bottom和左补白padding-left属性的缩写

float
设置区快漂浮属性,允许网页制作者将文本环绕在一个元素的周围,可以使用左漂浮left值,右漂浮right值

clear
清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面;同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值,和移动元素到其两边的漂浮的元素的下面的both值

margin

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>区块属性</title>
 6 <style>
 7     body{
 8         background:green;
 9         margin:0px;
10         padding:50px;
11     }
12     #main{
13         width:100%;
14         height:400px;
15
16         background:yellow;
17         /*margin-top:50px;
18         margin-left:40px;
19         margin-bottom:80px;
20         margin-right:30px;*/
21         margin:50px 40px 60px 30px;
22     }
23 </style>
24 </head>
25
26 <body>
27     <div id="main">
28           aaaaaa
29     </div>
30 </body>
31 </html>

padding

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>区块属性</title>
 6 <style>
 7     body{
 8         background:green;
 9         margin:0px;
10         padding:100px 50px 40px 80px;
11     }
12     #main{
13         width:100%;
14         height:400px;
15
16         background:yellow;
17         /*margin-top:50px;
18         margin-left:40px;
19         margin-bottom:80px;
20         margin-right:30px;*/
21         margin:50px 40px 60px 30px;
22     }
23 </style>
24 </head>
25
26 <body>
27     <div id="main">
28           aaaaaa
29     </div>
30 </body>
31 </html>

float

区块框浮动
虽然使用绝对定位可以实现页面布局,但由于调整某个区块框时其他区块的位置并不会随着改变,所以并不是布局的首选方式。而使用浮动的区块框可以向左或右移动,直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框的边框为止。并且由于浮动框不在文档的普通流中,所以文档的普通流中的区块框表现的就像浮动框不存在一样

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>区块框浮动</title>
 6 <style>
 7     body{
 8         margin:0px;
 9     }
10     #one{
11         width:200px;
12         height:200px;
13         background:green;
14         float:left;
15     }
16     #two{
17         width:200px;
18         height:200px;
19         background:yellow;
20     }
21     #three{
22         width:200px;
23         height:200px;
24         background:red;
25     }
26 </style>
27 </head>
28
29 <body>
30     <div id="one">
31           aaaaaa
32     </div>
33     <div id="two">
34         bbbb
35     </div>
36     <div id="three">
37         ccccccccccccccccc
38     </div>
39 </body>
40 </html>

clear

在进行页面布局时,经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性,再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时,就会在行框中留出一定的宽度,而下面的某个区块框又恰好满足这个宽度,则很可能会向上提,和上一行并列的区块框在同一行排列。而这不并是我们想要的结果,所以可以使用clear属性解决这一问题,该属性值可以是left、right、both或none,它表示框的哪些边不应该挨着浮动框。

<!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=gb2312" />
<title>行框和清理</title>
<style>
    body{
        margin:0px;
    }
    #one{
        width:200px;
        height:200px;
        background:green;
        float:left;
    }
    #two{
        width:200px;
        height:200px;
        background:yellow;
        float:left;
    }
    #three{
        width:200px;
        height:200px;
        background:red;
        float:left;
    }
    .clear{
        clear:both;
    }
</style>
</head>

<body>
    <div id="one">
          aaaaaa
    </div>
    <div id="two">
        bbbb
    </div>
    <div class="clear"></div>
    <div id="three">
        ccccccccccccccccc
    </div>
</body>
</html>
时间: 2024-10-05 03:42:54

HTML的区块属性的相关文章

css常用样式属性详细介绍

对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级点的,这才是一个靠谱的渐进过程,下面列出一些css常用属性,仅供参考 “文字”属性共有8项: 1.“字体”(font-family),设定时,需考虑浏览器中有无该字体. 2.“大小”(font-size),注意度量单位. 3.“粗细”(font-weight),除了normal(正常).bold(粗

CSS语法 部分 区块

区块属性:(Block) 字间距{letter-spacing: normal;} 数值 对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进{text-indent: 数值px;} 垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; texttop; middle; bottom;text-bottom 词间距word-spacing: no

常用的CSS属性

CSS常用属性: 字体属性:(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height: normal;(正常) 单位:PX.PD.EM粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体 font-variant: small-

常用的CSS属性的英文单词总结及用法、解释

在div css制作中常用的CSS属性的英文单词介绍.解释与css样式用法总结.这些单词无需一定要记住会拼写,但是要求看见他们就能认识他们并知道他们的属性及用法,这里有个记住他们属性的技巧就是多制作和手写div+css推荐用Dreamweaver(DW)因为此工具在写CSS和html的代码时候会自动弹出用到的CSS代码,多用多看就能记住他们的用法及属性.(如果您的记忆力好能记住也好不影响) 一.(盒子)布局排版类   -   TOP float浮动:设置块元素的浮动效果.可选常用到参数left.

常见CSS属性

字体属性:(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常) 行高 line-height: normal;(正常) 单位:PX.PD.EM 粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常) 变体 font-variant: small-caps

css样式大全

字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX.PD.EM 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体 {font-variant: s

PHP.4-DIV+CSS标准网页布局准备工作(下)

DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百分比值参考上级元素的宽度,允许使用负值边际.如果四个值都给出了,它们分别被应用于上.右.下和左边界.如果只给出一个值,它被应用于所有边界.如果两个或三个值给出了,省略了的值与对边相等.注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值.而水平方向则不会.也可以选择使用上边界margin

样式表笔记

叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言.相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排 版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设 计语言.CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的

css 样式表集合

说到前端不得不说一下css样式 css样式是用来装饰我们的html让整个页面显得更丰富多彩,所以我们要熟悉各种css样式,本人搜集了一下 供大家参考一下 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX.P