インライン要素とブロックレベル要素を相互に変換する方法_html/css

インライン要素とブロックレベル要素を相互に変換する方法_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:40:05

オリジナル

1794 人が閲覧しました

インライン要素とブロックレベル要素を相互に変換する方法:

インライン要素とブロックレベル要素を相互に変換することができます変換方法を簡単に紹介します。

1. インライン要素をブロックレベル要素に変換します:

インライン要素をフローティングにするか、その表示属性値を block に設定します。例:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title> <style type="text/css"> .myfloat{   width:200px;   height:200px;   border:1px solid red;   float:right; } .mydisplay{   width:200px;   height:200px;   border:1px solid green;   display:block; } </style> </head> <body>   <span class="myfloat">我将要浮动</span>   <span class="mydisplay">我将要添加display属性</span> </body> </html>

ログイン後にコピー

幅と高さを設定できるのはブロックレベルの要素のみであるため、span がブロックレベルの要素に変換されたことがわかります。

ブロックレベル要素をインライン要素に変換します:

ブロックレベル要素の表示属性値をインラインに設定します。

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title> <style type="text/css"> .mytest{   width:200px;   height:200px;   border:1px solid red;   display:inline; } </style> </head> <body>   <div class="mytest">我将要浮动</div> </body> </html>

ログイン後にコピー

上記のコードで設定された幅と高さは無効であり、オブジェクトがインライン要素に変換されたことを示しています。

元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0519/1897.html

最も元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod= viewthread&tid= 4705