python全栈构图_Python全栈 Web（边框、盒模型、背景）
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（边框、盒模型、背景）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【小y设计】二维码条形码打印编辑器
- 下一篇： websocket python爬虫_p