display屬性 盒模型

2021-06-27 01:49:28 字數 803 閱讀 3585

//確實應該對html中的每個元素標籤都要了解一遍,這樣才能恰到好處的使用它們

//這裡做個初步的整理,細節實踐中糾正

一、display屬性的三個值:inline,inline-block,block

它們改變元素的特性,將元素重新分類成:內聯元素,行內塊元素,塊元素。

inline元素:設定width、height對它的自身的高度沒影響,其高度由font-size撐起,如span、a、strong、em等。

一般來說設定padding、margin改變的是inline元素作為盒模型的內外邊距,並不會擠動本行的基線。

內聯1內聯2
inline-block元素:應用了該特性的元素本身變成了內聯的,而該元素的內容卻變成了塊級的——inline-block字面翻譯行內塊嘛~

由於內部的塊元素可設定width、

height,起到支撐作用,而inline-block特性又具有一種收縮力,能將元素

壓縮。它們兩相作用,意味深長~~

block元素:預設首尾都帶上了換行符。塊元素可為內容區設定

width、

height,其內容區的與內容非緊密依存關係。

我們

//font-size是預設的12px; 效果如下:

二、替換元素、不可替換元素

w3c上的一粒,用1畫素的描出乙個矩形。

盒模型屬性

邊框 border 邊界 邊距 margin 補白 填充 padding 內容區 content 1 邊框 border 1 border 盒子的邊緣。2 用法 1 邊框的寫法 divborder width 邊框的寬度 border color 邊框的顏色 border style 邊框的樣式 邊...

盒模型 標籤屬性

1 盒模型 組成部分 margin border padding content width height margin 用於移動盒子的位置 邊框和背景顏色以外的部分 margin auto margin top傳遞問題 border solid dashed dotted double 三角形 寬...

盒模型 box sizing 屬性

css3增添了盒模型 box sizing 屬性,box sizing屬性值 可以有下面三個值 content box 預設值,讓元素維持w3c的標準盒模型。元素的寬度 高度 width height 所佔空間 等於元素邊框寬度 border 加上元素內邊距 padding 加上元素內容寬度 高度 ...