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

Jiavan 發(fā)布于2019-08-30 15:52 / 2931人閱讀

摘要：不能包含其他元素但是內(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)元素

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

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

前后不換行

設(shè)置元素寬高無效，高度由line-height決定（不設(shè)置時由font-size計算得出），寬度由內(nèi)容的多少決定，當寬度大于父元素的寬度時，內(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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116531.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)元素寬度默認是父元素的寬度，高度可以設(shè)置或者由內(nèi)容的高度決定 ...

jerryloveemily 2019-08-01 16:23 評論0 收藏0
從零開始的全棧工程師——html篇1.5

摘要：列表與邊距探討和行塊一列表無序列表內(nèi)部必須有子標簽天生自帶內(nèi)外邊距也是自帶大家會發(fā)現(xiàn)用的時候內(nèi)容前面會出現(xiàn)一個像這樣的一個實心圓可以用屬性去掉也可以更換空心圓實心圓正方形空有序列表內(nèi)部必須有子標簽天生自帶內(nèi)外邊距屬性是標簽屬性只能寫在行列表與邊距探討和行塊一、列表 1.無序列表（UL） 1）內(nèi)部必須有子標簽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 的寬度百分數(shù)相對于父容器(包含塊)的content box的寬度只有包含塊的高度不依賴該元素時，百分比寬度才生效 paddi...

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

摘要：中間左欄右欄清除浮動如下圖缺點結(jié)構(gòu)不正確多了一層標簽布局左欄中間右欄如下圖缺點兼容性問題參考文章 W3C標準由萬維網(wǎng)聯(lián)盟制定的一系列標準，包括：結(jié)構(gòu)化標準語言（HTML和XML）表現(xiàn)標準語言（CSS）行為標準語言（DOM和ECMAScript） CSS中的定位機制在CSS中存在三種定位機制：標準文檔流（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)雅降級尊重事實標準變化新增語義化標簽去除純表示性的標簽拖拽離線語法標簽不區(qū)分大小寫推薦小寫空標簽可以不閉合屬性不必引號。遇到這種情況時，會生成匿名塊級盒來包含行級盒。瀏覽器瀏覽器渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

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