CSS常用的屬性：

width

height

color

background-color

font-size

font-weight

text-decoration

vertical-align

尺寸單位和顏色：

px

%

red

rgb(255, 0, 0)

reba(255, 0, 0, 0.5)

#ff0000

#f00

尺寸 和 邊框：

尺寸屬性：

width、height

用來改變元素的寬高大小

取值：px為單位的數字 或 %

快元素和行內快元素都可以設置寬高大小

行內元素不起作用，大小有內容自適應

溢出處理：

溢出屬性：overflow

取值：visible(默認可見)

hidden? ?隱藏? 溢出部分不可見

scroll? ?顯示滾動條? 溢出時可用 始終顯示

auto? ? ?自動當發生溢出的時 產生滾動條并可用

邊框：

邊框的實現：

1.簡寫設置

通過一個屬性為4個方向設置邊框

可以設置邊框的寬度、樣式、顏色

屬性：border

取值：width style color(缺一不可)

width：寬度 px

style：邊框樣式

取值：

solid：實線

dashed：虛線

dotted：點線

double：雙線

color：設置邊框顏色

特殊用法：

取消邊框：border：none；

2.單獨設置某個方向的邊框

屬性：

border-top? ? ? 上

border-right 右

border-bottom 下

border-left 左

取值：width style color(缺一不可)

3.單獨定義邊框的寬度、樣式、顏色(了解)

border-width：

border-style：

border-color：

4.邊框實現三角標

元素的寬高尺寸為0

元素分別設置四個方向相同寬度

指定方向可以見 剩余的設置為不可見 透明(transparent)

想要設置三角標必須設置4個方向的邊框 否則就是矩形

輪廓線：

圍繞在元素邊框周圍的線? 常見于表單元素 如：輸入框焦點線

屬性：outline

取值：width style color

一般多取消元素的默認輪廓線

outline：none

圓角邊框：

設置元素的圓角

屬性：border-radius

取值：px、%(參照元素尺寸)

取值情況：

border-radius：20px;

一個值表示4個圓角程度都是20px

兩個值表示 1和3 2和4 對角相等

三個值表示最后一個角和對角相等

四個值表示分別表示4個圓角程度

圓形：取一個值：%50；

邊框陰影(盒陰影)：

屬性：

box-shadow

取值：

offset-x?? 水平偏移

offset-y 垂直偏移

blur 陰影的模糊度 值越大越模糊

spread 陰影的 延伸距離

color? 陰影顏色

瀏覽器坐標系：

不管是窗口還是元素都以左上角為原點 作為x,y軸的正方向

盒模型/框模型：

一切元素皆為框

定義在文檔中實際占據的尺寸

包含內容：

外邊距、邊框、內邊距、元素尺寸

默認情況下元素最終占據的尺寸大小：

最終寬度 = 左右的外邊距 + 左右邊框的寬度 + 左右內邊距 + 元素寬度

最終高度 = 上下的外邊距 + 上下邊框的高度 + 上下內邊距 + 元素高度

1.外邊距：

元素邊框與其他元素邊框之間的距離

設置元素與元素之間的距離

屬性：

margin

取值：px、%

取值情況：

margin：10px；

一個值表示四個方向都設置外邊距

兩個值表示上下，左右的外邊距相等

三個值表示左右相等其他不等

四個值表示分別設置上右下左的外邊距

特殊用法：

1.清除元素的外邊距

margin：0px；

2.設置元素在父元素中水平居中

margin：0px auto；

3.取值可以是負值

如果給負值表示位置微調

四個方向的外邊距單獨設置：

屬性：

margin-top

margin-right

margin-bottom

margin-left

可以是一個值也可以是百分比

具有默認外邊距的元素：

2.內邊距：

元素的內容與元素邊框的距離

屬性：padding

取值：px、%

取值情況：

padding：10px；

一個值表示四個方向的內邊距

兩個值表示上下，左右相等

三個值表示左右相等 其他不等

四個值表示分別設置四個方向的內邊距

四個方向的內邊距單獨設置：

padding-top

padding-right

padding-bottom

padding-left

具有默認內邊距的元素：

ol ul 文本框 密碼框 按鈕 td

box-sizing：

指定盒模型的計算方式

屬性：box-sizing

取值：

content-box? 默認值

border-box：

元素的width height屬性? 設置包含邊框 內邊距和內容部分共同的尺寸

元素顯示設置：

屬性；display

作用；改變元素類型

取值：

block? 轉換為塊元素(可以設置隱藏顯示)

inline 轉換為行內塊元素

inline-block 轉換為行內塊元素

none 設置元素隱藏

背景相關的屬性：

背景顏色是從邊框位置開始繪制的

如果元素加內邊距，也會按照背景顏色進行補充

所有的元素默認顏色都為透明 新建窗口為白色不是body的顏色 而是瀏覽器渲染的效果

屬性：

background-color

背景圖片的設置：

屬性；background-image

取值 url(圖片地址)

圖片平鋪顯示：

如果背景圖片小于元素尺寸，會自動對圖片重復平鋪

屬性：

background-repeat

取值：

repeat(默認) 水平和垂直方向平鋪

no-repeat 不重復平鋪

repeat-x 水平方向平鋪

repeat-y 垂直方向平鋪

圖片尺寸：

屬性：background-size

取值：

px

%：

采用當前元素的尺寸獲取包含width height兩個值

cover：

將圖片等比拉伸至完全覆蓋元素 超出部分裁剪掉

contain：

將圖片等比拉伸至剛好被元素容納 圖片比例不變

圖片的位置：

默認情況下 背景圖片重從元素的左上角顯示

屬性：

background-position

取值：x y

以像素為單位的數值沒使用空格隔開

x 水平偏移距離(正負數都可以)

y 垂直偏移距離(正負數都可以)

x% y%：

百分比參照元素尺寸獲取

0% 0%：

圖片左上角顯示

100% 100%：

背景圖片右下角顯示

50% 50%：

背景圖片中間顯示

使用方位值表示：

x y

x：left center right

y：top? center bottom

如果要一個方向

背景屬性簡寫：

屬性：background

取值：

color url() repeat position

背景圖片的大小需要單獨設置

總結

以上是生活随笔為你收集整理的python全栈构图_Python全栈 Web（边框、盒模型、背景）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。