洛谷 P2197 【模板】nim 遊戲（博弈論）

阿新 • • 發佈：2021-06-13

批量改變樣式

/* 使用cssText */
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 20px';
複製程式碼

css表示式使用一次性表示式(但最好避免css表示式)


// css
p{
    background-color: expression(altBgcolor(this))
}

// js
function altBgcolor(el){
    el.style.backgroundColor = (new Date()).getHours() % 2 ? "#fff" : "#06c";
}
複製程式碼

三角箭頭

.triangle{
    width:0px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:20px solid #000;
}
複製程式碼

盒子模型

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

  box-sizing: content-box|border-box|inherit:
複製程式碼

content-box: 這是 CSS2.1 指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用於box的寬度和高度。元素的填充和邊框佈局和繪製指定寬度和高度除外

border-box: 指定寬度和高度（最小/最大屬性）確定元素邊框。也就是說，對元素指定寬度和高度包括了 padding 和 border 。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit: 指定 box-sizing 屬性的值，應該從父元素繼承

標準盒子模型和IE盒子的區別

一旦為頁面設定了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素新增具有指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。

IE8 及更早IE版本不支援設定填充的寬度和邊框的寬度屬性。

居中的實現

line-height
子級 position: absolute; // 左，高各50%，
- 子級具體高度然後通過margin往回移動元素50%的寬高度
- 不知高度使用 transform: translate(-50%, -50%);
子級具體寬高度 position: absolute； left,right,bottom,top 都為0，margin:atuo;
通過給父級設定 flex
父級display:table, 子級:display: table-cell; vertical-align: middle;
父級display:grad, 子級:margin：auto; 相容性差，不推薦
通過給父級設定before

  .ghost-center {
    position: relative;
    border: 1px solid blue;
    height: 400px;
  }
  
  .ghost-center::before {
      content: " ";
      display: inline-block;
      height: 100%;
      width: 1%;
      vertical-align: middle;
  }
  
  .ghost-center>.content {
      display: inline-block;
      vertical-align: middle;
      width: 20rem;
  }
複製程式碼

動畫

transform:
- scale 等比縮放，scale(x, y)、scaleX()、scaleY() 可以使用負數，效果：細長字型，字型反轉
- skew 傾斜單位: degress (度) transform: skew(100deg,100deg) grad (百分度) transform: skew(10grad,10grad) rad（弧度）一個完整的圓為2π transform: skew(10rad,10rad) turn (圈數) 一個完整的圓為1turn transform: skew(0.25turn，1.2turn) 可以為負數
- rotate 旋轉單位同skew, rotate(n)相等於rotateX(n)、totateY(n)、rotateZ(n)、rotate3d(x,y,z,angle);
- translate：平移 transform: translate(x,y)、translateX(n)、translateY(n)
transition：transition: property-color duration timing-function; transition: height 0.3s ease;
- transition-property: 指定過渡屬性
- transition-duration: 過渡持續時間
- transition-delay: 過渡開始之前需要等待的時間單位：s，ms
- transition-timing-function: 指定動畫運動時的節奏
animations：用來指定一組或多組動畫，每組之間用逗號相隔，支援IE10以上
- animation-name: 指定應用的一系列動畫，每個名稱代表一個由@keyframes定義的動畫系列
```
  .anim{
    animation-name:jump;
  }
  @keyframes jump{
    form{
      top: 100;
    }
    to{
      top: 0
    }
  }  
複製程式碼
```
- animation-duration：指定動畫週期的時長預設為0 無動畫
- animation-iteration-count：定義動畫執行的次數預設執行一次取值為 infinite 則為無限迴圈，不可以為負數，可以為小數
- animation-direction：動畫播放方向
- animation-timing-function：每個動畫週期執行的桀紂，作用於一個關鍵幀週期而非整個動畫週期同 transition-timing-function

css Hack

說明：針對不同的瀏覽器寫不用的CSS,就是CSS Hack

條件Hack

只在IE下生效
<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
這段文字只在IE6瀏覽器顯示
<![endif]-->

只在IE6以上版本生效
<!--[if gte IE 6]>
這段文字只在IE6以上(包括)版本IE瀏覽器顯示
<![endif]-->

只在IE8上不生效
<!--[if ! IE 8]>
這段文字在非IE8瀏覽器顯示
<![endif]-->

非IE瀏覽器生效
<!--[if !IE]>
這段文字只在非IE瀏覽器顯示
<![endif]-->  
複製程式碼

屬性級Hack

hack	寫法	例項	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)	IE9(S)	IE9(Q)	IE10(S)	IE10(Q)
*	*color	青色	Y	Y	Y	Y	N	Y	N	Y	N	Y
+	+color	綠色	Y	Y	Y	Y	N	Y	N	Y	N	Y
-	-color	黃色	Y	Y	N	N	N	N	N	N	N	N
_	_color	藍色	Y	Y	N	Y	N	Y	N	Y	N	N
#	#color	紫色	Y	Y	Y	Y	N	Y	N	Y	N	Y
\0	color:red\0	紅色	N	N	N	N	Y	N	Y	N	Y	N
\9\0	color:red\9\0	粉色	N	N	N	N	N	N	Y	N	Y	N
!important	color:blue !important;color:green;	棕色	N	N	Y	N	Y	N	Y	N	Y	Y

選擇符Hack 最常見的是

*html *字首只對IE6生效  
*+html *+字首只對IE7生效  
@media screen\9{...}只對IE6/7生效  
@media \0screen {body { background: red; }}只對IE8有效  
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效  
@media screen\0 {body { background: green; }} 只對IE8/9/10有效  
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效  
複製程式碼