HTML中包含大量的標簽, 這些標簽在我們使用中發現會有小小的差別, 有的標簽用了之後不會有太大的佈局變化, 只是語義化, 而有的標簽卻會重起一行, 相當於自己回車了一次, 這就是不同標簽元素的分類不同造成的結果. 塊級元素 在HTML中, <div>, <p>, <h1>, <form>, <ul
HTML中包含大量的標簽, 這些標簽在我們使用中發現會有小小的差別, 有的標簽用了之後不會有太大的佈局變化, 只是語義化, 而有的標簽卻會重起一行, 相當於自己回車了一次, 這就是不同標簽元素的分類不同造成的結果.
塊級元素
在HTML中, <div>, <p>, <h1>, <form>, <ul>, <ol>, <li>等標簽就是塊級元素, 每個塊級元素一般都具有相同的特點.
1, 每個塊級元素都從新的一行開始, 並且其後的元素也另起一行. (也就是塊級元素就要自己占一行, 後面的也得讓路)
2, 元素的高度, 寬度, 行高以及頂和底邊距都可設置.
3, 元素寬度在不設置的情況下, 是它本身父容器的100%, 也可以單獨進行的設置.
內聯元素
區別於塊狀元素, <span>, <a>, <label>, <strong>, <em>就是典型的內聯標簽(行內元素)元素, 大家在使用過程中其實在佈局上面是沒太大的變化的, 它們修改的只是行內的一些視覺或者點擊效果等等.
當然, 內聯元素也有自己的一些特點, 這些和塊級元素都是一一對應的.
1, 內聯元素和其他元素都是在一行上, 而不會排擠其他的元素,
2, 元素的高度, 寬度以及頂部底部邊距不可設置(因為元素都是行內緊挨著, 你如果設置這些, 那麼元素不就都亂了).
3, 元素的寬度就是它包含的文字或圖片的寬度, 不可改變.
內聯塊狀元素
這種元素非常少, 它們同時具備兩種元素的特點, <img>, <input>這兩個標簽就是內聯塊狀元素. 就不多做介紹了.
這三種元素是可以互相轉化的, 也就是說可以通過css強制修改其元素類型, 只需要設置display的屬性即可, 假如想要將內聯元素<span>類型修改為塊級元素, 代碼如下
span{
display:block;
}
同理其他的也是一樣的屬性值不同而已, 修改為塊級元素:block, 修改為內聯元素:inline, 修改為內聯塊狀元素:inline-block.
這三種元素一定要非常準確的掌握, 因為在div + css佈局中, 它們占了舉足輕重的地位.
