1.块元素block特点

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;padding: 0;}div{height: 100px;background: red;margin: 50px;padding: 30px;}</style></head><body><!--块元素的特征1、默认独占一行2、没有给宽度的时候，宽度是auto，撑满一行(宽度就是父级的宽度)3、支持所有的css命令--><div>div</div></body>
</html>

2.行内元素inline特点

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;padding: 0;}span{background: pink;width: 200px;height: 200px;/*margin: 50px;*/padding: 50px;}div{background: green;}</style></head><body><!--行内元素的特征1、内容撑开宽高宽高的值都是auto，只不过显出来的宽高是由内容撑开的2、不支持设置宽高3、不支持上下的margin与上下padding(左右支持)上下的padding是有问题，虽然把背影撑出来了，这个只是表面现象，它不会对其它的元素有影响4、所有的行内元素都会在一行显示5、代码换行会被解析成一个空格--><span>铁道学院</span><strong>kaivon</strong><div>div</div></body>
</html>

3.行内块元素inline-block特点

注意：它不属于标签分类中的一类。

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>span{width: 100px;height: 100px;background: red;display: inline-block;}div{width: 100px;height: 100px;background: green;display: inline-block;}</style></head><body><!--display:inline-block;           行内块元素特征：1、行内元素支持宽高2、块元素可以在行中显示3、不给宽高的话，宽度会由内容撑开4、代码换行会被解析成一个空格5、IE6、7不支持块元素的inline-blockIE6、7不认识inline-block，给行内元素加上这个属性后会触发IE的haslayout特点，会让行内元素具有与inline-block一样的特征，所以它不支持块元素的inline-block--><span>kaivon</span><div>kaivon</div></body>
</html>

4.块元素和行内元素有哪些？

行内元素：

a,span,strong,em,mark,img,time

块元素：

div ,h1~h6,p,列表标签（ul,ol,li,dd,dt),header,nav,footer,section,article,aside

5.标签类型转换

通过设置display的取值来改变标签的类型：

display的值：

1）none：隐藏标签2）block：块元素3）inline：行内元素4）inline-block：行内块元素

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 100px;background: green;color: #fff;display: inline;}span{background: red;width: 100px;height: 100px;display: block;}</style></head><body><!--块元素转行内元素            display:inline转换后块元素就具有了行内元素的特征（只是显示为行内元素，本身还是块元素）行内元素转块元素            display:block转换后行内元素就具有了块元素的特征（只是显示为块元素，本身还是行内元素）--><div>div1</div><div>div2</div><span>span1</span><span>span2</span></body>
</html>

一天搞定HTML----标签类型与类型转换05相关推荐

一天搞定HTML----a标签02
1.细说a标签 2.代码演示 <!DOCTYPE html> <html><head><meta charset="UTF-8">& ...
HTML自学教程--一天搞定HTML（总结）
HTML本身很简单,只是用法比较灵活.HTML只是一些基础的标签,关键是根据需求选择正确的标签,实现语义化以及合理的布局. 1.标签篇汇总一天搞定HTML:常用标签01 http://blog.cs ...
13天搞定java_[Java基础] 魔乐科技教你13天搞定JAVA系列高端教程视频教程教学视频...
资源介绍课程目录: <魔乐科技教你13天搞定JAVA>第八天-01异常的捕获及处理.rar 58.04 MB < ...
成功解决numpy.ndarray格式类型转数据为list格式数据带有中括号(一行代码搞定！)
成功解决numpy.ndarray格式类型转数据为list格式数据带有中括号(一行代码搞定!) 目录解决问题解决思路解决方法解决问题 numpy.ndarray格式类型转数据为list格式数据 ...
iframe标签中写html,html页面中嵌套iframe标签，我们可以用html中的iframe标签搞定
iframe嵌入网页的用法 iframe并不是很常用的,在标准的网页中非常少用.但是有朋友经常问到,下面我简单地介绍一下它的用法,你只要熟练掌握这些参数足矣. 也应该是框架的一种形式,它与不 ...
如何使用graphpad做柱形图_用Graphpad Prism轻松搞定不同类型的柱形图
原标题:用Graphpad Prism轻松搞定不同类型的柱形图作者:解螺旋.子非鱼解螺旋原创转载请注明来源:解螺旋,医生科研助手上一次小鱼介绍的两分钟搞定Graphpad Prism的速学法, ...
一天搞定HTML----常用标签01
1.常用标签说明 2.其他类标签演示代码: <!DOCTYPE html> <html><head><meta charset="utf-8&qu ...
python查看微信撤回消息_想查看微信好友撤回的消息？Python帮你搞定
要说微信最让人恶心的发明,消息撤回绝对能上榜. 比如你现在正和女朋友用微信聊着天,或者跟自己喜欢的女孩子聊着天,一个不留神,你没注意到对方发的消息就被她及时撤回了,这时你很好奇,好奇她到底发了什么?于 ...
机器学习建模神器PyCaret已开源！提升效率，几行代码轻松搞定模型
Datawhale干货编译:张峰,Datawhale成员寄语:PyCaret,是一款 Python中的开源低代码(low-code)机器学习库,支持在「低代码」环境中训练和部署有监督以及无监督的机 ...

一天搞定HTML----标签类型与类型转换05

1.块元素block特点

2.行内元素inline特点

3.行内块元素inline-block特点

4.块元素和行内元素有哪些？

5.标签类型转换

一天搞定HTML----标签类型与类型转换05相关推荐

最新文章

热门文章