一：字體屬性
（1）寬/高
（1）width:為元素設置寬度
（2）height:為元素設置高度
PS：塊級標簽才能設置寬度/高度 行內標簽存放文本大小
例如：
p{ width: 30px; height: 30px; }
（2）字體樣式：
關鍵字：font-family
作用：更改字體的樣式
例如：
{
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}
（3）字體大小:
關鍵字：font-size
作用：更改用戶的字體大小
例如：
p{ font-size: 30px; }
（4）字重:
關鍵字：font-weight
作用：對字體加重或者減輕
例如：
{
/*加重*/
font-weight: bolder;
/*減輕*/
font-weight: lighter;
}
（4）文字顏色:
關鍵字：color
作用：更改樣式的顏色
例如：
{
/* 方式一*/
/*color: red;*/
/*方式二*/
/* color: rgb(255,255,255);*/
/* 方式三
第四個參數調整透明度（0-1）*/
/*color: rgba(255,255,255,0.1); */
/* 方式四*/
color: #ff0000;
}
（5）文字對齊
關鍵字：text-aline
作用：調解文字位置
例如：
/*居中*/ text-align: center; /*左對齊 默認*/ text-align: left; /* 右對齊*/ text-align: right;
（5）文字裝飾
關鍵字：text-decoration
作用：對文字進行裝飾
例
{
/* 文字下面沒有任何裝飾 適用於超鏈接 超鏈接下沒有任何橫線*/
text-decoration: none;
/* 下划線*/
text-decoration: underline;
/* 上划線*/
text-decoration: overline;
/*穿過文字 有點類似於刪除*/
text-decoration: line-through;
}
如：
（6）文字縮進
關鍵字：text-indent
作用：文本進行縮進
{
text-indent:32px ;
}
二：背景屬性
（1）關鍵字：background
（2）作用：對背景進行操作
{
/*背景顏色*/
background-color: red;
/* 背景圖片*/
background-image: url("111.png");
/* 默認鋪滿整個屏幕*/
background-repeat:repeat ;
/* 禁止背景重復*/
background-repeat: no-repeat;
/* 水平方向重復*/
background-repeat: repeat-x;
/*垂直方向重復*/
background-repeat: repeat-y;
/*背景位置*/
background-position: center;
}
（3）語句整合
例如：
background: red center url("111.png");
（4）使被裝飾的屬性 固定不動
關鍵字：background-attachment: fixed;
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滾動背景圖示例</title> <style> * { margin: 0; } .box { width: 100%; height: 500px; background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg") center center; background-attachment: fixed; } .d1 { height: 500px; background-color: tomato; } .d2 { height: 500px; background-color: steelblue; } .d3 { height: 500px; background-color: mediumorchid; } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="d3"></div> </body> </html> 圖片不動
三：邊框
關鍵字：border
作用：給被裝飾的對象加上邊框
（1）邊框屬性
（1）border-width:邊框粗細
（2）border-color：邊框顏色
（3）border-style：邊框樣式
（2）邊框樣式
例如（1）：
{
/*邊框顏色*/
border-color: blue;
/*邊框粗細*/
border-width: 3px;
/*邊框樣式*/
border-style: dashed;
}
（2）也可以單獨為某一個邊框設置樣式
例如（2）：
{
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
（3）border-radius：
作用：
（1）可以使邊框變的圓滑
（2）設置寬高為邊框的一半 可以設置成一個圓
例如：
{
width: 100px;
height: 100px;
border: 3px solid black;
background-color: red;
/*設置為邊框的一半*/
border-radius: 50%;
}
四：display屬性
（1）none：
（1）元素存在 但是在瀏覽器中不存在
（2）瀏覽器中的空間也不存在
例如：
{
display: none;
}
（2）bolck：將行內標簽轉換成塊標簽 可以設置行內標簽的一些屬性值
例如：
{
width: 100px;
height: 100px;
border: 3px solid red;
/*將行內標簽 轉換成塊標簽*/
display: block;
}
（3）inline：將塊級元素 按行內元素顯示
例如：
.c1{ width: 100px; height: 100px; border: 3px solid red; /*將塊標簽 轉換成行標簽*/ display: inline; } .c2{ width: 100px; height: 100px; border: 3px solid blue; /*將塊標簽轉換成行標簽*/ display: inline; }
（4）inline-block 使元素同時含有行內標簽以及塊標簽的特點
PS：
display:"none"與visibility:hidden的區別：
（1）visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
（2）display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失
五：CSS盒子模型
（1）margin：控制標簽與標簽的距離
（2）border：內邊距與內容外的邊框
（3）padding：內部文本到邊框的距離
（4）content：內部文本的邊框
如圖：
（1）marg外邊距
.margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; }
簡寫：
margin: 5px 10px 15px 20px;
順序：邊框順時針 上右下左
（2）內填充：
.padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }
補充padding的常用簡寫方式： （1）提供一個，用於四邊； （2）提供兩個，第一個用於上－下，第二個用於左－右； （3）如果提供三個，第一個用於上，第二個用於左－右，第三個用於下； （4）提供四個參數值，將按上－右－下－左的順序作用於四邊
六：float浮動
【1】基本概念
（1）在CSS樣式中任何元素都可以浮動
（2）浮動之后會生成一個塊級框 不論其本身是何種元素
【2】浮動的特點：
（1）浮動的邊框可以向左或者向右移動 如果碰到另外一個邊框會立馬停止浮動
（2）浮動的文本不在普通的文檔流中
【3】取值方式
（1）left：左浮動
（2）right：右浮動
（3）none：沒有浮動
【4】clear:
作用：其規定了元素那一側不許浮動
例如：
PS:當上述元素三遇到浮動元素的時候 會重新開辟一行
例如：
.c1{ height: 1000px; float: left; width: 20%; background-color: bisque; } .c2{ height: 1000px; float: right; width: 80%; background-color: antiquewhite; }
（2）清除浮動的三種方式
（1）固定高度
（2）偽元素選擇（最多）
（3）overflow hidden
例如：
{
clear: both;
display: block;
content: '';
}
五：overflow溢出屬性
（1）屬性：
（1）visible：默認屬性溢出的屬性不會被修剪
（2）hidden：內容會被修剪 並且溢出內容不可見
（3）scroll：溢出的內容會被修剪 但是瀏覽器會以滾輪的形式 查看溢出的部分
（4）auto：如果內容被修剪 瀏覽器會以滾動條查看修剪的內容
（2）方式設置：
（1）overflow：水平垂直方向均設置
（2）overflow-x：水平方向設置
（3）overflow-y：垂直方向設置
例如：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>圓形的頭像示例</title> <style> * { margin: 0; padding: 0; background-color: #eeeeee; } .header-img { width: 150px; height: 150px; border: 3px solid white; border-radius: 50%; overflow: hidden; } .header-img>img { width: 100%; } </style> </head> <body> <div class="header-img"> <img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt=""> </div> </body> </html>
六：定位
關鍵字：position
（1）static：默認值 不能當做定位的參照物
（2）relative（相對定位）：相當於自己當前的標簽
（3）absolute（絕對定位）：相對於已經定位的父標簽
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>絕對定位</title> <style> .c1 { height: 100px; width: 100px; background-color: red; float: left; } .c2 { height: 50px; width: 50px; background-color: #ff6700; float: right; margin-right: 400px; position: relative; } .c3 { height: 200px; width: 200px; background-color: green; position: absolute; top: 50px; } </style> </head> <body> <div class="c1"></div> <div class="c2"> <div class="c3"></div> </div> </body> </html> 絕對定位
（4）fixe（固定定位）：相對於瀏覽器窗口 固定在某個位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>返回頂部示例</title> <style> * { margin: 0; } .d1 { height: 1000px; background-color: #eeee; } .scrollTop { background-color: darkgrey; padding: 10px; text-align: center; position: fixed; right: 10px; bottom: 20px; } </style> </head> <body> <div class="d1">111</div> <div class="scrollTop">返回頂部</div> </body> </html> 返回頂部按鈕樣式示例
【2】
（1）：脫離文檔流
（1）浮動元素脫離文檔流
（2）絕對定位脫離文檔流
（3）固定定位脫離文檔流
（2）：不脫離文檔流
（1）相對定位不脫離文檔流
七：模態框
關鍵字：z-index
作用：設置對象的層疊順序
- z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
- 只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
- z-index值沒有單位，就是一個正整數，默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
- 從父現象：父親慫了，兒子再牛逼也沒用
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>自定義模態框</title> <style> .cover { background-color: rgba(0,0,0,0.65); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; } .modal { background-color: white; position: fixed; width: 600px; height: 400px; left: 50%; top: 50%; margin: -200px 0 0 -300px; z-index: 1000; } </style> </head> <body> <div class="cover"></div> <div class="modal"></div> </body> </html> 自定義模態框示例
八：opacity
（1）用來定義透明效果。取值范圍是0~1，0是完全透明，1是完全不透明。
（2）其不但能透明文本效果 也可以透明圖片效果