目錄
控制標簽元素樣式
小心得：
樣式有繼承(遺傳)效果（子元素將繼承父元素的樣式，如果子元素單獨設置了該樣式，那么子元素的樣式就是子元素單獨設置的樣式） （可以做統一設置）
注意在調樣式時，加了沒用的樣式記得刪除掉（避免造成沖突，對后續新增的樣式造成影響）
當然你先要排除樣式沖突時選擇器優先級導致的情況（class=“d1” id=“id1” --> #id{color: red;} 中間一堆css代碼 .d1{color: red;}，你會發現 d1的css代碼中color不生效，沖突，且優先級不夠）
注意行內元素（標簽）和塊級元素的區別
行內元素的寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)設置無效（padding/margin-left/right還是有效的），測試參見博客：行內元素的padding和margin是否無效
長寬屬性、字體屬性、文本對齊、文本裝飾、首行縮進
div{
------------長寬屬性--------
設置長寬只對塊級標簽有效（沒有占滿一行會自動用margin占位）
width: 300px;
height: 300px;
}
p{
------------字體屬性--------
文字字體
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif;
字體大小
font-size: 24px;
字重
font-weight: lighter;
字體顏色
color: red;
color: #ffffff;
color: rgb(0,0,0);
color: rgba(0,0,0,0); 最后一個參數a只能調節顏色透明度，不能調節文本
------------文字對齊--------
text-align: center;
text-align: left;
text-align: right;
text-align: justify; 好像沒效果
垂直對齊
line-height: 50px; 垂直對齊（這個50是它父標簽的高度，在父標簽中垂直對齊）
------------文字裝飾（可以改a標簽屬性）--------
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through; 和 <s></s> 的效果一樣
text-decoration: none; 一般給<a></a>加
------------首行縮進--------
font-size: 16px
text-indent: 32px; 調成字體大小的兩倍，就是空兩格
}
背景屬性、邊框屬性、圓角
div{
------------背景屬性--------
背景顏色
color: white;
background-color: black;
背景圖片
width: 400px;
height: 400px;
background-image: url("1.png");
重復
background-repeat: no-repeat; 不重復
background-repeat: repeat-x; 水平方向重復
background-repeat: repeat-y; 垂直方向重復
背景位置（精靈圖）
background-position: center center; 第一個參數調節左右，第二個參數調上下， 負的的是反過來的，x負的，從右往左移
簡寫
background: black no-repeat center center;
固定背景（窗口背景的效果）
background-attachment: fixed;
------------邊框屬性--------
border-color: red;
border-style: solid;
border-width: 1px;
簡寫
border: 1px solid red; 順序無所謂，可以調線寬、虛實線型、邊框顏色
border-left: 1px solid red; 可以單獨設置不同的邊
------------圓角（畫圓）--------
border-radius: 50%; 園
}
雪碧圖/精靈圖（比較老的技術） 【教你來使用雪碧圖（CSS sprite）】、【雪碧圖／精靈圖使用教程（CSS Sprites）】
利用的是
background-position svg（可以了解一下）
display 顯示方式
div{
------------display顯示方式-------
display: none; 標簽不顯示，且不再占位置
visibility: hidden; 標簽不顯示，但是位置還占着(透明度應該也可以實現)
display: block; 轉換成塊級元素（標簽）（可以設置長寬）
display: inline; 轉換成行內元素（長寬會失效，沒有內容會直接看不到（行內元素的大小是由內容決定的））
display: inline-block; 既有塊級標簽能設置長寬的特點，又有行內標簽都在一行的特點
陰影
box-shadow: 3px 3px grey;
}
盒子模型 margin、padding...
div{
------------盒子模型--------
外邊距（margin）、邊框（border）、內邊距（padding）、內容本身大小（content）
外邊距： 標簽與標簽的距離（兩個盒子之間的距離）
邊框： 邊框（盒子厚度）
內邊距：內容與邊框的距離（盒子里物體和盒子邊框的距離）
內容：標簽內的內容（盒子里放的東西）
margin: 5px 10px 15px 25px; 上右下左（順時針）參數效果不同，根據瀏覽器調調看就行了，不用記
margin: 0; body自帶8px的外邊距，子元素會繼承這一特性（驗證一下*****）
margin: 0 auto; 水平居中（垂直沒用，padding用不了auto）
margin-top: 10px; 上邊距10px
border: 3px solid red;
padding: 10px; 寫法和margin差不多，只是作用對象（外邊距/內邊距）不一樣
}
科普（可以谷歌檢查去看該元素的盒模型，然后把不需要的改成0）
body自帶8px的外邊距margin
p標簽默認自帶 16px（根據字體大小來的）的外邊距
ul自帶40px的padding內邊距
float浮動
浮動的元素是脫離正常文檔流的，也就意味着沒有獨占一行之說，也不再占用原來的位置（不會把父元素撐大）-----浮動的元素會造成父標簽塌陷
.c1{
float: left; 浮動之后就相當於浮起來了，脫離了文檔流，有多大就多大
}
div{
# clear 清除浮動帶來的父標簽塌陷,
clear: left; clear left 左邊不能有浮動元素，如果有，另起一行（變向撐大父標簽）
}
清除浮動的終極寫法（要想用的地方加上這個class即可 --> class="clearfix"）
.clearfix:after{ clearfix清除浮動的通用名字
content: '';
display: block;
clear: both; 左右兩邊都不能有浮動的元素
}
這里的線是邊框（不然div沒有內容沒有沒有邊框會直接看不出來）
overflow 清除溢出（超出div大小的部分）
div{
overflow: hidden;
overflow: auto; 自適應，有個滾動條可以看
overflow: scoll; 有水平和垂直滾動條
overflow: visible; 默認值，不會清除溢出，直接顯示
overflow-x: auto; 可以設置水平的溢出
overflow-y: auto; 可以設置垂直的溢出
（圓形頭像）圖片最大寬度
max-width: 100%;
width: 100%; 和上面一樣
}
position 定位
相對定位
相對於標簽自身原來的位置做一個定位絕對定位
相對於已經定位過的父標簽做一個定位（購物車展開）
*** 當只給你一個父標簽的屬性讓你做定位時，就用絕對定位
固定定位
相對於瀏覽器窗口，一直固定在某個位置（回到頂部）
所有標簽默認都是靜態的，無法直接調節位置
div{
position: static; 默認值，靜態的，top、left無法改變位置
position: relative;
top: 100px;
left: 50px;
position: fixed;
bottom: 100px; 這些都是相對於瀏覽器而言的了
right: 60px;
}
想用絕對定位一定要先讓父元素定位（position: relative; 不用指定 top 、left等，不會影響父元素位置），自身再postion: abosulte; top: 50px; left: 50px
瀏覽器會優先展示文本內容，哪怕文本被蓋住了（瀏覽器做的優化）
對文檔流的影響
參考鏈接（可以了解一下）：css層疊順序探究
浮動的元素都是脫離文檔流的
相對定位（relative）的元素不是脫離文檔流的
絕對定位（absolute）的元素也是脫離文檔流的（只要變了就脫離文檔流了）
固定定位（fixed）的元素也是脫離文檔流的（只要變了就脫離文檔流了）
z-index 層級
模態框（百度登錄）
<!--模態框案例-->
<!--文檔流默認值 0-->
<!--只要比上一個大，就在上面-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(128,128,128,0.45);
z-index: 999;
}
.modal {
height: 200px;
width: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
z-index: 1000;
margin-top: -100px;
margin-left: -200px;
}
</style>
</head>
<body>
<div>我是最底層的</div>
<div class="cover"></div>
<div class="modal">
<p><label for="d1">username:<input type="text" id="d1"></label></p>
<p><label for="d2">password:<input type="text" id="d2"></label></p>
<input type="submit">
</div>
</body>
</html>
opacity 標簽整體透明度
p{
opacity: 0.4; 可以調節顏色、字體等屬性的透明度
}
去掉li 前面的標識
li{
list-style: none;
或
list-style-type: none;
}
文本垂直居中
多行垂直劇中可參考：CSS多行文字垂直居中的兩種方法
有很多種寫法，但其他的不太熟悉，還是比較習慣這個
.text-center{
height: 50px; div的高度
line-height: 50px; 此時文本就可以居中了
border: 2px solid red; 加個邊框讓效果更明顯一點
}
單行文本居中
作業案例
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style rel="stylesheet">
body{
margin: 0;
background-color: lightgrey;
}
.blog-left{
width: 18%;
float: left;
background-color: darkslategrey;
text-align: center;
color: darkgray;
position: absolute;
height: 100%;
}
.blog-right{
width: 82%;
float: right;
padding-bottom: 10%
}
.avatar{
width: 60%;
border: 5px solid white;
border-radius: 50%;
margin: 50px auto;
overflow: hidden;
}
.avatar img{
width: 100%;
}
.blog-left p{
font-size: 20px;
}
.blog-left ul{
list-style: none;
padding: 0;
font-size: 26px;
margin-top: 70px;
}
.blog-left ul li a{
text-decoration: none;
color: darkgray;
}
.blog-left ul li a:hover{
text-decoration: none;
color: whitesmoke;
}
.blog-article{
width: 95%;
background-color: white;
margin: 20px;
box-shadow: 3px 3px grey;
border-radius: 10px;
}
.blog-article hr{
margin: 0;
}
.title h1{
border-left: 5px solid rgb(235,50,35);
padding-left: 30px;
display: inline-block;
float: left;
margin: 0;
}
.title b{
display: inline-block;
float: right;
padding: 14px;
padding-bottom: 0px;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.content{
border-bottom: 2px solid darkslategrey;
padding: 20px;
}
.bottom-tag{
padding: 15px;
}
</style>
</head>
<body>
<div class="blog-left">
<div class="avatar">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567680319452&di=760a1964b01400d5f7a9e25bc93e480c&imgtype=0&src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-ae5a069afcdd54e74fffbd73ca66a538_hd.jpg" alt="">
</div>
<p>tank的博客</p>
<p>更禿更強！</p>
<ul>
<li><a href="#">關於我</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">微信公眾號</a></li>
</ul>
<ul>
<li><a href="#">#Python</a></li>
<li><a href="#">#Java</a></li>
<li><a href="#">Golang</a></li>
</ul>
</div>
<div class="blog-right">
<div class="blog-article">
<div class="title clearfix">
<h1>重金求子</h1>
<b>2019-5-29</b>
</div>
<div class="content">重金求子，事成送賢淑老公一枚！</div>
<div class="bottom-tag">#生活 #八卦</div>
</div>
<div class="blog-article">
<div class="title clearfix">
<h1>重金求子</h1>
<b>2019-5-29</b>
</div>
<div class="content">重金求子，事成送賢淑老公一枚！</div>
<div class="bottom-tag">#生活 #八卦</div>
</div>
<div class="blog-article">
<div class="title clearfix">
<h1>重金求子</h1>
<b>2019-5-29</b>
</div>
<div class="content">重金求子，事成送賢淑老公一枚！</div>
<div class="bottom-tag">#生活 #八卦</div>
</div>
</div>
</body>
</html>
上述代碼頁面效果
關於自適應（不需要了解）
參考博客：純CSS3使用vw和vh視口單位實現自適應（僅個人興趣，把覺得不錯的文章放個連接）