邢臺哪里可以做網(wǎng)站怎么引流怎么推廣自己的產(chǎn)品
前言
css 進(jìn)階的主要內(nèi)容如下。
1、css 非布局樣式
-
html 元素的分類和特性
-
css 選擇器
-
css 常見屬性（非布局樣式）
2、css 布局相關(guān)
-
css 布局屬性和組合解析
-
常見布局方案
-
三欄布局案例
3、動畫和效果
屬于 css 中最出彩的內(nèi)容。
-
多背景多投影特效
-
3D特效編寫實踐
-
過渡動畫和關(guān)鍵幀動畫實踐
-
動畫細(xì)節(jié)和原理深入解析
4、框架集成和 css 工程化
-
預(yù)處理器作用和原理
-
less/sass 代碼實踐
-
Bootstrap 原理和用法
-
css 工程化的的實踐方式
-
js 框架中的 css 集成實踐
常見問題
不會 css 的前端稱之為偽前端。
Vue 中模擬Scoped CSS的方式
方案一：隨機(jī)選擇器。css modules。
方案二：隨機(jī)屬性。<div abcd>、div[adcd]{}
其他問題
-
html 元素的嵌套關(guān)系是怎么確定的？哪些嵌套不可以發(fā)生？
-
比如說，為什么 div 可以放在 a 標(biāo)簽里面？
-
css 選擇器的權(quán)重是如何計算的？寫代碼時要注意什么？
-
浮動布局是怎么回事？有什么優(yōu)缺點(diǎn)？國內(nèi)用的多嗎？
-
css 可否做逐幀動畫嗎？性能如何？
-
Bootstrap 怎么做響應(yīng)式布局？
-
如何解決 css 模塊化過程中的選擇器互相干擾的問題？
單獨(dú)看 css 屬性并不難，難的是需要把這些思路和思想，想到它的應(yīng)用場景。
01-CSS中的非布局樣式：
前言
CSS中，有很多非布局樣式，這些樣式（屬性）和與布局無關(guān)，包括：
-
字體、字重、顏色、大小、行高
-
背景、邊框
-
滾動、換行
-
裝飾性屬性（粗體、斜體、下劃線）等。
這篇文章，我們來對上面的部分樣式做一個回顧。
邊框
如何用邊框畫一個三角形？詳見《02-CSS基礎(chǔ)/06-CSS盒模型詳解》中的最后一段。
文字換行
-
ovferflow-wrap：通用的屬性。用來說明當(dāng)一個不能被分開的字符串（單詞）太長而不能填充其包裹盒時，為防止其溢出，瀏覽器是否允許這樣的單詞中斷換行。
-
word-break：指定了怎樣在單詞內(nèi)斷行。這里涉及到CJK（中文/日文/韓文）的文字換行。
-
white-space：空白處是否換行。
上面這三個 css 屬性進(jìn)行組合，可以設(shè)置各種不同的屬性。
當(dāng)然，如果想讓一段很長的文本不換行，可以直接設(shè)置white-space: nowrap 這一個屬性即可。如果想換行，可以試試white-space: pre-wrap。
CSS Hack
-
CSS Hack 的方式：不合法但可以生效的寫法。
-
可以用來解決一些瀏覽器的兼容性問題。
-
缺點(diǎn)：難理解、難維護(hù)、易失效（比如瀏覽器升級后，hack可能會失效）。
-
替代方案：特性檢測。
-
替代方案：針對性加 class
CSS 效果
我們可以利用 CSS 實現(xiàn)各種效果，常見的效果屬性有：
-
box-shadow：盒子的陰影
-
text-shadow：文本的陰影
-
border-radius
-
background
-
clip-path
02-CSS布局：
前言
常見的布局屬性
（1）display 確定元素的顯示類型：
-
block：塊級元素。
-
inline：行內(nèi)元素。
-
inline-block：對外的表現(xiàn)是行內(nèi)元素（不會獨(dú)占一行），對內(nèi)的表現(xiàn)是塊級元素（可以設(shè)置寬高）。
（2）position 確定元素的位置：
-
static：默認(rèn)屬性值。
-
relative：相對定位。相對于元素本身進(jìn)行偏移，不會改變它所占據(jù)的空間。
-
absolute：絕對定位。相對于父元素中最近的 relative/absolute 進(jìn)行偏移，會脫離文檔流。音標(biāo)：[??bs?lu?t]。
-
fixed：固定定位。相對于可視區(qū)域固定，會脫離文檔流。
relative、absolute、fixed這三個屬性，可以結(jié)合 z-index 來設(shè)置層級。
常見的布局方法
1、table 表格布局：早期使用的布局，如今用得很少。
2、float 浮動 + margin：為了兼容低版本的IE瀏覽器，很多網(wǎng)站（比如騰訊新聞、網(wǎng)易新聞、淘寶等）都會采用 float 布局。
3、inline-block 布局：對外的表現(xiàn)是行內(nèi)元素（不會獨(dú)占一行），對內(nèi)的表現(xiàn)是塊級元素（可以設(shè)置寬高）。
4、flex 布局：為布局而生，非常靈活，是最為推薦的布局寫法。
唯一的缺點(diǎn)是兼容性問題：
上圖中可以看到， flex 布局不支持 IE9 及以下的版本。如果你的頁面不需要處理 IE瀏覽器的兼容性問題，則可以放心大膽地使用 flex 布局。
flex 是一種現(xiàn)代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 規(guī)范。
5、響應(yīng)式布局。
float 布局
是 CSS 中一種比較麻煩的屬性，涉及到 BFC 和清除浮動（面試的重點(diǎn)）。
float 屬性的特點(diǎn)
-
元素浮動
-
脫離文檔流，但不脫離文本流
代碼舉例：
下面這兩個并列的div1和div2，默認(rèn)是在標(biāo)準(zhǔn)流中的：
在此基礎(chǔ)之上，如果給div1增加float: left屬性后，效果如下：
上圖中，可以看到，div1設(shè)置為浮動后，會脫離文檔流，不會對div2的布局造成影響；但是div1不會脫離文本流，它會影響div2中文字的排列。
其實，這正是 float 屬性的作用。float 本身是用來做圖文混排、文字環(huán)繞的效果。
float 所帶來的影響
1、對自身的影響：
-
形成“塊”（BFC）
-
位置盡量靠上
-
位置盡量靠左/右
下面這兩個并列的div1和div2，設(shè)置為浮動之后的效果：（都是盡量靠左顯示的）
在上方代碼的基礎(chǔ)之上，增加 div2的寬度之后，會發(fā)現(xiàn)，div2掉下來了：
2、對兄弟元素的影響：
-
不影響其他塊級元素的位置
-
影響其他塊級元素的內(nèi)部文本
3、對父級元素的影響：
-
從父級的布局中“消失”
-
造成父級元素的高度塌陷：父級元素?fù)伍_ div1 之后（父級元素里沒有其他元素的情況下），如果設(shè)置 div1 為 float 之后，，會讓父級元素的高度變?yōu)?。
inline-block 布局
對外的表現(xiàn)是行內(nèi)元素（不會獨(dú)占一行），對內(nèi)的表現(xiàn)是塊級元素（可以設(shè)置寬高）。
思路：像文本一樣去排列 block 元素，沒有清除浮動等問題。
存在的問題：需要處理間隙。代碼舉例如下：
?<!DOCTYPE html><html lang="en">?<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.container{width: 300px;height: 300px;background: pink;}?.div1{width: 100px;height: 100px;background: green;display: inline-block;}?.div2{width: 100px;height: 100px;background: yellowgreen;display: inline-block;}?.div3{background: yellow;}</style>?<body><div class="container"><div class="div1">div1的inline-block 屬性</div><div class="div2">div2的inline-block 屬性</div><div class="div3">琴棋書畫不會，洗衣做飯嫌累。</div></div></body>?</html>
上面的代碼，存在兩個問題。
問題一：如果設(shè)置div2的寬度為 200px 之后，div2 掉下來。
問題二：div1和div2設(shè)置為 inline-block之后，這兩個盒子之間存在了間隙。這是因為，此時的 div1和div2 已經(jīng)被當(dāng)成文本了。文本和文本之間，本身就會存在間隙。
為了去掉這個間隙，可以有幾種解決辦法：
辦法1：設(shè)置父元素container的字體大小為0，即font-size: 0，然后設(shè)置子元素 div1、div2的字體font-size: 12px。
辦法2：在寫法上，去掉div1和div2之間的換行。改為：
?<div class="div1">div1的inline-block 屬性</div><div class="div2">div2的inline-block 屬性</div>
響應(yīng)式布局
移動端用得較多，本文暫時先不講。