css基礎 display:inline 塊級標簽->行內標簽 簡單示例
阿新 • • 發佈：2018-02-11
珍惜 margin www. body .com author class name 網頁設計
禮悟：
公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。
虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。
ide：visual studio 2017
browser：Chrome
os：win7
代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="https://www.cnblogs.com/jizuiku"/> <title></title> <style> div{ width:100px; height:100px; /* 塊級標簽 轉為 行內標簽 */ display:inline; } div:nth-child(1){ background-color:lightgreen; } div:nth-child(2){ background-color:aquamarine; } div:nth-child(3){ background-color:dodgerblue; } </style> </head> <body> <div> 博客園 </div> <div> 給最苦 </div> <div> 網頁設計 </div> </body> </html>
效果
擴展
2018-02-11
下面的內容來源於 itcast和itheima視頻庫 中視頻教程附帶的課堂筆記，在此處聲明，為示感恩心。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="https://www.cnblogs.com/jizuiku"/> <title></title> </head> <body> <!-- 塊級元素(block-level) <div> <h1...6> <p> <ul> <ol> <li>等 塊級元素的特點： （1）總是從新行開始 （2）高度，行高、外邊距以及內邊距都可以控制。 （3）寬度默認是容器的100% （4）可以容納內聯元素和其他塊元素。 --> <!-- 行內元素(inline-level) <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等 行內元素的特點： （1）和相鄰行內元素在一行上。 （2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。 （3）默認寬度就是它本身內容的寬度。 （4）行內元素只能容納文本或則其他行內元素。（a特殊） --> <!-- 行內塊元素(inline-block) <img />、<input />、<td> 行內塊元素的特點： （1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。 （2）默認寬度就是它本身內容的寬度。 （3）高度，行高、外邊距以及內邊距都可以控制。 --> </body> </html>
CSS3優秀，值得學習。
學習資源： www.w3cschool.cn + itcast和itheima視頻庫 + 清凈的心地。
如果您有公開的資源，可以分享給我的話，用您的資源學習也可以。
博文是觀看視頻後，融入思考寫成的。博文好，是老師講得好。博文壞，是 給最苦 沒認真。
css基礎 display:inline 塊級標簽->行內標簽 簡單示例