css記錄

css記錄

瀏覽器前綴：

-ms-		/* IE 9 */
-webkit-	/* Safari and Chrome */
-o-		/* Opera */
-moz-	/* Firefox */

css動態設置變量值（IE兼容不佳）：

/* 回退值 */


:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color, blue);  //blue 是默認值
}

絕對相對居中定位

 

自適應：

min-width:1200px;

max-width:1440px;

margin:0 auto;

float:left/right;

overflow:hidden;

去除浮動（float）：

1、overflow:hidden;

2、增加 div 空標籤將其style設置爲clear：both；

媒體查詢：

1200px到 1440px 寬度 - 添加操作

@media screen and (max-width: 1440px) and (min-width: 1200px){}

選擇器：

[class*="col-"]

a.active       a:hover:not(.active)

 

input去除padding而增加長度（盒子模型設置爲box-sizing: border-box;去除padding對長度的影響）
input{

box-sizing: border-box;

padding-left: 15px;

}

.login input::-webkit-input-placeholder {
    color: #C8C8C8;
    /* padding-left: 21px; */
}

盒子模型：

 box-sizing: border-box;

即：padding不會影響到盒子大小

width(寬) + border(邊框) = 元素實際寬度

height(高)  + border(邊框) = 元素實際高度

默認情況下，元素的寬度與高度計算方式如下：

即：box-sizing：content-box;(默認)

width(寬) + padding(內邊距) + border(邊框) = 元素實際寬度

height(高) + padding(內邊距) + border(邊框) = 元素實際高度

字體：

@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
}

div
{
font-family:myFirstFont;
}

css陰影

box-shadow: 10px 10px 5px #888888;

css漸變

 background: linear-gradient(red,yellow,blue); 

2d旋轉

div
{
transform: translate(50px,100px);//左側移動 50 像素，從頂端移動 100 像素。
transform: rotate(30deg);//正順負逆
transform: scale(2,4);//X,Y
transform: skew(30deg,20deg);//圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度。transform:matrix(0.866,0.5,-0.5,0.866,0,0);//matrix() 方法把所有 2D 轉換方法組合在一起。
}

3d旋轉

div
{
transform: rotateX(130deg);
transform: rotateY(130deg);
}

css過渡

div
{    width:100px;

      height:100px;
      transition:width 2s linear 2s;, height 2s linear 2s;, transform 2s linear 2s;

     //transition-property: width;transition-duration: 1s;transition-timing-function: linear;transition-delay: 2s;
}

div:hover{ 

 width:300px;

height:300px;
               }

css動畫

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: myfirst 5s linear 2s infinite alternate;
//animation-name: myfirst;animation-duration: 5s;animation-timing-function: linear;
//animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;
//animation-play-state: running;
}