邢臺哪里可以做網(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)式布局
移動端用得較多,本文暫時先不講。