以下內(nèi)容來自于愛奇藝知識(shí)-Web前端開發(fā)之HTML CSS精英課堂

一、CSS權(quán)重

• 1.1）權(quán)重大小

• 1.2）權(quán)重大小說明：
  1.2.1） 每1代表225;
  1.2.2）!important雖然是無限大但是跟數(shù)學(xué)中的無窮大不一樣，可以疊加，下面兩段雖然都是!important，但是第二段的權(quán)重要高于第一段的。

* {
    background:#f40 !important
}

div {
    background:#f40 !important
}

二、css基礎(chǔ)樣式

• 單行文本垂直居中：

div {
  height: 16px;
  line-height: 16px;
}

• 一段文本首行縮進(jìn)：

1. em單位：相對(duì)單位 1em=1 font-size
2. 像素px：一個(gè)像素只展示一個(gè)顏色點(diǎn)，是相對(duì)的。一個(gè)英寸能容納多少個(gè)像素點(diǎn)

div {
  text-indent: 2em
}

• 行為js 樣式css 結(jié)構(gòu)html 相分離

• cursor：pointer、help、e-resize等

• hover偽類選擇器

三、display元素類別特征

• inline、block、inline-block

四、標(biāo)簽選擇器-樣式初始化

• 標(biāo)簽選擇起的目的是要-初始化這些標(biāo)簽
  例如：

1. a標(biāo)簽，默認(rèn)會(huì)有下劃線藍(lán)色的，但是現(xiàn)在基本上不需要這種樣式因此需要做以下初始化：

a {
  text-decoration: none;
  color: #424242
}

2. ul li標(biāo)簽，li標(biāo)簽?zāi)J(rèn)會(huì)有一個(gè)黑色圓點(diǎn)在前面，不需要這個(gè)樣式，就可以做如下初始化：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

3. 通配符*，初始化所有標(biāo)簽，默認(rèn)margin 8px

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
}

五、盒子模型

5.1）盒子三大組成部分

• 盒子壁-border

• 內(nèi)邊距-padding

• 盒子內(nèi)容-width+height
  margin + border + padding + content(height or width)

  
  
  盒子模型

• padding magin border-width 順序

1. 四個(gè)值：上右下左
2. 三個(gè)值：上（左右）下
3. 兩個(gè)值：（上下）（左右）

六、定位

• 絕對(duì)定位 absolute
  脫離原來位置進(jìn)行定位。最近的有定位的父級(jí)元素進(jìn)行定位，如果沒有，那么相對(duì)于文檔進(jìn)行定位
• 相對(duì)定位 relative
  保留原來位置進(jìn)行定位。相對(duì)自己原來的位置進(jìn)行定位
• 固定定位 fixed-相對(duì)可視區(qū)域固定
  滾動(dòng)條怎么動(dòng)，都不動(dòng)
• 塊級(jí)元素居中-相對(duì)文檔居中

div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background-color: red;
}

七、CSS特殊問題

7.1.兩個(gè)已知BUG

7.1.1 margin塌陷

• 父子嵌套的元素，垂直方向的margin會(huì)粘合在一起，使用較大的margin值，解決辦法：
  1、給父盒子設(shè)置邊框——一般不使用
  2、BFC-Block Format Context塊級(jí)格式化上下文，給父盒子設(shè)置以下4種屬性，4種視具體情況選擇一種均可解決BFC問題

  position: absolute;
  display: inline-block;
  float: left/right;
  overflow: hidden;
  

7.1.2.margin合并問題

• 兄弟塊級(jí)元素的上下margin被合并，使用較大一個(gè)值。

7.2.特殊點(diǎn)

知識(shí)點(diǎn)：

• 行級(jí)元素只能嵌套行級(jí)元素
• 塊級(jí)元素可以嵌套任何元素
  但是，P標(biāo)簽雖然是塊級(jí)元素，里面不可以嵌套div，如果嵌套，P標(biāo)簽就會(huì)被分割成兩個(gè)P標(biāo)簽；
  a標(biāo)簽內(nèi)部不可以嵌套a標(biāo)簽

八、浮動(dòng)模型

8.1.浮動(dòng)元素產(chǎn)生了浮動(dòng)流

• 所有產(chǎn)生了浮動(dòng)流的元素，塊級(jí)元素看不到他們
• 觸發(fā)了BFC的元素、文本類屬性的元素以及文本都能看到浮動(dòng)元素

8.2.以上第一個(gè)知識(shí)點(diǎn)會(huì)產(chǎn)生這樣一個(gè)問題：

• 子元素設(shè)置浮動(dòng)屬性，父盒子會(huì)感知不到子元素的高度，即高度不可以被子元素?fù)伍_

方案一：清除浮動(dòng)

這就又帶來了一個(gè)問題：清楚浮動(dòng)，解決辦法：

• 1. 最后一個(gè)浮動(dòng)子元素之后，增加一個(gè)P標(biāo)簽，且含有以下類；（一般不使用，因?yàn)檫@個(gè)方法改變了結(jié)構(gòu)html）

{
border: 0 solid green;
clear: both;
}

• 2. 偽元素-知識(shí)點(diǎn)：偽元素天然存在，行級(jí)元素，想要改變其寬高的話，需要通過display，改變成行級(jí)塊元素可以通過css改變其內(nèi)容

span::before {
    position: absolute;
    left: 0;
    top: 100px;
    display: inline-block;
    height: 100px;
    width: 100px;
    background: red;
    content: "";
}

最佳方案：有了偽元素知識(shí)點(diǎn)， 解決辦法：就產(chǎn)生了，給父盒子的偽元素after設(shè)置屬性（能使用clear: both清除浮動(dòng)的，必須是塊級(jí)元素）

.wrapper::after {
    display: block;
    content: "";
    clear: both;
}

方案二：給父盒子觸發(fā)BFC

.wrapper {
    float: left;
} 
.wrapper {
    display: inline-block;
} 
.wrapper {
    position: absolute;
}

使用以上方式，父盒子會(huì)緊緊包住子元素，因?yàn)閮?nèi)部把元素轉(zhuǎn)換成inlien-block，所以父盒子如果不設(shè)置寬高的話，父盒子的寬高自動(dòng)變成子元素的寬高了。

8.3.浮動(dòng)元素產(chǎn)生的原始目的：為了使網(wǎng)頁中產(chǎn)生報(bào)紙布局，即文本環(huán)繞圖片。

• 將圖片設(shè)置float:left即可

九、文字溢出處理

• 單行文本

p {
    width: 300px;
    height: 20px;
    line-height: 20px;
    border: 1px solid black;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

• 多行文本——沒法使用css2實(shí)現(xiàn)，需要返回文本直接就是“...”，前端工程師：容器寬高度、每個(gè)文字寬度算好傳給后臺(tái)，后臺(tái)工程師計(jì)算文本多少，將多余的采用...返回
  但是，css3可以實(shí)現(xiàn)

div {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; //行數(shù)
    -webkit-box-orient: vertical;
}

十、背景圖片

• 引申問題：瀏覽器采取默認(rèn)加載策略，這個(gè)網(wǎng)頁仍舊可以使用。即css、js全部失效的情況下，html仍可以是這個(gè)網(wǎng)頁正常運(yùn)行。
  html:

<a  target="_blank">淘寶網(wǎng)</a>

方法一：

a {
    display: inline-block;
    text-decoration: none;
    color: #424242;
    width: 190px;
    height: 90px;
    border: 1px solid black;
    background-image: url(https://gw.alicdn.com/tfs/TB176rg4VP7gK0jSZFjXXc5aXXa-286-118.png);
    background-size: 190px 90px;
    
    text-indent: 190px;
    white-space: nowrap;
    overflow: hidden;
}

方法二：

a {
    display: inline-block;
    text-decoration: none;
    color: #424242;
    width: 190px;
    border: 1px solid black;
    background-image: url(https://gw.alicdn.com/tfs/TB176rg4VP7gK0jSZFjXXc5aXXa-286-118.png);
    background-size: 190px 90px;

    height: 0px;
    padding-top: 90px;
    overflow: hidden;
}