定位屬性居中
水平垂直居中
/* 居中元素Add CSS*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*居中元素根據內容給出寬度，也就是說可以居中包裹的子元素，但子元素寬度如果寬度超出550px將自動換行。*/
方式2：
/* 居中元素Add CSS*/
width: 600px;
height: 600px;
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
margin: auto;
方式3：
/* 父元素Add CSS*/
width: 600px;
height: 600px;
display:flex;
/* 居中Add CSS*/
margin:auto;
/* 居中元素根據內容給出寬度，也就是說可以居中包裹的子元素，但子元素寬度超過祖先元素寬度將自動換行。*/
水平居中
方式1：
/* 居中Add CSS*/
width: 600px;
height: 600px;
margin:0 auto;
方式2：
/* 父元素Add CSS*/
width: 600px;
height: 600px;
position:relative;
left:50%;
/* 居中元素Add CSS*/
width: 600px;
height: 600px;
position:relative;
right:50%;
水平居中內聯元素
父元素Add CSS
width: 600px;
text-align: center;
垂直居中內聯元素
父元素Add CSS
height: 500px;
line-height: 500px;
定位的元素控制層疊順序
position:abstract;
z-index:-1;
清除浮動的影響
1 父元素添加樣式
overflow:hidden
2 父元素添加樣式
overflow:auto
3 浮動元素後加空標籤，並設置樣式
clear:both
4 父元素設置寬高
5 父元素添加樣式
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
讓文字消失
父元素Add CSS
display: block;
text-indent: -999em;
圖片處理
圖片等比縮放
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
圖片大於父元素居中
pa{text-aline:center;}
son{margin:0 -100%}
!important 增加樣式權重 語法：
樣式名：值 !importan;
圖片元素在相對於內聯元素垂直居中
vertical-align: middle;
屏幕慣性滾動
-webkit-overflow-scrolling:touch
網站前端三劍客之一CSS，網頁表示層。
<link href="css/index.css" rel="stylesheet"> 外聯樣式
<style type="text/css"></style> 內部樣式
<div style="屬性: 值"></div> 標籤樣式
參考屬性
尺寸
width 設置元素的寬度。
height 設置元素高度。
max-width 設置元素的最大寬度。
min-width 設置元素的最小寬度。
border 邊框
border: 1px solid red; 設置四條邊框的線寬、樣式、顏色
border-top: 1px solid blue; 設置上邊框的線寬、樣式、顏色
background 背景
background-color: red; 設置背景的顏色;
background-image: url("images/background01.jpg"); 設置背景圖像
background-position: center; 規定背景圖像的位置。
background-size: 100%; 設置背景圖像的大小。
background-repeat:noset; 設置背景圖像重複規則。
background-origin: border-box; 設置背景圖像在邊框或在內容中顯示。
background-clip:padding-box 設置背景在內邊距或在內容中顯示。
background-attachment:fixed; 設置背景圖像是否固定或者隨着頁面的其餘部分滾動。
display 元素顯示類型
display:inline-block 內聯塊元素
① 元素並在一行 ② 支持全部樣式
③ 寬高由內容決定 ④ 元素換行會產生間距
position 定位類型
position:relative; 相對定位 以自身元素進行定位，佔據偏移前的位置
position:absolute; 絕對定位 以有定位屬性的父級元素邊界進行定位，直到body，不佔位置
position:fixed; 綁定定位 以瀏覽器窗口進行定位，不佔位置
top/right/buttom/left 與定位元素一同使用
float 浮動
float:left 左浮動
①浮動元素自動轉換成內聯塊元素 ②浮動元素脫離標準流
③浮動元素停靠在父元素邊界、其他浮動元素、未浮動元素
overflow 內容溢出
overflow:hidden; 隱藏溢出內容
vertical-align 垂直對齊
visibility 可見
z-index 堆疊順序
邊距
padding 內邊距
padding: 5px; 設置四個方向的內邊距
margin 外邊距
margin: 5px; 設置四個方向的外邊距
文本
text-align 文本對齊
text-align: center; 文本水平居中
line-height 行高
line-height:自身高度; 文本垂直居中
color 文本顏色
font 字體
font-family 設置字族
font-amily:"Microsoft yahei","宋體"; 設置第一、第二字體
font-size
font-size:14px; 14px大小的字體
outline 輪廓
transition 過渡
transition-property 需要過渡的屬性名
transition-duration 持續時間
transition-timing-function 時間曲線
transition-delay 延時過渡
2D轉換
transform
transform-origin 更改轉換元素的位置
rotate(angle) 旋轉角度
translate() 根據左和頂部位置給定的參數，從當前元素位置移動。
scale() 該元素增加或減少的大小（寬高）
動畫
@keyframes 創建動畫
animation 綁定動畫