css選擇器：
标簽選擇器、類選擇器（class>>>黑點）、id選擇器（#）、通配符選擇器（*）
注意：通配符選擇器代表頁面所有的的标簽名，可以去掉浏覽器自帶的間距，如下代碼所示：
*{
margin:0; /*外間距*/
padding:0; /*内間距*/
}
并集選擇器
div,p,h3{
/*三個标簽顯示相同的屬性，如三個都顯示背景顔色為紅色*/
}
交集選擇器
精準的找到要渲染的标簽，在類選擇器和id選擇器前添加需要渲染的标簽
p.javayu{
/*類選擇器*/
}
-----------------
p#javayu{
/*id選擇器*/
}
派生（後代）選擇器
ol li strong{
/*後代選擇器：空格隔開*/
/*注意： 層級的嵌套最好不要超過3個以上，隻需要保留一些關鍵節點*/
}
------------
ol li{
list-style: none; /*去掉ol、li前面的小黑點*/
}
子代選擇器
div>p{
/*隻作用于兒子這一代*/
}
<div>
<p></p>
<p></p>
</div>
------------
<mark></mark> /*自帶黃色*/
相鄰兄弟選擇器
strong+span{
/*隻有3起作用 */
/*加号前面的選擇器隻是用來作為查找兄弟的參照标簽，她不參與樣式的影響*/
/*尋找strong标簽的兄弟，而且是要緊挨着的兄弟才可以*/
/* ~ : 所有兄弟》》》3、4起作用 */
}
<div>
<span>1</span>
<strong>2</strong>
<span>3</span>
<span>4</span>
</div>
屬性選擇器
[za]{
/*屬性：分為标簽天生自帶 和 我們自定義的标簽屬性*/
/* 符号:[屬性名]*/
}
<div za="as"></div>
-----------------------
[za="as1"]{
/*精準找到哪一個标簽渲染*/
/* 符号:[屬性名="屬性值"]*/
}
<div za="as"></div>
<div za="as1"></div>
僞類選擇器
input:blur{
/*失去焦點*/
}
新增
ul li:not(:last-child){
/* :last-child 最後一個子元素*/
/*除了做最後一個 li 沒有右邊框線，其餘都有*/
border-right:10px solid #000
}
<ul>
<li></li>
<li></li>
<li></li>
</ul>
-----------------------------------
:nth-child(n) >>n表示具體的第幾個，n可以使odd/2n+1奇數、even/2n偶數
:only-child >>僅僅、唯一隻有一個起作用
:nth-last-child(n) >>倒數第幾個元素起作用
:first-of-type >>第一同級兄弟元素起作用
:last-of-type >>最後一個同級兄弟元素起作用
:only-of-type >>隻有一個同級兄弟元素起作用
:nth-of-type(n) >>第幾個同級兄弟元素起作用
:nth-last-of-type(n) >>倒數第幾個同級兄弟元素起作用
:empty >>空内容
僞元素選擇器
:first-line >>第一行文字内容起作用
:first-letter >>第一文字起作用
:before >>元素之前添加内容
:after >>元素之後添加内容
--------------
li{
list-style:none;
display: inline-block; /*行内塊*/
}
/* 添加分割線*/
li:after{
/*display: inline-block;>>不獨占一行*/
/*確定是一個塊>>>隻要設定寬度不起作用，就要加 “塊”display: block;*/
display: inline-block; /*display: block; >>獨占一行 */
content: ""; /* 這個屬性不能省略，如果沒有，則 before/after後的渲染不會起作用*/
width:2px;
heigh:20px;
margin: 0 10px; /* 上下0，左右10*/
background-color: #000;
vertical-align: bottom; /* 基線對齊 */
}
<li></li>
<li></li>
css權重及規則
标簽選擇器 權重
div 1
---------------------------
class/類選擇器 權重
.right 10
---------------------------
id選擇器 權重
#right 100
---------------------------
通配符選擇器 權重
* 0-1
---------------------------
後代、子代、交集、并集、相鄰兄弟、兄弟->>>>>權重：每個單獨的選擇器的權重相加之和
注意：1、權重如果相等，遵循就近原則，下面的會覆寫上面的渲染
2、權重相等，不遵循就近原則》》》》使用 !important-》》(權重1000)，比ID大
3、權重大小：!important > id > class > 标簽 > *
不可以繼承的屬性
1、display：inline、 block、inline-block、table-cell、none
2、文本類：盒子模型、背景類、浮動類、定位類
可以繼承屬性
1、字型系列的樣式屬性
2、文本系列的樣式屬性：text-align、line-height、text-indent
盒子模型
盒子寬度和高度機關：
1、px : 像素寫死
2、%： 動态計算的機關（自适應，響應式）
1、橫向滾動條自适應
.banner img{
width: 100%;
}
内邊距padding
padding:10px; /*上、右、下、左 = 10px*/
padding:10px 20px; /*上、下= 10; 左、右 = 20px*/
padding:10px 20px 30px; /*上=10px; 左、右 = 20px; 下= 30px*/
padding:10px 20px 30px 40px; /*上右下左*/
注意：内邊距會影響盒子在浏覽器中的實際寬度和高度的大小
邊框border
border: 邊框的寬度 邊框線的類型 邊框線的顔色
邊框線的類型：solid 實線、dashed 虛線、dotted 點狀線
注意：border會影響實際的盒子的寬度和高度的大小。
/*如果沒有指明方向，表示四個方向都有邊框線而且邊框相等*/
隻需要上邊框線：
border-top: 10px solid #000;
-----------------------------
去掉邊框線：
border:0;
注意：如果border屬性隻有邊框寬度，沒有邊框線的類型和顔色，導緻border屬性失效。
如-》 border-top: 10px; ->上邊框失效為0
/*三角圖示的實作*/
.arrow{
/*三角形的大小由寬高控制，三角形的粗細由border邊框線的寬度控制*/
width: 200px;
height: 200px;
/*整體下移*/
margin-top: 50px;
border-top: 10px solid #000;
border-left: 10px solid #000;
/*rotate旋轉角度>>deg角度放入機關*/
transform: rotate(45deg);
}
--------------------------------
/*三角形實作*/
.triangle{
width: 0px;
height: 0px;
border-width: 100px; /*控制三角形的大小*/
border-style: solid;
border-color: red transparent transparent transparent; /*transparent透明*/
}
--------------------------------
border-radius: 40px; /*控制圓角*/
外邊距margin
/*margin跟padding内邊距的方位值和取值情況一樣》》》上、右、下、左*/
注意：并列兩個盒子，一個盒子，有上邊距，另外一個有下邊距，會出現margin外邊距的重疊問題=》最終的邊距》》去最大值
---------------------------------
/*margin相容問題的處理： 大盒子裡嵌套小盒子>>>此時給小盒子加margin-top,不但沒有實作和大盒子的間距，反而傳遞到大盒子上，導緻整體下移*/
1、加在大盒子屬性：
overflow:hidden; /*解決margin-top傳遞問題》》此處不是溢出隐藏*/
或者：
padding-top: 1px; /*這種方法會影響實際的寬高，需要在height/width的基礎上減去響應的像素值*/
或者：
border-top:1px solid transparent; /*這種方法會影響實際的寬高*/
或者：
/*不需要在子元素（小盒子》》第二個div）添加margin-top: 20px; */
padding-top: 20px; /*隻需要在大盒子添加這個内邊距屬性*/
》》》也就是給子元素的margin-top值改為給父元素加内邊距padding-top，進而避免了margin-top的傳遞方法
<div>
<div></div>
</div>
margin的負值
<div>
<div>1</div> /*寬高500px*/
<div>2</div> /*寬高800px*/
</div>
要求不改變結構，2在前，1在後：
margin-left: -1300; /*實作位置的調換*/
内邊距和外邊距的差別
1、margin外邊距、padding内邊距
2、margin不會影響最後元素的實際寬高、padding是會影響最後元素的實際寬高
3、margin主要是用來控制元素和元素之間的間距
padding不能控制元素和另外一個元素的間距，隻能控制它裡面的元素
盒子模型的計算
<div class="content"></div>
.content{
width: 100px;
height: 250px;
border: 10px solid #000;
border-left: 40px; /* 實際這個左邊框失效》border-left: 0px; */
padding: 10px 30px;
margin: 10px 20px 30px;
}
實際的寬度： 100 + 30 + 30 + 0 + 10 =170
實際的高度： 250 + 10 + 10 + 10 + 10 =290
背景顔色
text-align: center; /*文字内容水準居中*/
-------------------------------------------
margin: 0 auto; /*上下0，左右auto>> 塊元素的居中*/
文本内容行高控制 》》 line-height
<h3></h3>
/*實作h3文本内容的垂直居中》》》*/
line-height:32px;
height: 32px;
背景圖檔
/* 實作一個logo的背景圖檔 */
<h1 class="#">
<a href="#" target="_blank" rel="external nofollow" >111</a>
</h1>
.logo a{
display: block; /*一個塊*/
width: 173px;
height: 66px;
background-image: url(圖檔位址);
text-indent: -9999px; /*手段縮進，讓111消失*/
}
背景重複
<h1 class="logo"></h1>
/* 未指定平鋪方式，此時的h1會有重複現象*/
.logo{
width: 300px;
height: 300px;
background-image: url(圖檔位址);
}
/*指定平鋪方式: （預設值repeat）不平鋪背景不重複*/
1、拆分寫法
background-image: url(圖檔位址);
background-repeat: no-repeat;
2、複合寫法(簡寫)》》有空格，一定要指定平鋪方式
background: url(圖檔位址) repeat-y;
----------------------------------------
repeat-x :x軸平鋪
repeat-y :y軸平鋪
注意：1、background-repeat不能單獨(單個使用)簡寫為background
2、background-image和background-color可以單獨簡寫為background
背景定位
<h1 class="logo"></h1>
--------------------------
background-position: 50px 50px; /*x,y軸坐标*/
注意：方位隻指明x軸，沒有Y軸，此時預設y軸為center;
同理background-position: left;》》》lift center
同理background-position: right;》》》right center
同理background-position: 50%》》50% 50%
背景關聯
background-attachment: 屬性
屬性：scroll>>背景随着頁面滾動條的滾動而滾動
屬性：fixed>>背景不會随着頁面滾動條的滾動而滾動》》固定
背景尺寸
background-size: 500px 500px; /*x、y軸的大小*/
--------------------------------
background-size: auto; /*圖檔原本的大小*/
--------------------------------
/*此時有一個問題：圖檔拉伸之後會 變虛*/
background-size: cover; /*覆寫，背景圖檔等比例拉伸 到完全覆寫盒子大小(設定的寬高)為止*/
--------------------------------
/*背景圖檔會等比例拉伸，但是隻要有一條邊 觸碰到盒子的任何一條邊，它都會停止拉升(縮放)= 會出現留白*/
background-size: contain;
背景裁剪
/*content-box> 從内容區域之外開始裁剪（裁剪掉的是内邊距和邊框區域）*/
background-clip: content-box;
------------------------------------
/*從内邊距區域之外開始裁剪（不包括内邊距，裁剪掉的是邊框區域）*/
background-clip: padding-box;
-----------------------------------
/*從邊框線之外開始裁剪（不包括邊框線）*/
background-clip: border-box;
設定背景圖像的參考原點（位置）
/*background-origin 顯示背景的原點坐标*/
/*content-box >>>從内容區域開始顯示背景圖檔(左上角開始)》》width/height*/
background-origin: content-box;
--------------------------------------------------
padding-box;》》從内邊距區域（包括内邊距）開始顯示背景圖檔》》padding包括padding值
border-box》》從邊框區域開始（包括邊框）開始顯示背景圖檔》》border包括border值
背景屬性複合（縮寫）
css新增的屬性：
background-size、background-origin、background-clip 都不能用background複合縮寫
雪碧圖
/*雪碧圖 background-position: -400px 0; x軸上取負值*/
background: url("") no-repeat 0 0;>>>>>/*00>>預設不寫，預設是background-position: 0 0;*/
overflow:hidden的多種作用
1、overflow溢出隐藏
2、清浮動
3、解決margin-top的傳遞問題
那麼，單行文本出現省略号，多行文本出現省略号？
overflow溢出隐藏》》》文本内容超過設定的寬度和高度時（超出内容之外的隐藏），出現溢出隐藏效果
多行元素在一行顯示
/*兩個div顯示在一行*/
<div>内容一</div>
<div>内容二</div>
----------------------------
1、css屬性設定為行内元素顯示》》》display: inline;
----------------------------------
如果此時給兩個div設定了寬高和背景顔色：》》》此時設定行内元素顯示會對寬高不起作用
2、修改屬性為》display: inline-block;
注意：display: inline-block可以讓元素在一行顯示，但是它會受空格、換行鍵的影響，會有預設的間距産生
=》解決辦法：
（1）去掉空格和換行鍵的影響，将（div）标簽全都在一行（不推薦，閱讀性不好）
（2）給兩div添加一個父div,給父div增加css屬性》font-size:0>>>但是發現一個問題，此時div中的文字消失了=》解決：此時隻需要在“内容一”和“内容二”的div屬性身上加加一個font-size:14把父元素font-size:0覆寫;
/*hack寫法：指css相容寫法*/
另外注意：display: inline-block;在ie6/ie7下不相容解決辦法=》在“内容一”和“内容二”的div屬性增加=》*display: inline> css hack IE浏覽器可以識别;
=》*zoom:1;重新出發layout
<div>
<div>内容一</div>
<div>内容二</div>
</div>
------------------------------------
3、使用左浮動和有浮動(注意清除浮動)
float:left;
float:right;
單行文本出現省略号
<h3>文本字段</h3>
/*單行文本出現省略号必備條件：缺一不可*/
width: 30px; /*必須要有寬度*/
overflow:hidden; /*溢出隐藏*/
white-space: nowrap; /*強制文字不折行*/
text-overflow: ellipsis; /*文字隐藏方式：以省略号的方式隐藏*/
多行文本出現省略号
<h3>文本字段</h3>
/*多行文本出現省略号必備條件：主要是引用手機端*/
display: -webkit-box; /*彈性盒模型*/
-webkit-box-orient: vertical; /*規定元素的排列方式：垂直排列*/
-webkit-line-clamp: 2; /*文字的行數，需要哪一行，值就是多少*/
overflow:hidden; /*溢出隐藏*/
浮動
<div>内容一</div>
<div>内容二</div>
1、在一行顯示：
float: left;
---------------------------------
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
2、”内容一“和”内容二“的css屬性中都有float: left;
但是“内容三”無浮動屬性》》》》此時，浮動元素會脫離文檔流，導緻下面沒有浮動的元素識别不了它的高度和位置，此時“内容三”div就會往上跑
---------------------------------
3、元素都是 float: left; 左浮動，元素從左往右依次排列；
元素都是float: right; 有浮動，元素從右往左依次排列；
---------------------------------
4、父元素浮動，子元素并不會繼承父元素的浮動；
5、浮動屬性不能繼承；
---------------------------------
<span></span>
6、浮動元素本身具有塊元素的特點，是以用了浮動就不需要在加display: block;
7、是以元素都可以用浮動屬性
文檔流和脫離文檔流
文檔流： 指的是元素的排列方式；
正常文檔流： 從左往右 從上到下；
文檔流可以分等級： 行内元素（從左往右）和 塊級元素（從上到下）；
----------------------------------------
需求:需要塊級元素（比如div）在一行顯示
=》此時正常文檔流方式被打破；
=>是以得到》》脫離文檔流：正常的文檔流被打破；
脫離文檔流的影響：
1、float
2、定位
浮動元素的值
<div>内容一</div>
<div>内容二</div>
關于浮動的值：
float: left; 左浮動
float: right; 右浮動
float: none; 正常的文檔流
float：inherit; 規定應該從父元素繼承float屬性的值。
浮動元素産生的影響
<div>
<div>内容一</div>
<div>内容二</div>
</div>
1、父元素設定背景顔色不起作用
2、父元素設定邊框border屬性沒有被撐開，會重合到一起。
3、父元素設定内邊距padding屬性也沒有被撐開
清浮動的方法
1、給浮動元素的父元素手動添加一個height屬性；（不推薦）
2、給浮動元素的父元素設定overflow:hidden/auto;
3、給浮動元素的父元素結束标簽之前加一個具有塊元素特點的标簽（一般是div）,
給元素加一個clear:both; <div style="clear:both"></div>
4、clearfix 僞元素去清除浮動； （常用）
/*利用僞元素:after 清除浮動必備的條件，缺一不可*/
（1）display: block; /*確定元素是一個塊級元素*/
(2)clear: both; /*不允許左右兩邊有浮動對象*/
(3)content:""; /**/
/*下列屬性是寫全的方式,不是必備的條件*/
height: 0; /*防止低版本浏覽器中預設 height: 1px;的情況*/
font-size: 0; /**/
overflow: hidden; /**/
visibility: hidden; /*讓左右可見性的元素隐藏*/
注意：content:"";/*這是僞元素:before和:after天生自帶的屬性，如果不寫，僞元素不起作用*/
/*利用僞元素清除浮動》固定寫法*/
/*隻要清浮動，就在浮動元素的父元素上加一個 .clearfix 即可*/
如：<div class="head clearfix"></div>
.clearfix:after{
display: block;
clear: both;
content: "";
height: 0;
font-size: 0;
overflow: hidden;
visibility: hidden;
}
[clear清除浮動]：
clear:both; /*不允許左右兩邊有浮動對象（清除左右兩邊的浮動的影響）*/
clear:left; /*不允許左邊有浮動對象（清除左兩邊浮動的影響）*/
clear:right; /*不允許右邊有浮動對象（清除右兩邊浮動的影響）*/
clear:none; /*允許左右兩邊有浮動對象 預設值（不清除左右兩邊的浮動的影響）*/
如何讓元素消失在視野中
/* 1、透明度為0 */
opacity: 0;
/* 2、隐藏 */
display: none;
/* 3、寬度為0和 overflow*/
width: 0;
overflow:hidden;
/* 4、沒有設定height高度的情況下，和 line-heigh和overflow*/
overflow:hidden;
line-heigh: 0;
/* 5、讓所有可見性元素消失(優先考慮)*/
visibility: hidden;
/* 6、margin和padding設定足夠大*/
margin-left: -9999999999px;
/* 7、利用transfrom屬性，讓translate坐标設定足夠大*/
transfrom: translateY(-999999px);
僞元素:before和:after
:before 表示元素之前添加内容
:after 表示元素之後添加内容
定位
絕對定位
position: absolute;
1、它設定top、bottom、left、right四個方位值；
2、絕對定位元素會脫離文檔流，不占位，導緻後面的元素會往前跑，占領它的位置；
3、絕對定位元素一定要有相對參照（它的直接父級元素），如果父級元素沒有相對參照物，它會一級一級的往上查找，直到找到最外層的根元素html;
4、如果方位裡，同時有left和right，最後聽left;
同時有top和bottom，最後聽top;
是以在實際應用中隻需要設定left或者top;
5、z-index越大，層級越在上
6、一個元素定在另一個元素上，或者兩個元素疊加的情況，都可以使用定位（絕對定位），同時需要設定相對參照物（相對定位 position: relative;）并且要指明它定位的方向。
相對定位
position: relative;
1、不會脫離文檔流，會占位，所有後面的元素不會往前跑。
2、可以設定top、bottom、left、right四個方位值
如果方位裡，同時有left和right，最後聽left;
同時有top和bottom，最後聽top;
3、參照物： 自己本身
4、可以設定z-index屬性，z-index越大，層級越在上
z-index必須要和定位元素同時使用，才起作用。
固定定位
position: fixed;
1、會脫離文檔流
2、可以設定top、bottom、left、right四個方位值
如果方位裡，同時有left和right，最後聽left;
同時有top和bottom，最後聽top;
3、參照物：整個浏覽器視窗
4、可以設定z-index屬性，z-index越大，層級越在上
定位總結
（1）相同點：
1、可以設定top、bottom、left、right四個方位值
如果方位裡，同時有left和right，最後聽left;
同時有top和bottom，最後聽top;
2、可以設定z-index屬性，z-index越大，層級越在上
（2）不同點：
1、是否脫離文檔流
絕對定位：是
相對定位：否
固定定位：是
2、參照物
絕對定位：是具有定位元素的父級元素，如果直接父級元素沒有定位元素，則會往上級查找，知道找到根級元素html
相對定位：自己本身
固定定位：整個浏覽器視窗
z-index(層級)的特點
1、當标簽中都有定位元素時，在後面标簽中的z-index要比在前面的z-index的值要大
2、z-index沒有機關，支援負值
3、z-index一般是同級元素比較，子元素與父元素比較，z-index并不起作用（z-index值越大，越在上）
4、 z-index屬性不能繼承
基于WebStorm常用快鍵鍵
ctrl + D 複制整行
ctrl + X 剪切整行
ctrl + G 可快速定位到想要的行數
ctrl + alt +L 代碼格式化
window + E 調出資源檔案管理器
window + D 快速回到左面