03_02.块元素与内联元素

来源：互联网发布：企业数据安全管理编辑：程序博客网时间：2024/05/20 06:41
<!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" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">/*块元素*/body,h1,h6,p,dl,dd{margin: 0;}h1{width: 100px;height: 100px;background: red;}p{width: 100px;height: 100px;background: blue;}ul,ol{margin: 0;padding: 0;}ul{width: 100px;height: 100px;background: red;}ol{width: 100px;height: 100px;background: blue;}dl{width: 100px;height: 100px;background: yellow;}/*内联元素*/span{width: 50px;height: 50px;background: green;/*margin: 100px;padding: 0px;*/}/*相互转换*/div{width: 100px;height: 100px;background: red;display: inline;}span.s1,span.s2{width: 100px;height: 100px;background: blue;display: block;}</style></head><body>1.块元素<br />块元素性质：1.独占一行显示2.宽度默认值为：整行。且支持宽高3.支持margin、padding4.块元素之间无间隙<h1>标题</h1><p>段落</p><ul><li>ul列表项1</li><li>ul列表项2</li></ul><ol><li>ol列表项1</li><li>ol列表项2</li></ol><dl><dt><dd>dl列表项1</dd><dd>dl列表项2</dd></dt></dl>2.内联元素<br />内联元素：1.内联元素间同行显示2.宽度默认值为：其中内容的宽度。且不支持宽高3.不支持上下margin、padding4.内联元素之间有间隙（换行被解析）<hr /><span>span元素1</span><span>span元素2</span><span>span元素3</span><hr />3.相互转换:display属性<br /><div>div1</div><div>div2</div><span class="s1">span1</span><span class="s2">span2</span></body></html>
0 0