004 Python前端之CSS盒模型

2021-08-06 07:49:10 字數 3061 閱讀 2862

最外層margin

中間border

內層padding

最內層width + height

padding是設定頁面中乙個元素內容到元素的邊框之間的距離。 也稱補白

用法:1)用來調整內容(子元素)在容器(父元素)中的位置關係

2)用來調整子元素在父元素中的位置關係。 注:padding屬性需要新增在父元素上。

3)padding值是額外加在元素原有大小之上的,如想保證元素大小不變,需從元素寬或高上減掉新增的padding值大小。

padding屬性值的四種方式

四個值:上 右 下 左

三個值:上 左右 下

二個值:上下 左右

乙個值:四個方向 padding

:2px;

/*定義元素四周填充為2px*/

可單獨設定某一方向填充

上方向padding-top

:10px;

右方向pahdding-right

:10px;

下方向padding-bottom

:10px;

左方向padding-left

:10px;

注意:padding值不允許是負值

padding區域在border與content之間;背景色和背景影象會覆蓋padding和content組成的區域;

邊界:margin,在元素外邊的空白區域,被稱為邊距。

屬性值的4種方式:

四個值:上 右 下 左

三個值:上 左右 下

二個值:上下 左右

乙個值: 四個方向

可單獨設定某一方向填充

上方向margin-top

:10px;

右方向margin-right

:10px;

下方向margin-bottom

:10px;

左方向margin-left

:10px;

border的使用方法:

復合寫法:border

:邊框寬度 邊框風格 邊框顏色; 例如:border

:5px solid #f00;

網頁中很多修飾性線條都是由邊框來實現的。 邊框三類屬性:

邊框寬度:border-width

:邊框顏色:border-color:

邊框樣式:border-style:solid(實線)/dashed(虛線)dotted(點劃線)/none; *

可單獨設定一方向邊框,

盒模型:border的設定

1、border

:dashed/solid/dotted/double(預設的邊框寬度為中等(大約3px和4px之間),預設的顏色為文字的顏色)

2、border-width:10px;(設定乙個值時:四方向)

3、border-width

:5px 10px(設定兩個時:第乙個值的是上下、第二個值是左右)

4、border-width:4px 10px 20px(設定三個值時:第乙個值上,第二個值是左右,第三個指下;)

5、border-width:10px 5px 7px 8px ;(分別設定四個方向的邊框寬度;)

盒子實際占有寬度區域=margin-left

+ border-left

+ padding-left

+width+padding-right

+border-right

+margin-right

盒子實際占有高度的區域=margin-top

+ border-top

+ padding-top

+ height + padding-bottom

+ border-bottom

+ margin-bottom

容器溢位

visible:預設值,內容不會被修剪,會呈現在元素框之外;

hidden:內容會被修剪,並且其餘內容是不可見的;

scroll:內容會被修剪,但是瀏覽器會顯示滾動條,以便檢視其餘的內容;

文字溢位

取值:clip:不顯示省略號(...),而是簡單的裁切;

ellipsis:當物件內文字溢位時,顯示省略標記;

省略號設定
text-overflow屬性僅是:當文字溢位時是否顯示省略標記,並不具備其它的樣式屬性定義,要實現溢位時產生省略號的效果還需定義:

1、容器寬度:width:value;(px、%,都可以)

2、強制文字在一行內顯示:white-space:nowrap;

3、溢位內容為隱藏:overflow:hidden;

4、溢位文字顯示省略號:text-overflow:ellipsis;

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素

content-box

這是由 css2.1 規定的寬度高度行為。 寬度和高度分別應用到元素的內容框。 在寬度和高度之外繪製元素的內邊距和邊框。

border-box

為元素設定的寬度和高度決定了元素的邊框盒。 就是說,為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。 通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

舉例盒模型尺寸基準有兩種,分別是預設的content-box和border-box

預設情況下我們**中元素的是以content-box作為標準的盒子

content-box和border-box的主要區別是二者的盒子的寬度是否包含元素的邊框和內邊距。

html

"box1" class=

"box"

>

"box2" class=

"box"

>

css.box

#box1

#box2

004 python 基本資料型別

自 參考1,參考2,感謝作者的無私分享。定義 age 10 age int 10 用於標識 年齡,等級,身份證號,qq號,個數 定義 salary 3.1 salary float 3.1 用於標識 工資,身高,體重 在python中,加了引號的字元就是字串型別,python並沒有字元型別。定義 n...

004 Python基本資料型別 元祖

元祖 body div notebook 定義 和列表類似,只不過把 換成了 是一種有序的 不可變的資料型別。最外層的一定不能被修改,只能被檢視。巢狀的元素可能可以改,比如,巢狀的列表等等。建立 in 12 直接括號t 1,2 print t type t 直接逗號分隔t1 3,4print t1 ...

前端之css之單位

1.百分比 預設元素高度設定為100 以自身高度為準,如果父元素設定寬度,子元素寬度為父元素寬度。2.rem rem相對於html元素的font size屬性的大小而變化,需要由js 動態控制。3.vh,vw vw 可視區域的寬度,總寬度為100vw vh 可是區域的高度,總高度為100vh4.ca...