CSS基础学习十四:盒子模型补充之display属性设置
来源:互联网 发布:mac itunes 资料库 编辑:程序博客网 时间:2024/06/08 03:13
我在 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基础学习十四:盒子模型补充之display属性设置
- CSS基础学习十六:CSS盒子模型补充之border-radius属性
- CSS基础学习十五:盒子模型补充之外边距合并
- CSS基础之盒子模型
- CSS学习之:盒子模型
- CSS盒子模型要点补充
- css之盒子模型box-sizing属性
- CSS基础学习十三:盒子模型
- HTML+CSS基础课程之盒子模型
- css样式基础之盒子模型
- css基础,盒子模型
- css的字体设置,css的盒子模型,css的盒子模型的边框,盒子模型的内边距属性,盒子模型的外边距属性,
- CSS学习笔记之<盒子模型>
- css学习之盒子模型应用
- CSS之盒子模型
- CSS之盒子模型
- CSS之盒子模型
- css之盒子模型
- 11.20学习计划
- Android中的矩阵转换 (Matrix转换)
- win10安装mysql5.7 net start mysql拒绝访问 mysql配置文件修改不生效
- hdoj2012素数判定(素数打表)
- ios--uitextfield动态限制输入的字数
- CSS基础学习十四:盒子模型补充之display属性设置
- 安卓动态曲线的绘制
- uboot中挂载U盘,利用FAT文件系统读写U盘文件
- C语言开发总结(二)
- maven web报错:The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
- Tomcat内存设置详解
- 如何使用GitHub管理代码
- UIScrollView的delegate方法妙用之让UICollectionView滑动到某个你想要的位置
- 11.20学习计划