html中塊級元素和行級元素的對比

jerryloveemily 發(fā)布于2019-08-01 16:23 / 1604人閱讀

摘要：不能包含其他元素但是內(nèi)聯(lián)元素中有一些是替換元素瀏覽器在加載時根據(jù)屬性的設(shè)置最后確定樣子，可以設(shè)置寬高等屬性，例如，塊級元素和內(nèi)聯(lián)元素的轉(zhuǎn)換設(shè)置設(shè)置元素浮動設(shè)置元素的

關(guān)于塊級元素和行內(nèi)元素（內(nèi)聯(lián)元素的對比） 兩種元素的比較

塊級元素：

前后有換行

可以設(shè)置寬高等屬性，以及邊距，參照盒子模型

內(nèi)部可以包含其他塊級元素，內(nèi)聯(lián)元素

寬度默認(rèn)是父元素的寬度，高度可以設(shè)置或者由內(nèi)容的高度決定

內(nèi)聯(lián)元素：

前后不換行

設(shè)置元素寬高無效，高度由line-height決定（不設(shè)置時由font-size計算得出），寬度由內(nèi)容的多少決定，當(dāng)寬度大于父元素的寬度時，內(nèi)聯(lián)元素會被折斷到下一行，對于內(nèi)聯(lián)元素可以設(shè)置水平方向的padding，margin等，但是對于垂直方向，設(shè)置padding，margin看起來就會有效果但是對于瀏覽器來說是沒效果的，不影響其他元素的布局。

不能包含其他元素

但是內(nèi)聯(lián)元素中有一些是替換元素（瀏覽器在加載時根據(jù)屬性的設(shè)置最后確定樣子），可以設(shè)置寬高等屬性，例如：img，input

塊級元素和內(nèi)聯(lián)元素的轉(zhuǎn)換

設(shè)置display：block/inline-block

設(shè)置元素浮動

設(shè)置元素的position：relative/absolute/fixed

GPU云服務(wù)器云服務(wù)器中塊級 html新增的元素刪除html中的元素 html塊元素的特點

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/50485.html

相關(guān)文章

html中塊級元素和行級元素的對比

摘要：不能包含其他元素但是內(nèi)聯(lián)元素中有一些是替換元素瀏覽器在加載時根據(jù)屬性的設(shè)置最后確定樣子，可以設(shè)置寬高等屬性，例如，塊級元素和內(nèi)聯(lián)元素的轉(zhuǎn)換設(shè)置設(shè)置元素浮動設(shè)置元素的關(guān)于塊級元素和行內(nèi)元素（內(nèi)聯(lián)元素的對比）兩種元素的比較塊級元素：前后有換行可以設(shè)置寬高等屬性，以及邊距，參照盒子模型內(nèi)部可以包含其他塊級元素，內(nèi)聯(lián)元素寬度默認(rèn)是父元素的寬度，高度可以設(shè)置或者由內(nèi)容的高度決定 ...

Jiavan 2019-08-30 15:52 評論0 收藏0
從零開始的全棧工程師——html篇1.5

摘要：列表與邊距探討和行塊一列表無序列表內(nèi)部必須有子標(biāo)簽天生自帶內(nèi)外邊距也是自帶大家會發(fā)現(xiàn)用的時候內(nèi)容前面會出現(xiàn)一個像這樣的一個實心圓可以用屬性去掉也可以更換空心圓實心圓正方形空有序列表內(nèi)部必須有子標(biāo)簽天生自帶內(nèi)外邊距屬性是標(biāo)簽屬性只能寫在行列表與邊距探討和行塊一、列表 1.無序列表（UL） 1）內(nèi)部必須有子標(biāo)簽2）天生自帶內(nèi)外邊距 p也是自帶大家會發(fā)現(xiàn)用UL的時候內(nèi)容前面會出現(xiàn)一個像這樣的一...

booster 2019-04-23 13:23 評論0 收藏0
CSS盒模型

box model showImg(https://segmentfault.com/img/bVtyKC?w=746&h=455); Margin Border Padding Content width 指定content box 的寬度百分?jǐn)?shù)相對于父容器(包含塊)的content box的寬度只有包含塊的高度不依賴該元素時，百分比寬度才生效 paddi...

fish 2019-08-30 15:52 評論0 收藏0
CSS 布局方式

摘要：中間左欄右欄清除浮動如下圖缺點結(jié)構(gòu)不正確多了一層標(biāo)簽布局左欄中間右欄如下圖缺點兼容性問題參考文章 W3C標(biāo)準(zhǔn) 由萬維網(wǎng)聯(lián)盟制定的一系列標(biāo)準(zhǔn)，包括：結(jié)構(gòu)化標(biāo)準(zhǔn)語言（HTML和XML）表現(xiàn)標(biāo)準(zhǔn)語言（CSS）行為標(biāo)準(zhǔn)語言（DOM和ECMAScript） CSS中的定位機制在CSS中存在三種定位機制：標(biāo)準(zhǔn)文檔流（Normal flow）浮動（Floats）絕對定位（Abs...

LancerComet 2019-08-29 15:27 評論0 收藏0
360前端星計劃學(xué)習(xí)-HTML + CSS

摘要：設(shè)計思想兼容已有內(nèi)容避免不必要的復(fù)雜性解決現(xiàn)實問題優(yōu)雅降級尊重事實標(biāo)準(zhǔn)變化新增語義化標(biāo)簽去除純表示性的標(biāo)簽拖拽離線語法標(biāo)簽不區(qū)分大小寫推薦小寫空標(biāo)簽可以不閉合屬性不必引號。遇到這種情況時，會生成匿名塊級盒來包含行級盒。瀏覽器瀏覽器渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

lpjustdoit 2019-08-29 12:27 評論0 收藏0