Python-CSS進階

0. 何時該用什麼佈局

<!-- 定位佈局: 如下兩種佈局不易解決的問題, 盒子須要脫離文檔流處理 -->
<!-- 浮動佈局: 通常有block特性的盒子,水平排列顯示 -->
<!-- 盒模型佈局: 在父級水平居中顯示, 在其餘佈局基礎上微調 -->
<!-- 流式佈局思想 -->

一.拼接網頁

將區域總體劃分起名 => 對其餘區域佈局不產生影響
提出公共css => reset操做
當有區域發送顯示重疊(脫離文檔流致使的), 須要經過z-index調整層級
必定須要最外層,且最外層作自身佈局時,不要作過多佈局操做

二.過渡 transition(動畫)

transition屬性

transition: 過渡時間(必須) 延遲時間(通常不設) 過渡屬性(通常採用all默認值) 過渡曲線(貝賽爾曲線)(cubic-bezier())

過渡屬性具體設置給初始狀態仍是第二狀態 根據具體需求

/*過渡的持續時間*/
transition-duration: 2s;
/*延遲時間*/
transition-delay: 50ms;
/*過渡屬性*/
/*單一屬性 | 屬性1, ..., 屬性n | all*/
transition-property: all;
/*過渡曲線*/
/*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);

/*結論:*/
/*1.儘可能懸浮靜止的盒子, 控制運動的盒子*/
/*2.不能肯定區間範圍的屬性值, 不會產生動畫效果*/
/*display 不能作動畫 | opacity 能夠作動畫*/

三.陰影box-shadow:

/*x軸偏移量 y軸偏移量 虛化程度 陰影寬度 陰影顏色*/
box-shadow: 0 0 10px 10px black;

/*一個盒子能夠設置多個陰影, 每一套陰影間用逗號隔開*/
box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;

四.僞類實現邊框

/*自身須要定位*/
.box {
position: relative;
}
/*僞類經過定位來完成圖層的佈局*/
.box:before {
content: "";
/*完成佈局*/
position: absolute;
top: 10px;
left: 0;
/*構建圖層*/
width: 1px;
height: 100px;
background-color: black;
}
.box:after {
content: "";
position: absolute;
width: 100px;
height: 1px;
background-color: black;
top: 0;
left: 10px;
}

五.形變transform:

/*1.形變參考點: 三軸交界點*/
transform-origin: x軸座標 y軸座標;

/*2.旋轉 rotate deg*/
transform: rotate(720deg);

/*偏移 translate px*/
transform: translateX(200px) translateY(200px);

/*縮放 scale 無單位*/
transform: scale(x軸比例, y軸比例)

/*注: 能夠多形變, 空格隔開書寫在一條transform屬性中, 順序通常會影響形變結果*/
/*形變不改變盒子佈局, 只拿形變作動畫*/

六.動畫animation

transition:
一個在執行的過程當中聲明關鍵幀的動畫，能夠一旦元素的屬性發生變化就能夠造成一個動畫，
而後transition-property，transition-duration，transition-timing-function，transition-delay來設置動畫的屬性

animation:
經過@keyframes 來設置關鍵幀，在沒個關鍵幀中設置在該幀動畫中某個元素的一個或幾個屬性的變化。
animation-name，animation-duration，animation-timing-function，animation-delay，
animation-iteration-count，animation-direction來設置動畫的屬性

1.設置動畫體

@keyframes move {
/*起點省略採用的就是初始狀態*/
0% {}
33.3% {
margin-left: 800px;
/*在每個動畫節點都須要明確全部作動畫屬性在該節點的屬性值*/
margin-top: 50px;
}
66.6% {
margin-left: 500px;
margin-top: 300px;
}
/*終點須要設置*/
100% {
margin-left: 200px;
margin-top: 50px;
}
}

2.設置動畫屬性

/*animation: 動畫名 時間 運動次數(無限次:infinite) 運動曲線*/
.box {
animation: move 2s 1 linear;
}

七.表格

<table>
<caption>表格標題</caption>
<thead>
<tr>
<th>標題</th>
<th>標題</th>
<th>標題</th>
</tr>
</thead>
<tbody>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>

</tbody>
<tfoot>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
</tfoot>
</table>
table的全局屬性:
border="1" 設置邊框寬度
cellspacing="10" 單元格間的間距
cellpadding="10" 單元格的內邊距
rules="rows | cols | groups | all" 邊框的保留格式

td的全局屬性
rowspan='2' 合併兩行單元格
colspan='3' 合併三列單元格

table的高度: 由內容和設置高度中的大值決定

table-cell: 能夠嵌套任意類型標籤, 能夠快速實現多行文本垂直居中

八.多行文本垂直居中

<div class="sup">
<p>第一行文本</p>
<div>第二行文本</div>
</div>

.sup { /*實現多行文本垂直居中 => 針對父級設置, 父級中的多個塊級文本類子級標籤垂直居中*/ display: table-cell; vertical-align: middle; } /*注: 若是想調整sup的位置,能夠給sup嵌套一個"位置層"*/ /*.box>.sup>p+div*/