css基礎 display:inline-block 行內元素->行內塊元素
阿新 • • 發佈：2018-02-11
ins 鍛煉 tps strong name htm level 都是 鏈接
禮悟：
公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。
虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。
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 type="text/css"> a { /* 行內元素 轉為 行內塊元素 轉換之後，整個塊都是可以點擊的超鏈接。 */ display:inline-block; width:100px; height:30px; } a:nth-child(1){ background-color:cornflowerblue; } a:nth-child(2){ background-color:khaki; } </style> </head> <body> <a href="https://www.cnblogs.com/">博客園</a> <a href="http://www.cnblogs.com/jizuiku/">給最苦</a> </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-block 行內元素->行內塊元素