盒模型知識點總結

2021-09-24 08:23:40 字數 1090 閱讀 4056

一、怎麼理解盒模型?

盒子模型是樣式表(css)控制頁面的很重要的概念。所有的頁面的元素都可以看成是乙個盒子,佔據一定的頁面空間。佔據的空間要比實際使用的空間要大得多。我們可以調整盒子的邊框和距離,來調整盒子(頁面和頁面中的元素)的位置。盒子模型是由內容、邊框、間隙(padding)、間隔(margin)組成。

盒模型是有兩種標準的,乙個是標準模型,乙個是ie模型。 如下圖所示:

在標準模型中,盒模型的寬高只是內容(content)的寬高,

而在ie模型中盒模型的寬高是內容(content)+填充(padding)+邊框(border)的總寬高。

css如何設定兩種模型:

二、border

border是元素的外圍,計算元素的寬和高要把border加上。

border有三個主要屬性,color(顏色)、width(粗細)和style(樣式)。

1、color主要是指定border的顏色,一共有256的3次方種顏色供我們選擇。通常是16進製制的值,比如紅色是「#ff0000」。

2、width是border粗細程度,可以設定為thin、thick和length,length為具體數值,比如說border:1px #ccc solid;其中1px指的是border的width,預設值是medium,一般瀏覽器解析為2畫素。

3、style屬性可以設為none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等,其中none和hodden是不顯示border,hidden可以用來解決邊框的衝突問題。

三、padding

padding用於控制content與border之間的距離,同時設定上下左右的padding時,可以這樣寫padding:10px 20px 10px 10px;分別對應上、右、下、左四個方向的padding,逆時針排序,margin屬性也可以這樣書寫。

四、margin

margin用於控制塊與塊(可以理解成塊級元素)之間的距離。margin是與content之間的邊距。

css盒模型重點知識點

標準盒模型,這個瀏覽器預設的方式 box sizing content box ie盒模型 box sizing border box 概念bfc主要用來解決邊距重疊的問題 與它類似的還有乙個叫做ifc 如何建立bfc bfc的使用場景 class wrap 1section 2section di...

樹模型知識點

疑問learning to rank之lambdamart的前世今生 gbdt原理 非常重要 決策樹 上 id3 c4.5 cart 及剪枝 資料探勘十大演算法之cart詳解 深入理解gbdt回歸演算法。對gbdt的原理講解的比較清晰,舉的例子也比較好。參考learning to rank之lamb...

知識點總結

1,迴圈中的中斷 continue 跳出此次迴圈,繼續for迴圈 break 跳出當前for迴圈 return 跳出當前方法 2,字串的操作 componentseparatedbystring stringbyreplacingoccurencesofstring withstring iskin...