内联与块状的转换

xiaoxiao2021-02-27 137

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内联与块状的转换</title> <style type="text/css"> div{ width: 100px; height: 100px; background: pink; } span{ background: orange; } </style> </head> <body> <div>块状</div> <span>内联</span> </body> </html>

效果：

块状转内联：display inline; 宽高不再发挥作用内联转块状：display block; 可以设置宽高

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内联与块状的转换</title> <style type="text/css"> div{ width: 100px; height: 100px; background: pink; display: inline; } span{ width: 100px; height: 100px; background: orange; display: block; } </style> </head> <body> <div>块状</div> <span>内联</span> </body> </html>

效果：

若增加 display noun; 则不会显示内联或块状

display属性

转载请注明原文地址: https://www.6miu.com/read-13331.html

技术

最新回复(0)