<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ /*display: block;*/ display: inline-block; width: 150px; height: 30px; background: yellowgreen; } div{ /*display: inline;*/ display: inline-block; /*width: 300px;*/ /*height: 30px;*/ background: antiquewhite; } p{ width: 200px; height: 150px; background: aqua; display: none; } </style> </head> <body> <div>同学们 晚上好</div> <div>同学们 晚上好</div> <div>同学们 晚上好</div> <div></div> <span>同学们 晚上好 123</span> <span>同学们 晚上好</span> <span>同学们 晚上好</span> <p> <span>ahhh</span> </p> <!-- 块级元素div display:block; 可以包含任何块和行内元素 独占一行,支持设置宽高 如果没有设置宽高,高度由内容撑开,宽度默认浏览器宽度 没有内容,在网页上肉眼看不到东西,但是审查元素,宽度是浏览器宽度,高度0 行内(内联)元素span display:inline; 可以和其他行内元素位于同一行 行内元素不要包块级元素 不支持设置宽高 内容撑开宽高 行内块元素 display:inline-block; 块级元素可以横排展示 行内元素可以设置宽高 元素既能设置宽高 也能排在一排 display:none 隐藏元素,包括他的子标签,在页面中不占位置,等同于消失了 --> </body>
html-div+span-4
猜你喜欢
转载自www.cnblogs.com/cxhzy/p/10058384.html
今日推荐
周排行