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

原创 2015年11月20日 18:45:03

            我在 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属性暂时了解了这么多,如果有什么错误,会及时更正!!后续会学到更深层次的知识,

回头来在进行补充。

    




版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS3.0盒模型display:-webkit-box;的使用

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典 的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前bo...

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

盒模型(box model) 概述: margin(-TopRightBottomLeft), padding(-TRBL),border(TRBL+style|color|width), box...

【Cocso2d-x Lua笔记五】quick中的display

display负责与显示图像、场景有关的功能 display 模块封装了绝大部分与显示有关的功能,并负责根据 config.lua 中定义的分辨率设定计算屏幕的设计分辨率。 下面通过一个小例子来了解它...

深入理解盒子模型——CSS 盒模型Block box与Line box

在上一篇想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC比较宏观的了解了盒子模型的作用,接下来就详细的介绍两种盒子的具体细节。   Block Box   display :...

CSS Display属性与盒模型

因为HTML流式文档的特性,页面布局往往是新手最为头疼的问题之一。 每个HTML元素都会渲染为一个Box,可分为inline Box和block Box。 根据display属性的不同,Box的呈现方...
  • yangjvn
  • yangjvn
  • 2015年08月11日 16:11
  • 1177

css3中的display:-webkit-box的用法

css3中的display:-webkit-box的用法 webkit-box 1.之前要实现横列的web布局,通常就是float或者display:inline-block;但是都不能做到真正的...

CSS3盒模型display:box详解

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前bo...

CSS基础学习五:类选择器

一CSS类选择器概述        类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。 只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择...

HTML学习10:表单格式化

表单格式化,其实我也不想起这个名字的,在前面学习的HTML中有文本格式化,这次的表单和表格的结合不妨叫 做表单格式化。        这篇博客用到的HTML主要标签有:标签和标签以及两个标签中所包...

CSS基础学习十六:CSS盒子模型补充之border-radius属性

CSS盒子模型有很多的内容和属性,CSS也一直在更新和新增属性,今天我们来说说CSS3新增的盒子模型中的 边框中的内容,也就是border-radius属性。        border-radi...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS基础学习十四:盒子模型补充之display属性设置
举报原因:
原因补充:

(最多只允许输入30个字)