塊級元素和內聯元素的預設寬高

2021-09-28 12:16:18 字數 770 閱讀 5666

我們先明確一下文件流的概念:對於內聯元素,是從左到右排列的,

當寬度不夠時換行;對於塊級元素,是從上到下排列的,每乙個元素都另起一行。

寬度:不受width的限制,有文字內容決定的,padding 和 margin 可以改變寬度。

高度:不受height的限制,padding 和margin 也不能改變。可以通過line-height 和 font-size來改變。

寬度:1、可以自行設定width的值;

2、不設定寬度時的值為auto,預設寬度是父元素的寬度-自身的border-自身的margin。

3、需要注意的是如果寬度寫了100%,應該是元素內容的寬度(content)等於父元素的寬度,元素的寬度應該等於這個寬度加自身的border,會凸出來一部分。

高度:1、可以自行設定height的值;

2、預設值為0;

3、由元素內部的文件流中的元素的高度的總和決定的(裡面元素的height+padding+margin有合併的可能),當元素脫離文件流時,不能用於父元素高度的計算;

4、當塊級元素裡面是文字時,文字只有一行,高度由line-height決定,文字有多行,會自動換行,但是碰到長度很長的單詞時需要手動新增連字元(-)換行,有乙個屬性與之相關,word-breaking: break all; 超出寬度,不管單詞是否結束都換行。

寬度:1、設定width的值,超出寬度部分的處理方式和div一樣,多個inline-block元素處於一行中時和inline元素的效果一樣,可以用white-space控制是否換行;

2、內容決定寬度。

塊級元素和內聯元素的預設寬高

我們先明確一下文件流的概念 對於內聯元素,是從左到右排列的,當寬度不夠時換行 對於塊級元素,是從上到下排列的,每乙個元素都另起一行。一 內聯元素寬高的確定 寬度 不受width的限制,有文字內容決定的,padding 和 margin 可以改變寬度。高度 不受height的限制,padding 和m...

塊級元素和內聯元素的寬高是如何確定的

原文 在剛接觸css的時候,每次給元素新增樣式,都習慣性的寫上寬是多少,高是多少,為自己挖坑無數,還暗自抱怨說css好煩,不過它真的是好煩,脾氣很怪。好,言歸正傳。在討論元素的寬高是如何確定的之前,我們先明確一下文件流的概念 對於內聯元素,是從左到右排列的,當寬度不夠時換行 對於塊級元素,是從上到下...

塊級元素和內聯元素

我們首先要了解,所有的html元素,都要麼是block 塊元素 要麼是inline 內聯元素 下面了解一下block inline各自的特點 block元素的特點 example source code www.52css.com 總是在新行上開始 高度,行高以及頂和底邊距都可控制 寬度預設是它的容...