css基礎：塊元素、行內元素、行內塊元素
CSS中，html中的標簽元素大體被分為三種不同的型別：塊狀元素、行內元素(又叫行內元素)和行內塊狀元素，
1.常用的塊狀元素有：
<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
2.常用的行內元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
3.常用的行內塊狀元素有：
<img>、<input>
元素分類--塊級元素
什么是塊級元素？在html中
<div>、 <p>、<h1>、<form>、<ul> 和 <li>
就是塊級元素，設定display:block就是將元素顯示為塊級元素，如下代碼就是將行內元素a轉換為塊狀元素，從而使a元素具有塊狀元素特點，
a{display:block;}
塊級元素特點：
1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行，（真霸道，一個塊級元素獨占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設定，
3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度，
元素分類--行內元素
在html中，
<span>、<a>、<label>、 <strong> 和<em>
就是典型的行內元素（行內元素）（inline）元素，當然塊狀元素也可以通過代碼
display:inline
將元素設定為行內元素，如下代碼就是將塊狀元素div轉換為行內元素，從而使 div 元素具有行內元素特點，
div{
display:inline;
}
行內元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設定；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變，
元素分類--行內塊狀元素
行內塊狀元素（inline-block）就是同時具備行內元素、塊狀元素的特點，代碼
display:inline-block
就是將元素設定為行內塊狀元素，(css2.1新增)，
<img>、<input>
標簽就是這種行內塊狀標簽，
inline-block 元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設定，
轉載鏈接：https://www.jianshu.com/p/1cf4e5d9ca2c
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549820.html
標籤：Html/Css
下一篇：前端代碼安全與混淆