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

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

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

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

塊級元素：

前后有換行

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

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

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

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

前后不換行

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

不能包含其他元素

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

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

設置display：block/inline-block

設置元素浮動

設置元素的position：relative/absolute/fixed

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

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

轉載請注明本文地址：http://systransis.cn/yun/50485.html

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

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

Jiavan 2019-08-30 15:52 評論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 布局方式

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

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

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

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