摘要:元素分類關于這點我還有些問題,暫且放上來,慢慢修改,非常歡迎糾正中的標簽元素大體被分為三種不同類型塊狀元素,內聯元素和內聯塊狀元素常見的塊狀元素有常見的內聯元素有有類特殊的元素如等,他們被稱為可置換元素。
我們常用的display屬性值有:
inline block inline-block none
把 display 設置成 none 不會保留元素本該顯示的空間,但是 visibility: hidden 還會保留。
我們最關心的還是display:inline、display:block和display:inline-block的區別:
inline特性
內聯對象inline給它設置屬性height和width是沒有用的,致使它變寬變大的
原因是:
它實際寬度為:內部元素的寬+2*(padding+border+margin)。
inline對象不多帶帶占一行。
block特性
而塊對象block是可以設置寬高的,但是它的實際寬高是:width+2*(padding+border+margin)。
block元素多帶帶占一行。
然而,當我們即需要div有寬高,又不希望它獨占一行怎么辦?
inline-block特性
這個時候我們就需要使用inline-block了:
因為inline-block既具有block的寬高特性又具有inline的同行元素特性。
行內元素特點
1、和其他元素都在一行上; 2、元素的高度、寬度、行高及頂部和底部邊距不可設置; 3、元素的寬度就是它包含的文字或圖片的寬度,不可改變。
塊級元素特點
1、每個塊級元素都從新的一行開始,并且其后的元素也另起一行。 2、元素的高度、寬度、行高以及頂和底邊距都可設置。 3、元素寬度在不設置的情況下,是它本身父容器的100%,除非設定一個寬度。
元素分類(關于這點我還有些問題,暫且放上來,慢慢修改,非常歡迎糾正)
HTML中的標簽元素大體被分為三種不同類型:塊狀元素,內聯元素和內聯塊狀元素
常見的塊狀元素有:
,,
...
,
,
,
,
, ,
,常見的內聯元素有:
,,,,,有類特殊的元素:如img|input|select|textarea|button|label等,他們被稱為可置換元素(Replaced element)。他們區別一般inline元素(相對而言,稱non-replaced element)是:這些元素擁有內在尺寸(intrinsic dimensions),他們可以設置width/height屬性。他們的性質同設置了display:inline-block的元素一致。
margin在塊級元素下,他的性能可以完全體現,上下左右任你設定。
margin也能用于內聯元素,這是規范所允許的,但是margin-top和margin-bottom對內聯元素(對行)的高度沒有影響,并且由于邊界效果(margin效果)是透明的,他也沒有任何的視覺影響。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/110953.html
相關文章
詳解css中的display屬性(行內元素和塊級元素)
摘要:在中,和就是典型的行內元素元素。內聯元素不單獨占一行,給他設置寬高是沒有用的。在中和就是塊級元素。此元素會根據上下文作為塊級元素或內聯元素顯示。此元素會作為塊級表格來顯示類似,表格前后帶有換行符。 display屬性 首先,所有主流瀏覽器都支持 display 屬性。其次,我們都知道display 屬性規定元素應該生成的框的類型。默認值:inline 我們常用的display屬性值...
前端面試題-行內元素和塊級元素
摘要:二塊級元素塊級元素占據其父元素容器的整個空間,因此創建了一個塊。而塊級元素可以包含行內元素和其他塊級元素。格式默認情況下,行內元素不會以新行開始,而塊級元素會新起一行。 一、行內元素 一個行內元素只占據它對應標簽的邊框所包含的空間。 二、塊級元素 塊級元素占據其父元素(容器)的整個空間,因此創建了一個塊。通常瀏覽器會在塊級元素前后另起一個新行。 三、行內元素示例 HTML showIm...
前端面試題-行內元素和塊級元素
摘要:二塊級元素塊級元素占據其父元素容器的整個空間,因此創建了一個塊。而塊級元素可以包含行內元素和其他塊級元素。格式默認情況下,行內元素不會以新行開始,而塊級元素會新起一行。 一、行內元素 一個行內元素只占據它對應標簽的邊框所包含的空間。 二、塊級元素 塊級元素占據其父元素(容器)的整個空間,因此創建了一個塊。通常瀏覽器會在塊級元素前后另起一個新行。 三、行內元素示例 HTML showIm...
行內元素和塊元素以及行內塊元素的特點
摘要:標簽一般分為塊標簽和行內標簽兩種類型,也可以稱為塊元素和行內元素。塊元素和行內元素的具體特點如下三塊級元素塊元素會獨自占據一整行,或者多行,可以任意設置其大小尺寸,是用于搭建網頁布局的必須部分,使網頁結構更加緊湊合理。一、背景 初學html,接觸很多標簽、、、、等,當寫出簡單的小頁面的時候,例如僅僅是一篇帶有標題的文章,標題標簽單獨一行,不管后面有多大的空間;標簽中使用多個給某些詞做強調,但...
發表評論
0條評論
Magicer
男|高級講師
TA的文章
閱讀更多
多態
閱讀 2588·2021-11-24 09:38
CSS實例詳解:Flex布局
閱讀 2615·2019-08-30 15:54
white-space、word-wrap和word-break的簡單整理
閱讀 934·2019-08-30 15:52
前端面試每日3+1——第118天
閱讀 1918·2019-08-30 15:44
Flex布局入門
閱讀 2725·2019-08-30 13:48
css選擇器總結
閱讀 778·2019-08-29 16:21
Sass 語法規則
閱讀 1008·2019-08-29 14:03
「CSS」DOM2 級樣式
閱讀 2223·2019-08-28 18:15
閱讀需要支付1元查看