关闭

CSS基础学习十四:盒子模型补充之display属性设置

标签: dreamweavercssweb前端开发盒子模型display属性
3183人阅读 评论(1) 收藏 举报
分类:

            我在 CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示。这篇博

来做一些盒子模型知识的补充。这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素

框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局。所以一定要掌握好盒子模型,记住

content,border,padding和margin各自在盒子中的作用和使用方式。

       先来看一个完整元素的盒子模型实例:

<span style="font-size:18px;"><!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>CSS盒子模型演示</title>
<style type="text/css">
/*去掉浏览器缺省设置*/
body {
padding:0px;
margin:0px;
}
/*设置盒子的宽度和高度以及边框*/
div {
border:#FF0000 solid 2px;
width:300px;
height:200px;
}
#div_1 {
background-color:#00FF00;
padding:20px 50px;
}
#div_2 {
background-color:#0000FF;
margin:20px;
}
#div_3 {
background-color:#FF00FF;
}
</style>
</head>

<body>

<div id="div_1">第一个盒子</div>
<div id="div_2">第二个盒子</div>
<div id="div_3">第三个盒子</div>

</body>
</html></span>
        运行的结果为:


        我们会好奇哪些元素可以作为盒子模型?其实任何一个HTML标签都可以盒子!但是盒子的类型是有区别的,我

们重点讨论这个问题,这就涉及到了display属性。

       display属性:

       设置元素的盒模型的类型,也就是行内元素和块级元素的类型。

       经常可用的值:

       none 不显示,隐藏

       inline 内联元素(行内元素)

       block 块级元素

       inline-block 行内块级元素

       我们先来回忆哪些是块级元素,行内元素

       HTML标签分为两大类:

       1块级标签(元素):一个完整的区块,区域。标签结束后都有换行。常用标签有:div p dl table ol ul title等。

       2行内标签(元素):用于块级元素内,不能表示一个完整的区块,一个区块或者只是一行内的某一部分。标签结

束后没有换行。常用标签有:font span img input select a等。

       下面我们举例子来说明怎么使用display属性:

        实例一:给div元素和span元素设置相同的宽度和高度:

<span style="font-size:18px;"><!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>CSS盒模型演示</title>
<style type="text/css">
div {
width:300px;
height:200px;
background-color:#0000FF;
}
span {
width:300px;
height:200px;
background-color:#FFFF00;
}
</style>
</head>

<body>
     <div>div区域</div>
     <hr/>
     <span>span区域</span>
</body>
</html></span>
       运行的结果为:


       看上述的结果一目了然,div区域显示宽度和高度,与文本内容的多少无关;而span区域不显示设置宽度和高度,

文本内容有多少它就有多少的宽度和高度,这就说明了div元素和span元素的盒子类型不一样。

       实例二:再增加一个span元素,设置同样的高度和宽度,再把它的display属性设置为:block

<span style="font-size:18px;"><!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>CSS盒模型演示</title>
<style type="text/css">
div {
width:300px;
height:200px;
background-color:#0000FF;
}
span {
width:300px;
height:200px;
background-color:#FFFF00;
}
#span_2 {
width:300px;
height:200px;
background-color:#FFFF00;
display:block;/*把span设置成块级元素*/
}
</style>
</head>

<body>
     <div>div区域</div>
     <hr/>
     <span id="span_1">span区域1</span>
     <hr/>
     <span id="span_2">span区域2</span>
</body>
</html></span>

       运行的结果为:


       这一次我们看到了不一样的两个span元素,因为第二个span元素它通过display属性设置为了块级元素,所以高度

和宽度都显示了出来。

      实例三:区别行内块级元素和块级元素

<span style="font-size:18px;"><!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>CSS盒模型演示</title>
<style type="text/css">
div {
width:300px;
height:200px;
background-color:#0000FF;
}
span {
width:300px;
height:200px;
background-color:#FFFF00;
}
#span_2 {
width:300px;
height:200px;
background-color:#FFFF00;
display:block;/*把span设置成块级元素*/
}
#span_3 {
width:300px;
height:200px;
background-color:#FFFF00;
display:inline-block;/*把span设置成行内块级元素*/
}
</style>
</head>

<body>
     <div>div区域</div>
	 <hr/>
	 <span id="span_1">span区域1</span>
	 <hr/>
	 <span id="span_2">span区域2</span>
	 <a>欢迎来到攻城课堂</a>
	  <hr/>
	 <span id="span_3">span区域3</span>
	 <a>欢迎来到攻城课堂</a>
</body>
</html></span>
       运行的结果为:


       行内块级元素还是处于一行,它的右侧还可以其他的元素;但是块级元素就不可以,第二个元素必须换行才能显

示,这就是它们最直接的区别。

       对于盒子模型的display属性暂时了解了这么多,如果有什么错误,会及时更正!!后续会学到更深层次的知识,

回头来在进行补充。

    




1
0
查看评论

css display的用法及原理

最近刚刚开始上手写一点静态网页,看到一些源码中的display属性用的蛮多的,但是我也不太理解原理,只是能看懂,要想用的溜,感觉还是得细究一下,所以有了这篇文章。主要来看一下用的比较多的none,block,inline,inline-block。
  • qq_20404903
  • qq_20404903
  • 2015-10-10 00:06
  • 2383

CCS3盒模型与盒模型属性box-sizing

这两天写的都是小知识点 因为确实有点忙 虽然很简单,但是本着全面总结的原则,还是要说一下 今天我来说一下这个CSS中的盒模型 以及CSS3中可以改变盒模型的属性盒模型盒模型是计算元素尺寸的模型规则 在我们CSS中盒模型分为两种W3C标准盒模型正常情况下我们用的都是这个标准的盒模型 标准盒...
  • q1056843325
  • q1056843325
  • 2016-11-21 22:42
  • 1064

js盒子模型常用属性

1.js盒子模型 指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值 例: #box有很多自己的私有属性: HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prot...
  • sushans
  • sushans
  • 2016-06-17 10:06
  • 3403

回顾盒子模型之box-size属性

盒子模型是 CSS 中很重要的概念,它涉及到的无非就是内容(content)、填充(padding)、边框(border)、边界(margin)。但是其实很多人不知道的是,盒子模型其实有两种类型:标准盒模型和IE盒模型。
  • u014326381
  • u014326381
  • 2017-03-12 21:06
  • 1103

CSS3盒模型display:box详解

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的...
  • huang100qi
  • huang100qi
  • 2015-03-16 13:26
  • 4090

CSS--两种盒子模型以及border属性

盒模型(box model) 概述: margin(-TopRightBottomLeft), padding(-TRBL),border(TRBL+style|color|width), box-sizing width, height, display, visibility 设置背景色或背...
  • cat_foursi
  • cat_foursi
  • 2017-05-04 22:05
  • 1935

CSS盒子模型各属性层级及基础知识

1.设置浮动属性后,会对相邻的元素产生影响,相邻元素特指仅邻后面的元素。 2.受到影响的元素清除flow影响的方法:clear:both;只适用于紧邻后面的元素的清楚浮动,而当父包含块缩成一条时就不起作用了。 或者同时设置width:100%;+overflow:hidden;例p受到影响,p{...
  • DevilLittle
  • DevilLittle
  • 2016-06-01 00:07
  • 3417

神奇的CSS盒子模型

CSS盒子模型:就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。这两种盒子模型都包含有内容(content)、填充(padding)、边框(border)、边界(margin)这四个组成部分,这四个部分都包含有top/right/bottom/left四个...
  • Eavan_Zhou
  • Eavan_Zhou
  • 2016-08-23 11:23
  • 3371

初学HTML5--盒子模型

网页上每一个标签都是一个盒子 每个盒子有四个属性: 1.内容(content)--网页中通常指文字和图片 2.填充(padding,内边距)盒子与内容之间的空隙,形象点说就像盒子内的填充物泡沫或              ...
  • Summer_shining
  • Summer_shining
  • 2016-08-09 23:01
  • 4768

css-盒模型及相关属性

一、 盒模型的概念和组成 盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。 css定义所有的元素都可以拥有像盒子一样的外形和平面空间,即都包含:  外边距、边框、内边距、内容区,这就是盒模型。 margin  border  paddin...
  • qq_37345706
  • qq_37345706
  • 2017-01-22 10:43
  • 415
    个人资料
    • 访问:1207694次
    • 积分:18086
    • 等级:
    • 排名:第622名
    • 原创:468篇
    • 转载:107篇
    • 译文:0篇
    • 评论:574条
    博客专栏
    新浪微博
    最新评论