bootstrap規範整理 堅持本心

2021-07-15 06:19:44 字數 1153 閱讀 1928

相關的屬性宣告應當歸為一組,並按照下面的順序排列:

positioning

box model

typographic

visual

由於定位(positioning)可以從正常的文件流中移除元素,並且還能覆蓋盒模型(box model)相關的樣式,因此排在首位。盒模型排在第二位,因為它決定了元件的尺寸和位置。

其他屬性只是影響元件的內部(inside)或者是不影響前兩組屬性,因此排在後面。

什麼是css盒模型?

w3c組織就建議把所有網頁上的物件都放在乙個盒(box)中,設計師可以通過建立定義來控制這個盒的屬性,這些對像包括段落、列表、標題、以及層。盒模型主要定義四個區域:內容(content)、邊框距(padding)、邊界(border)和邊距(margin)。margin,background-color,background-image,padding,content,border之間的層次、關係和相互影響。盒模型的示意圖。

這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也具有這些屬性,所以叫它盒子模式。那麼內容(content)就是盒子裡裝的東西;而填充(padding)就是怕盒子裡裝的東西(貴重的)損壞而新增的泡沫或者其它抗震的輔料;邊框(border)就是盒子本身了;至於邊界(margin)則說明盒子擺放的時候的不能全部堆在一起,要留一定空隙保持通風,同時也為了方便取出嘛。在網頁設計上,內容常指文字、等元素,但是也可以是小盒子(div巢狀),與現實生活中盒子不同的是,現實生活中的東西一般不能大於盒子,否則盒子會被撐壞的,而css盒子具有彈性,裡面的東西大過盒子本身最多把它撐大,但它不會損壞的。填充和邊界只有寬度屬性,可以理解為生活中盒子裡的抗震輔料厚度,而邊框有大小和顏色之分,可以對每一條邊框定義不同的樣式。我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的,邊界就是該盒子與其它東西要保留多大距離。

width和height定義的是content部分的寬度和高度而不是整個盒子的高度,這個是初學者常犯的乙個錯誤,padding border margin的寬度依次加在外面。背景會填充padding和content部分。但是由於瀏覽器設計上的問題,不同瀏覽器顯示效果會有些不同。左右margin加倍的問題當box為float時,ie6中box左右的margin會加倍。 

w3c定義的平面盒模式如下: 

PSR規範0 4整理

psr規範 引言 psr 是 php standard recommendations 的簡寫,由 php fig 組織制定的 php 規範,是 php 開發的實踐標準。這些規範的目的是 通過框架作者或者框架的代表之間討論,以最低程度的限制,制定乙個協作標準,各個框架遵循統一的編碼規範,避免各家自行...

python 編碼規範整理

pep8 python 編碼規範 一 編排 1 縮排。4個空格的縮排 編輯器都可以完成此功能 不要使用tap,更不能混合使用tap和空格。2 每行最大長度79,換行可以使用反斜槓,最好使用圓括號。換行點要在操作符的後邊敲回車。3 類和top level函式定義之間空兩行 類中的方法定義之間空一行 函...

python 編碼規範整理

好處1 風格的統一可以很好地提高 的可讀性。制定乙個相同的 風格,如直接選用python的pep8官方風格指南,嚴格遵守後可以得到美觀又統一風格的專案 這在多人協作的開發中是很有必要的,每個人編寫 的習慣不一樣,特別是有些喜歡用一些奇怪或新奇的寫法,這樣可讀性很差。尤其是靈活的指令碼語言python...