目录
-
display
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> span{ background-color: paleturquoise; color: palevioletred; /* 行内标签 设置宽高 */ width: 100px; height: 100px; /* 设置宽高 有效 但是不会独占一行 */ display: inline-block; /* 有溢出使用overflow */ overflow: hidden; } p{ background-color: plum; color: white; /* 块级标签设置宽高 */ width: 200px; height: 500px; /* 行内设计 */ display: inline; } img{ width: 300px; } </style> </head> <body> <!-- 行内标签 --> <span>岱宗夫如何?齐鲁青未了。</span> <b>造化钟神秀,阴阳割昏晓。</b> <p>荡胸生曾云,决眦入归鸟。</p> <p>会当凌绝顶,一览众山小。</p> <a href="http://www.baidu.com">百度一下</a> <img src="../img/2.png" /> </body> </html>
-
流式布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div:hover img{ /* 隐藏 标签的位置不会被保留 在流式布局中 如果对应的位置空出来了 下面的内容就会向上移动 */ display: none; } </style> </head> <body> <div> 悬浮隐藏图片 <br> <img src="../img/2.png" /> 诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。 </div> </body> </html>