ホームページ > 記事 > ウェブフロントエンド > div+css 3 日目_html/css_WEB-ITnose
div+css 3 日目_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:31:531172ブラウズ
1. インライン要素とブロック要素
インライン要素 (インライン要素)、インライン要素とも呼ばれます: インライン要素はテキストと他のインライン要素のみを収容できます。
一般的なインライン要素は次のとおりです: 45a2772a6b6107b401db3c9b82c049c2、3499910bf9dac5ae3c52d5ede7383485、d5fd7aea971a85678ba271703566ebfd
Block 要素 (block 要素): ブロック要素は通常新しい行で始まり、テキスト、インライン要素、その他のブロック要素を収容できます。コンテンツが 1 行に収まらない場合でも、ブロック要素は行全体を埋める必要があります。
一般的なブロック要素は次のとおりです: dc6dce4a544fdca2df29d5ac0ea9906b、e388a4556c0f65e1904146cc1a846bee
2. ケース
動作効果:
このケースから、インライン要素は独自のコンテンツを表示できる幅のみを占めることがわかります。 not 行全体を埋めます。ブロック要素は内容に関係なく行全体を埋めます。
3. インライン要素とブロック要素の違い
1. インライン要素はコンテンツの幅のみを占有しますが、ブロック要素はコンテンツに関係なく行全体を占有します
2. インライン要素はテキストとブロック要素のみを収容できます。他のインライン要素、ブロック要素はテキスト、インライン要素、ブロック要素 (ブラウザのバージョンとタイプに関連) を収容できます
3. 一部の CSS プロパティは、margin、left、right、width、などのインライン要素には影響しません。可能な限りブロックを使用することをお勧めします。 要素の配置 (ブラウザのバージョンと種類に関連します)
ブロック要素の幅を設定しましたが、依然として行全体を占めています。効果:
5. ブロック要素とインライン要素の変換
display:inline;------>ブロック要素をインライン要素に変換します
display:block;------>Convert inline要素からブロック要素へ
ケース:
span はブロック要素に変換され行全体を占有しますが、div はインライン要素に変換され行全体を占有しませんので、前後の違いに注意してください。行。
上記の場合の最終コード:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>行内元素和块元素</title> 6 <style type="text/css"> 7 .sp1{ 8 background:red; 9 display:block;/*我转为块元素了*/10 }11 .div1{12 background:gray;13 width:200px;14 display:inline;/*我转为行内元素了*/15 }16 .p1{17 background:#CC0;18 width:200px;19 }20 </style>21 </head>22 <body>23 <span class="sp1">我是行内元素span1</span>24 <span class="sp1">我是行内元素span2</span>25 <input name="username" type="text" value="我是行内元素input"/>26 <div class="div1">我是块元素div1</div>27 <div class="div1">我是块元素div2</div>28 <p class="p1">我是块元素段落1</p>29 <p class="p1">我是块元素段落2</p>30 </body>31 </html> 6. CSS ファイル間の相互参照
構文: @import url ('referenced css file address')
7. 標準ストリームと非標準ストリーム
フロー:Webページ内でHTML要素が表示される順序
標準的なフロー:HTMLファイルでは、前に書かれた要素は前に表示され、後ろに書かれた要素は後ろに表示されます
非-標準フロー: HTML ファイルでは、要素が標準フローから外れると、非標準フローになります
8. CSS のボックスモデル
9. ボックスモデルのエントリケース
コードを表示
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <link href="box1.css" rel="stylesheet" type="text/css" /> 6 <title>盒子模型</title> 7 </head> 8 <body> 9 <div class="div1">10 <img src="img1.jpg" />11 </div>12 </body>13 </html>
コードを表示
1 @charset "utf-8"; 2 /* CSS Document */ 3 4 body{ 5 border: 1px solid #F00; 6 width: 500px; 7 height: 500px; 8 /*让body自动居中*/ 9 margin: 0 auto;10 }11 12 /*盒子模型*/13 .div1{14 width: 120px;15 heigth: 120px;16 border: 1px solid blue;17 margin: 5px 0px 0px 5px;18 /*padding-top: 5px;*/19 /*设置padding，div会根据里面的内容自适应*/20 }21 .div1 img{22 width: 50px;23 height: 50px;24 margin: 5px 0px 0px 5px;25 }