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

回头来在进行补充。

    




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

相关文章推荐

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

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

DIV+CSS两种盒子模型(W3C盒子与IE盒子)

在辨析两种盒子模型之前,先简单说明一下什么叫盒子模型。 原理: 先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), C...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

CSS3盒模型display:box详解

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

display:table、box和width百分比来均分盒子的比较

如何均分父元素 box学习 当父元素设置为display:box后,子盒子不能通过margin:0 auto来实现水平居中,需要通过设置box-pack和box-align来实现居中。此时,内部块...

计算盒子模型的尺寸、display属性、块级和内联元素、浮动、overfloat

计算盒子模型的尺寸  盒子实际高度=上下外边距+上下边框+上下内边距+内容高度  盒子实际宽度=左右外边距+左右边框+左右内边距+内容宽度 box-sizing属性  content-box   ...

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

CSS盒子模型有很多的内容和属性,CSS也一直在更新和新增属性,今天我们来说说CSS3新增的盒子模型中的 边框中的内容,也就是border-radius属性。        border-radi...

CSS基础学习十五:盒子模型补充之外边距合并

今天继续接着CSS盒子模型补充,CSS基础学习十三:盒子模型和CSS基础学习十四:盒子模型补充之display属 性设置都是介绍了盒子模型中的内容概括。开始今天的主题:外边距合并。        ...

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

1.设置浮动属性后,会对相邻的元素产生影响,相邻元素特指仅邻后面的元素。 2.受到影响的元素清除flow影响的方法:clear:both;只适用于紧邻后面的元素的清楚浮动,而当父包含块缩成一条时就不...

HTML基础学习-19- div css容器 盒子模型学习2

HTML基础学习-19- div css容器 盒子模型学习2 <!-- position 定位方式 div定位方式 relative 正常定位 ...

HTML基础学习-20- div css容器 盒子模型学习3

HTML基础学习-20- div css容器 盒子模型学习2 <!-- float 浮动属性未设置浮动和 设置浮动元素紧邻的时候,未设置浮动会受到影响,应该将其设为clear清除浮动 clear ...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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