目錄
## 一、圖片下方的空白間距
- 圖片下方默認會出現4px的空白，(隨着父級的字體大小有所不同)
- 解決方法1：
- 給圖片的父級添加 font-size：0; line-height:0;
- 解決方法2
- 給圖片添加vertical-align 屬性，值不爲baseline
- 解決方法3
- 把圖片轉換成塊級元素 display：block;
## 二、元素可見性
- visibility:visible; 元素默認可見
- visibility:hidden; 元素不可見，隱藏，但是佔位的
- display:none; 隱藏元素，不顯示也不佔位
## 三、單行文本溢出顯示省略號
```
.p1 {
width: 200px;
background-color: red;
white-space: nowrap;/* 文本強制不換行 */
text-overflow: ellipsis;/*文本溢出顯示省略號*/
overflow: hidden;/*必需要結合盒子溢出隱藏*/
}
```
## 四、多行文本溢出顯示省略號
- 方法一：利用webkit內核的擴展屬性(因爲只有webkit內核支持，效果好兼容性不好)
```
.p2 {
width: 200px;
background-color: skyblue;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
/*必需要結合的屬性，將元素設置爲彈性盒模式*/
-webkit-line-clamp: 4;
/*設置文本顯示的行數*/
-webkit-box-orient: vertical;
/*必需要結合的屬性，設置彈性盒對象的子元素，垂直排列*/
}
```
- 方法二：利用僞元素模擬省略號，兼容性相對好，但是效果不太好
```
.p3 {
position: relative;
width: 240px;
height: 120px;
/*盒子高度要設置爲line-height的倍數（表示要顯示的倍數幾倍就是幾行）*/
background-color: gold;
line-height: 30px;
/* overflow: hidden; */盒子溢出隱藏
}
.p3::after {
position: absolute;
right: 0;
bottom: 0;
/*通過定位設置到父元素的右下角*/
content: '...';
/*用僞元素添加...顯示省略號*/
/* background-color: gold; */
padding-left: 20px;//是讓僞元素變寬點
background: linear-gradient(to right, transparent, gold 60%);
/*往右漸變到60%後面40%全爲gold色*/-添加漸變色使文字逐漸隱藏
}
```
## 五、標籤的嵌套規則
1、塊元素裏面可以嵌套塊元素、行內元素、行內塊(特殊情況：一些特殊語義的塊標籤不能再嵌套塊標籤，比如：h1-h6 和 p標籤裏面不能再嵌套 div, 一些固定搭配的標籤，不能隨意嵌套其他的標籤 比如：ul ,ol 直接子元素只能是li)
2、行內元素不能嵌套塊級元素，可以嵌套行內和行內塊元素( a標籤（行內元素）裏面可以套塊元素，a標籤裏面不能再嵌套a標籤，顯示爲兄弟關係不能父級 )
## 六、BFC
### 1、BFC概念？（是什麼？）
> Block Formatting Context 塊級格式化上下文
> Formatting Context，指的是頁面中的一個渲染區域，並且擁有一套渲染規則，他決定子標籤如何定位，以及與其他標籤的相互關係和作用。
> BFC , 塊級格式化上下文,指的是頁面中的一個渲染區域，只有Block-level BOX （塊級盒子）參與,該區域中擁有一套渲染規則來約束塊級盒子的佈局，且與外部無關。
### 2、如何生成BFC?
- 以下情況是目前學到的能夠生成BFC的情況:
- 根元素 html
- float屬性值不爲 none (ul、li 浮動本身也是一個bfc會有高度ul就不用clearfix)
- overflow 屬性值不爲 visible
- display 屬性值爲 inline-block
- position屬性值爲 absolute/fixed
### 3、BFC的特性？
- ①、內部的塊標籤會在垂直方向一個接一個的放置
- *②、垂直方向的距離有margin決定，屬於同一個BFC的兩個相鄰的標籤外邊距會發生重疊
- ③、每個標籤的左外邊距和包含它的塊的左邊界相接觸，有margin-left,即使浮動標籤也是如此
- *④、BFC區域不會與float的標籤區域發生重疊 (.box1左浮動.box2不重疊在其右邊緊排其不設置寬度自動佔滿一行去除.box1的寬度，實現右側自適應效果)
- *⑤、計算BFC的高度時，浮動子元素也參與計算(ul設overflow：hidden即會有高度，有li的高度)
- ⑥、BFC就是頁面中的一個隔離的獨立容器，容器裏的子標籤不會影響到外部標籤，反之，外部標籤也不會影響bfc內部的標籤。
### 4、BFC解決的問題？
- 1）、外邊距摺疊
```
## 2.md-三、垂直外邊距合併問題
### 1、垂直方向margin-top傳遞問題(父子關係)
- 當父元素沒有padding\border\float\position\overflow時，給子元素設置margin-top會把父元素一塊兒帶下來即父元素也會有margin-top
- 解決:
- 給父元素添加1px的上padding或者border,子元素margin-top少1px
- 可以用父元素的padding-top實現同樣式的效果
### 2、相鄰元素的外邊距合併（兄弟關係）
- 兩同級標籤，上一個設置margin-bottom:40px,下一個設置margin-top:60px，最後兩者之間的外邊距會合併爲數值較大的那個值(60px)，不是數值相加(100px)
```
> 根據特性第②條，屬於同一個BFC的兩個相鄰的標籤外邊距會發生重疊( 父子外邊距重疊、兄弟關係邊距重疊)
> 解決方法： 讓標籤處於不同的BFC區域中就不會重疊
```
父子邊距重疊： 給父元素設置生成BFC的屬性
兄弟邊距重疊： 給其中任意一個添加一層BFC父級
```
- 2）、實現自適應兩欄或三欄佈局 （根據特性④）
> 兩欄佈局，左側固定寬度，右側欄自適應（隨瀏覽器尺寸變化縮小放大）
> 三欄佈局，左右兩欄固定寬度，中間欄自適應(隨瀏覽器尺寸變化縮小放大)
```
<!-- 兩欄 :
.left 設置寬度，左浮動
.right 寬度自動佔滿父級，設置overflow:hidden
-->
<div class="cols">
<div class="left"></div>
<div class="right"></div>
</div>
<!--
三欄：
標籤順序：先寫左右欄，再寫中間欄
.left1 設置寬度，左浮動
.right1 設置寬度，右浮動
.center 寬度自動佔滿父級，設置overflow:hidden
-->
<div class="cols">
<div class="left1"></div>
<div class="right1"></div>
<div class="center"></div>
</div>
```
- 3）、防止文字環繞圖片排列 （根據特性④）
> 浮動的元素會覆蓋不浮動的元素，文字會環繞圖片排列，把文字所在標籤設置爲BFC,可以避免文字環繞
- 4）、清除浮動
> 根據第⑤條特性，計算BFC的高度時，浮動子元素也參與計算，所以可以通過bfc清除浮動，例如給浮動元素父級添加overflow:hidden;
## 七、佈局方案
### 1、兩欄自適應
- 方法一： BFC-右側自適應設overflow：hidden;
```
<!-- 兩欄 :
.left 設置寬度，左浮動
.right 寬度自動佔滿父級，設置overflow:hidden
-->
<div class="cols">
<div class="left"></div>
<div class="right"></div>
</div>
```
- 方法二： 左絕對定位-右側自適應設padding-left+塊級子元素inner
```
- .left 左側欄固定寬，設置絕對定位 position:absolute;會脫離文檔流，right會被覆蓋一部分
- .right 右側欄寬度自動，給其添加padding-left:200px，並且添加子元素 .inner , 把右側欄的內容放在.inner裏面
.left{
position: absolute;
left: 0;
top:0;
width: 200px;
height: 300px;
background-color: rgb(202, 150, 252);
}
.right{
padding-left: 200px;
}
.inner{
background-color: coral;
height: 300px;
}
<div class="cols">
<div class="left"></div>
<div class="right">
<div class="inner">hello world</div>
</div>
</div>
```
### 2、三欄自適應
- 方法一：BFC-左側左浮動，右側右浮動，中間自適應設overflow：hidden;
```
<!--
三欄：
標籤順序：先寫左右欄，再寫中間欄
.left1 設置寬度，左浮動
.right1 設置寬度，右浮動
.center 寬度自動佔滿父級，設置overflow:hidden
-->
<div class="cols">
<div class="left1"></div>
<div class="right1"></div>
<div class="center"></div>
</div>
```
- 方法二：聖盃佈局
> 先中間後左右,中間寬100%左右固定寬,三個都左浮動,左右都設margin-left,中間main會左右部分覆蓋----三個在一行
> container設左右的內邊距爲左右側的寬值----內縮
> 左右側設相對定位 position: relative;位移到最左右側----外翻
- 爲了使主體內容優先加載，標籤順序 .main .left .right
- .main 寬度設置 100% ，.left 寬度 200px .right 寬度240px
- .main ,.left ,.right 三欄都左浮動
- .left添加margin-left:-100%; 拉到最左邊 ，.right 添加margin-left:-240px; 拉到三欄的右邊，.main被左右兩邊欄覆蓋
```
聖盃佈局解決覆蓋問題：
- 給父級.container添加padding:0 240px 0 200px; 這個時候.mian 寬度正常，左右兩欄同時被擠到中間
- 給.left 添加position:relative;left:-200px; 往左移
- 給.right 添加position:relative;right:-240px; 往右移
```
```
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.container {
height: 500px;
padding: 0 240px 0 200px;
}
.main {
float: left;
width: 100%;
height: 100%;
background-color: red;
}
.left {
position: relative;
left: -200px;
float: left;
margin-left: -100%;
width: 200px;
height: 100%;
background-color: green;
}
.right {
position: relative;
right: -240px;
float: left;
margin-left: -240px;
width: 240px;
height: 100%;
background-color: yellow;
}
```
- 方法三：雙飛翼佈局
> 先中間後左右,中間寬100%左右固定寬,三個都左浮動,左右都設margin-left,中間main會左右部分覆蓋----三個在一行
> main中間再設塊子元素inner，inner設左右margin值
- 爲了使主體內容優先加載，標籤順序 .main .left .right
- .main 寬度設置 100% ，.left 寬度 200px .right 寬度240px
- .main ,.left ,.right 三欄都左浮動
- .left添加margin-left:-100%; 拉到最左邊 ，.right 添加margin-left:-240px; 拉到三欄的右邊.main被左右兩邊欄覆蓋
```
雙飛翼解決覆蓋的問題：
- 給.main添加一層子元素 .main-inner
- 給 .main-inner 添加外邊距 margin:0 240px 0 200px;把主體內容都放在 .mian-inner裏面
```
```
<div class="container">
<div class="main">
<div class="inner">
hello
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
html,body {
height: 100%;
}
.container {
overflow: hidden;
height: 100%;
}
.main {
float: left;
width: 100%;
height: 100%;
background-color: red;
}
.left {
float: left;
margin-left: -100%;
width: 200px;
height: 100%;
background-color: green;
}
.right {
float: left;
margin-left: -240px;
width: 240px;
height: 100%;
background-color: lightseagreen;
}
.inner {
margin: 0 240px 0 200px;
background-color: skyblue;
}
```
## 八、等高佈局
> 多列布局，其中一列變高，其他幾列等高變化
### 方法一：利用內外邊距相抵消的原理，給每一列設置
- padding-bottom: 9999px;
- margin-bottom: -9999px;
- 把背景撐得很大，再抵消padding的佔位
- 優點：結構簡單，兼容性比較好
- 缺點：僞等高,需要合理控制padding-bottom、margin-bottom
```
.clearfix::after{
content: '';
display: block;
clear: both;
}
.container{
width: 1000px;
border: 2px solid black;
margin: 0 auto;
overflow: hidden;
}
.left{
float: left;
width: 300px;
background-color: pink;
padding-bottom: 9999px;
margin-bottom:-9999px;
}
.center{
float: left;
width: 400px;
background-color: lightgreen;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.right{
float: left;
width: 300px;
background-color: lightskyblue;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
```
### 方法二: 給每個多列添加對應多層共同父級,再設margin-left
- 有幾列添加幾層父級，給父級設置不同的背景色，通過margin調整幾層父級的位置,錯開呈現多列背景。最後通過負margin把內容列調整到對應的背景上。
- 優點：真等高，兼容性好
- 缺點：結構複雜,理解相對困難
```
<div class="container">
<div class="bg2">
<div class="bg3 clearfix">
<div class="left">
<div class="center">
<div class="right">
</div>
</div>
</div>
.container {
width: 1000px;
border: 2px solid black;
margin: 0 auto;
background-color: pink;
}
.bg2 {
background-color: lightgreen;
margin-left: 300px;
}
.bg3 {
background-color: lightskyblue;
margin-left: 400px;
}
.left {
float: left;
width: 300px;
margin-left: -700px;
}
.center {
float: left;
width: 400px;
margin-left: -400px;
}
.right {
float: left;
width: 300px;
}
```
## 九、常見兼容問題處理
### 1、ie中圖片邊框問題
> ie中圖片放在a標籤中會顯示邊框
- 解決方法：
```
img{
border:none;
}
```
### 2、ie8以下背景簡寫屬性語法兼容
> 背景簡寫屬性的每個值之間應該添加空格，如果出現如下遺漏空格的情況，標準瀏覽器時可以正常顯示，但是再ie8及以下瀏覽器就不能顯示圖片
```
background: url("...")no-repeat center;
```
- 解決方法：按照標準語法，在多個值之間添加空格
```
background: url("...") no-repeat center;
```
### 3、透明度兼容
- rgba() 透明顏色 ie低版本不支持
- opacity:0.5; 標準瀏覽器支持，ie低版本不支持
- filter:alpha(opacity=50) ie支持
### 4、ie低版本的兼容問題（瞭解）
> ① ie6及以下瀏覽器，定義小高度的盒子失效
- 解決方法：
```
.box{
height:1px;
font-size: 0;//添加
line-height: 0;//添加
overflow: hidden;//添加
}
```
> ② ie6瀏覽器中，標籤浮動產生雙倍外邊距。
- 解決方法：給浮動元素添加 _display:inline;
```
li{
float:left;
margin-left:10px;
_display:inline; /* 針對ie6有效 */
}
```
> ③ ie7及以下瀏覽器，子元素設置相對定位，父元素的overflow:hidden;失效
- 解決方法：給父元素也添加position:relative;
```
.parent{
position: relative;
overflow: hidden;
}
.child{
position: relative;
left: 150px;
}
```
> ④ ie7及以下瀏覽器，塊元素轉行內塊，不在一行顯示
- 解決方法：
```
div{
display:inline-block;
*display:inline;//添加
*zoom:1;//添加
}
```
> ⑤ ie7及以下瀏覽器，li中出現兩個及以上子元素浮動時，li之間出現空白問題
- 解決方法：給li添加vertical-align:top;
```
li{
vertical-align:top;
}
```
```
補充:
如果需要從服務器環境中打開頁面,可以安裝插件 live server , 打開頁面選擇 open with live Server
```
## 十、css Hack技術
> css Hack是通過一些特殊方式去處理不同瀏覽器之間的兼容問題，某些情況使用css Hack處理兼容能事半功倍。濫用css Hack會影響頁面性能，並且維護困難，所以應當避免大量使用css Hack技術。
### 1、條件Hack
- ie從10及以上的版本都不支持 條件hack，所以以下代碼在ie9及以下才會顯示
```
<!--[if ie]>
<p>這個段落只有ie會顯示</p>
<![endif]-->
```
- 關鍵字：
> 大於 gt 大於等於 gte
```
<!--[if gt ie 8]>
<p>這個段落只有ie8以上會顯示</p>
<![endif]-->
```
> 小於 lt 小於等於 lte
```
<!--[if lt ie 8]>
<p>這個段落只有ie8以下會顯示</p>
<![endif]-->
```
> 等於
```
<!--[if ie 8]>
<p>這個段落只有ie8會顯示</p>
<![endif]-->
```
### 2、屬性級hack
> 屬性級hack就是給css的屬性添加特殊符號來處理不同版本瀏覽器的兼容
```
_ : ie6及以下版本瀏覽器識別
* ：ie7及以下版本瀏覽器識別
\0: ie8及以上瀏覽器識別
.box{
background-color: red; /*所有瀏覽器識別*/
_background-color:yellow;
*background-color:lightblue;
background-color: hotpink\0;
}
```
### 3、選擇符級hack
*html 選擇ie6及以下瀏覽器
*+html 只選擇ie7瀏覽器
```
.box{
background-color: red;
}
*html .box{
background-color: yellow;
}
*+html .box{
background-color: lightblue;
}
```
## 十一、滑動門技術
> 爲了使特殊形狀得背景能夠自適應元素中文本內容得多少，出現滑動門技術。 比如微信導航。
主要使利用背景定位和padding撐開盒子寬度。
> 具體實現：先給a標籤，給a背景圖定到左邊，給a添加合適得padding-left，再往a當中添加span標籤，給span標籤設置同樣得背景定位在右邊，給span添加padding-right (a和span都要轉換成塊級)
```
<ul>
<li>
<a href="#">
<span>首頁頁</span>
</a>
</li>
<li>
<a href="#">
<span>幫助與反饋</span>
</a>
</li>
</ul>
ul li a{
display: block;
padding-left: 16px;
background: url("https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/3w4CwHw.png") no-repeat left;
}
ul li a span{
display: block;
background: url("https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/3w4CwHw.png") no-repeat right;
padding-right: 16px;
}
```
## 十二、網頁tdk設置
- title設置： 網頁的標題，儘量強調重點的內容，首頁一般寫整個網站的標題和整體概述，其他頁面概括本頁面的主題，（注意：每個頁面的標題不要）
- description 設置： 網頁描述，需要高度概括網頁內容，切忌過分堆砌，不能太長，每個頁面不能相同 （不是必須設置，根據具體頁面要求）
- keywords 設置：網頁關鍵字，列舉出幾個頁面的重要的關鍵字
```
<title>XX商城-手機,電腦...</title>
<meta name="description" content="....">
<meta name="keywords" content="...">
```
- 網站icon設置
- 生成icon圖標 http://www.bitbug.net/
```
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
```