1.盒模型
padding 內間距
默認狀態下設置的寬高爲內容的寬高，
標籤的大小 = 內容大小+內間距大小+邊框大小
內容大小不變的情況下 間距和邊框越大，則標籤越大
設置 box-sizing : border-box 以後
設置的寬高 就爲整體的寬高，而不是內容區的寬高
內容區的寬高就爲整體寬高-內間距-邊框
所以：設置寬和高爲 內容區+內間距+邊框 用 box-sizing : border-box
2.
用display : none ; 來設置標籤消失時，標籤的位置也消失
用visibility : hidden ; 設置標籤消失時，標籤不可見但是 標籤位置保留
3.
overflow : hidden; 隱藏溢出內容 ，消除滾動軸
display : flex ; 用來設置開啓彈性佈局
justify-content : center ; 用來設置水平方向居中顯示
align-items : center ; 用來設置垂直方向 居中顯示
<title>display空間分配</title>
<style>
body{
/* 開啓彈性佈局以後 所有的子標籤會在同一行顯示 */
display:flex;
}
section{
height:400px;
border:1px solid red;
/* 設置每個section的大小 */
flex-basis: 25%;
}
/* 當有標籤設置了order值 有的標籤沒有設置order值
那麼會先排列所有沒有設置order值的標籤
然後在後面排列設置了order值的標籤
當兩個標籤的order值一樣的時候
先出現的標籤會排列在前面 */
section:nth-child(1){
order:3;
}
section:nth-child(2){
order:1;
}
/*
section:nth-child(3){
order:2;
}
section:nth-child(4){
order: 1;
} */
</style>
</head>
<body>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</body>
flex-grow : __; 子標籤佔父標籤的幾份
flex-wrap : wrap ; 換行
align-items : baseline ; 設置所有的文本的底部在同一水平線上
border-radius : 15px ; 設置角度
4.
3d旋轉
perspective：100px； 用多遠的距離觀察
animation : zhuan 1s linear inlinite ; 設置旋轉屬性
transform-style : preserve-3d ; 保留標籤在3d座標系中的位置
keyframes關鍵幀
rotate旋轉 使旋轉