css就近原则_细品100道CSS知识点(上)「干货满满」
作者:hh_phoebe
轉發鏈接:https://juejin.im/post/5ee0cf335188254ec9505381
目錄
細品100道CSS知識點(上)【干貨滿滿】本篇
細品100道CSS知識點(下)「干貨滿滿」
前言
看到小伙伴留言說期待后面整理的CSS和JS篇,工具人小編整理出了本篇有關CSS部分的知識點。本篇文章作為對CSS知識點的統籌,囊括了目前大部分在面試當中常見的內容,包括一些易踩雷的知識點。文章篇幅較長,建議收藏慢慢細品。
文中篇概念性的內容也蠻多,小編一如既往的做了分割線,記憶力好的童鞋請自行忽略。
1.標準的CSS盒的模型及其和低版本的IE盒子模型的區別?
標準(W3C)盒子模型:width = 內容寬度(content) + border + padding + margin
低版本IE盒子模型: width = 內容寬度(content + border + padding)+ margin
圖片展示:
區別: 標準盒子模型盒子的height和width是content(內容)的寬高,而IE盒子模型盒子的寬高則包括content+padding+border部分。
2.幾種解決IE6存在的bug的方法
- 由float引起的雙邊距的問題,使用display解決;
- 由float引起的3像素問題,使用display: inline -3px;
- 使用正確的書寫順序link visited hover active,解決超鏈接hover點擊失效問題;
- 對于IE 的z-index問題,通過給父元素增加position: relative解決;
- 實用!important解決Min-height最小高度問題;
- 使用iframe解決select在IE6下的覆蓋問題;
- 使用over: hidden, zoom: 0.08, line-height: 1px解決定義1px左右的容器寬度問題;
注意:有關IE6支不支持!important的問題,對于單個類是支持的。例如:
.content { color: pink !importent };.content { color: orange };// 這里IE6及以上,FF,google等都將顯示粉紅色復制代碼當是,當一個樣式內部有多個相同屬性的時候。例如:
.content { color: pink !importent; color: orange };// IE7及以上,FF, google顯示粉紅色,而IE6將顯示橙色(原因是一個樣式內重復設置了屬性,后面的就會覆蓋掉之前的)復制代碼3.CSS選擇符有哪些?哪些屬性可以繼承?
常見的選擇符有一下:
id選擇器(#content),類選擇器(.content), 標簽選擇器(div, p, span等), 相鄰選擇器(h1+p), 的選擇器(ul+li), 后代選擇器(li, a), 通配符選擇器(*), 屬性選擇器(a[rel = "external"]), 偽類選擇器(a:hover, li:nth-child)
可繼承的樣式: font-size, font-family, color, UL, LI, DL, DD, DT;
不可繼承的樣式屬性: border, padding, margin, width, height;
4.CSS優先級算法如何計算?
- 考慮到就近原則,同權重情況下樣式定義以最近者為準
- 載入的樣式按照最后的定位為準
優先級排序:
同權重情況下: 內聯樣式表(標簽內部)> 嵌入樣式表(當前文件中)> 外部樣式表(外部文件中)
!important > # > . > tag
注意: !important 比 內聯優先級高
5.CSS3新增偽類有那些?
- :root 選擇文檔的根元素,等同于html元素
- :empty 選擇沒有子元素的元素
- :target 選取當前活動的目標元素
- :not(selector) 選擇除 selector 元素以外的元素
- :enabled 選擇可用的表單元素
- :disabled 選擇禁用的表單元素
- :checked 選擇被選中的表單元素
- :after 在元素內部最前添加內容
- :before 在元素內部最后添加內容
- :nth-child(n) 匹配父元素下指定子元素,在所有子元素中排序第n
- nth-last-child(n) 匹配父元素下指定子元素,在所有子元素中排序第n,從后向前數
- :nth-child(odd)
- :nth-child(even)
- :nth-child(3n+1)
- :first-child
- :last-child
- :only-child
- :nth-of-type(n) 匹配父元素下指定子元素,在同類子元素中排序第n
- :nth-last-of-type(n) 匹配父元素下指定子元素,在同類子元素中排序第n,從后向前數
- :nth-of-type(odd)
- :nth-of-type(even)
- :nth-of-type(3n+1)
- :first-of-type
- :last-of-type
- :only-of-type
- ::selection 選擇被用戶選取的元素部分
- :first-line 選擇元素中的第一行
- :first-letter 選擇元素中的第一個字符
6.如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?
水平居中
css: * {margin: 0; padding: 0;} .content { margin: 0 auto; width: 100px; height: 100px; background: pink; } html:垂直居中
css: * {margin: 0; padding: 0;} .content { width: 100px; height: 100px; background: pink; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); // 更新: 此處感謝小伙伴留言指出 }html:居中浮動元素
css: * {margin: 0; padding: 0;} .content { width: 100px; height: 100px; background: pink; position: relative; top:50%; left: 50%; margin: -150px 0 0 -250px; }html:如何讓絕對定位的div居中
css: * {margin: 0; padding: 0;} .content { margin: 0 auto; position: absolute; width: 1500px; background: pink; top: 0; left: 0; bottom: 0; right: 0; }html:7.display有哪些值?它們的作用是什么?
其中,常用的有:block, inline-block, none, table, line。
8.position的值relative和absolute定位原點?
首先,使用position的時候,應該記住一個規律是‘子絕父相’。
relative(相對定位): 生成相對定位的元素,定位原點是元素本身所在的位置;
absolute(絕對定位):生成絕對定位的元素,定位原點是離自己這一級元素最近的一級position設置為absolute或者relative的父元素的左上角為原點的。
fixed (老IE不支持):生成絕對定位的元素,相對于瀏覽器窗口進行定位。
static:默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right、z-index 聲明)。
inherit:規定從父元素繼承 position 屬性的值。
9.CSS3有哪些新特性?
關于CSS新增的特性,有以下:
- 選擇器;
- 圓角(border-raduis);
- 多列布局(multi-column layout);
- 陰影(shadow)和反射(reflect);
- 文字特效(text-shadow);
- 文字渲染(text-decoration);
- 線性漸變(gradient);
- 旋轉(rotate)/縮放(scale)/傾斜(skew)/移動(translate);
- 媒體查詢(@media);
- RGBA和透明度 ;
- @font-face屬性;
- 多背景圖 ;
- 盒子大小;
- 語音;
大致想到這么多,有遺漏的可以留言指出,小編看到會加上。
10.用純CSS創建一個三角形的原理是什么?
方法一:隱藏上,左,右三條邊,顏色設定為(transparent)
css: * {margin: 0; padding: 0;} .content { width: 0; height: 0; margin: 0 auto; border-width: 20px; border-style: solid; border-color: transparent transparent pink transparent; // 對應上右下左,此處為 下 粉色 }html:方法二: 采用的是均分原理
實現步驟: 1.首先保證元素是塊級元素;2.設置元素的邊框;3.不需要顯示的邊框使用透明色。
css: * {margin: 0; padding: 0;} .content { width:0; height:0; margin:0 auto; border:50px solid transparent; border-top: 50px solid pink; }html:11.什么是響應式設計?響應式設計的基本原理是什么?如何兼容低版本的IE?
響應式網站設計(Responsive Web design)是一個網站能夠兼容多個終端,而不是為每一個終端做一個特定的版本。
關于原理: 基本原理是通過媒體查詢(@media)查詢檢測不同的設備屏幕尺寸做處理。
關于兼容: 頁面頭部必須有mate聲明的viewport。
復制代碼12.為什么要初始化CSS樣式?
因為瀏覽器的兼容問題,不同瀏覽器對標簽的默認值是不同的,如果沒有對瀏覽器的CSS初始化,會造成相同頁面在不同瀏覽器的顯示存在差異。
13.浮動原理以及為什么會出現浮動和什么時候需要清除浮動?清除浮動的方式?
非IE瀏覽器下,容器不設定高度且子元素浮動時,容器高度不能被內容撐開。此時,內容會溢出到容器外面而影響布局。此類現象被稱為浮動(溢出)。
原理:
- 浮動元素脫離文檔流,不占據空間(引起“高度塌陷”現象);
- 浮動元素碰到包含它的邊框或其它浮動元素的邊框停留。
浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流之中,文檔流的塊級框會表現的就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊級框之上。
浮動會帶來的問題:
- 父級元素的高度將會無法被撐開,會影響與父級元素同級的元素
- 與浮動元素同級的非浮動元素(內聯元素)會跟隨其后
- 若浮動的元素不是第一個元素,則該元素之前的元素也要浮動,否則會影響頁面的顯示結構
清除方式:
- 父級盒子定義高度(height);
- 最后一個浮動元素后面加一個div空標簽,并且添加樣式clear: both;
- 包含浮動元素的父級標簽添加樣式overflow為hidden/both;
- 父級div定義zoom;
14.CSS優化、提高性能的方法有哪些?
- 多個css可合并,并盡量減少http請求
- 屬性值為0時,不加單位
- 將css文件放在頁面最上面
- 避免后代選擇符,過度約束和鏈式選擇符
- 使用緊湊的語法
- 避免不必要的重復
- 使用語義化命名,便于維護
- 盡量少的使用!impotrant,可以選擇其他選擇器
- 精簡規則,盡可能合并不同類的重復規則
- 遵守盒子模型規則
15.CSS預處理器/后處理器是什么?為什么要使用它們?
預處理器,如:less,sass,stylus,用來預編譯sass或者less,增加了css代碼的復用性,還有層級,mixin, 變量,循環, 函數等,對編寫以及開發UI組件都極為方便。
后處理器, 如: postCss,通常被視為在完成的樣式表中根據css規范處理css,讓其更加有效。目前最常做的是給css屬性添加瀏覽器私有前綴,實現跨瀏覽器兼容性的問題。
css預處理器為css增加一些編程特性,無需考慮瀏覽器的兼容問題,我們可以在CSS中使用變量,簡單的邏輯程序,函數等在編程語言中的一些基本的性能,可以讓我們的css更加的簡潔,增加適應性以及可讀性,可維護性等。
其它css預處理器語言:Sass(Scss), Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。
使用原因:
- 結構清晰, 便于擴展
- 可以很方便的屏蔽瀏覽器私有語法的差異
- 可以輕松實現多重繼承
- 完美的兼容了CSS代碼,可以應用到老項目中
16.::before 和 :after中雙冒號和單冒號有什么區別?解釋一下這2個偽元素的作用
(1)、冒號(:)用于CSS3偽類,雙冒號(::)用于CSS3偽元素。
(2)、::before就是以一個子元素的存在,定義在元素主體內容之前的一個偽元素。并不存在于dom之中,只存在在頁面之中。
注意: :before和 :after 這兩個偽元素,是在CSS2.1里新出現的。起初,偽元素的前綴使用的是單冒號語法,但隨著Web的進化,在CSS3的規范里,偽元素的語法被修改成使用雙冒號,成為::before ::after。
17.讓頁面里的字體變清晰,變細用CSS怎么做?
-webkit-font-smoothing在 window系統下沒有起作用,但是在 IOS設備上起作用 -webkit-font-smoothing:antialiased是最佳的,灰度平滑。
18. 如果需要手動寫動畫,你認為最小時間間隔是多久,為什么?
多數顯示器默認頻率是60Hz,即1秒刷新60次,所以理論上最小間隔為1/60*1000ms = 16.7ms。
19. rgba() 和 opacity 的透明效果有什么不同?
opacity 作用于元素以及元素內的所有內容(包括文字)的透明度;
rgba()只作用于元素自身的顏色或其背景色,子元素不會繼承透明效果;
20.css 屬性 content 有什么作用?
content 屬性專門應用在 before/after 偽元素上,用于插入額外內容或樣式。
21.請解釋一下 CSS3 的 Flexbox(彈性和布局模型)以及適用場景?
概念: Flex是Flexible Box的縮寫,意為”彈性布局”,用來為盒狀模型提供最大的靈活性。采用Flex布局的元素,稱為Flex容器(flex container),簡稱”容器”。它的所有子元素自動成為容器成員,稱為Flex項目(flex item),簡稱”項目”。
適用場景: 任何一個容器都可以指定為Flex布局。Flexbox 用于不同尺寸屏幕中創建可自動擴展和收縮布局。
22.display:inline-block 什么時候會顯示間隙?
- 有空格時候會有間隙, 可以刪除空格解決;
- margin正值的時候, 可以讓margin使用負值解決;
- 使用font-size時候,可通過設置font-size:0、letter-spacing、word-spacing解決;
23. png、jpg、 jpeg、 bmp、gif 這些圖片格式解釋一下,分別什么時候用。有沒有了解過webp?
(1)、png-便攜式網絡圖片(Portable Network Graphics),是一種無損數據壓縮位圖文件格式。優點是:壓縮比高,色彩好。 大多數地方都可以用。
(2)、jpg是一種針對相片使用的一種失真壓縮方法,是一種破壞性的壓縮,在色調及顏色平滑變化做的不錯。在www上,被用來儲存和傳輸照片的格式。
(3)、gif是一種位圖文件格式,以8位色重現真色彩的圖像??梢詫崿F動畫效果。
(4)、bmp的優點: 高質量圖片;缺點: 體積太大; 適用場景: windows桌面壁紙;
(4)、webp格式是谷歌在2010年推出的圖片格式,壓縮率只有jpg的2/3,大小比png小了45%。缺點是壓縮的時間更久了,兼容性不好,目前谷歌和opera支持。
24. 在CSS樣式中常使用 px、em 在表現上有什么區別?
px相對于顯示器屏幕分辨率,無法用瀏覽器字體放大功能。
em值不是固定的,會繼承父級的字體大小: em = 像素值 / 父級font-size。
25.一個高度自適應的div,里面有兩個div,一個高度100px,希望另一個填滿剩下的高度問題怎么解決?
方案一: .content { height: calc(100%-100px); }
方案二:.container { position:relative; } .content { position: absolute; top: 100px; bottom: 0; }
方案三:.container { display:flex; flex-direction:column; } .content { flex:1; }
26.overflow: scroll 時不能平滑滾動的問題怎么處理?
監聽滾輪事件,然后滾動到一定距離時用 jquery 的 animate 實現平滑效果。
27.transform、animation和animation-duration的區別?
- Transform: 它和width、left一樣,定義了元素很多靜態樣式實現變形、旋轉、縮放、移位及透視等功能,通過一系列功能的組合我們可以實現很炫酷的靜態效果(非動畫)。
- Animation: 作用于元素本身而不是樣式屬性,屬于關鍵幀動畫的范疇,它本身被用來替代一些純粹表現的javascript代碼而實現動畫,可以通過keyframe顯式控制當前幀的屬性值。
- animation-duration:規定完成動畫所花費的時間,以秒或毫秒計。
28.對 line-height 是如何理解的?
line-height指的是一行字的高度,包含了字間距,實際上是下一行基線到上一行基線的距離。如果一個標簽沒有定義height屬性,那么其最終表現的高度是由line-height決定的。一個容器沒有設置高度,那么撐開容器的高度的是line-height,而不是容器內部的文字內容。把line-height值設置為height一樣大小的值可以實現單行文字的垂直居中。line-height和height都能撐開一個高度,height會觸發haslayout,而line-height不會。
29.抽離樣式模塊怎么寫?述其思路。
可將css拆分成兩部分: 公共CSS和業務CSS。
網站的配色,字體,交互提取出為公共的CSS。這部分的CSS命名不應涉及具體的業務。對于業務CSS,需要有統一的命名,使用公共的前綴。
30.在網頁中的應該使用奇數還是偶數的字體?
在網頁中的應該使用“偶數”字體:
偶數字號相對更容易和 web 設計的其他部分構成比例關系,使用奇數號字體時文本段落無法對齊,宋體的中文網頁排布中使用最多的就是 12 和 14。
31. 什么是外邊距重疊? 重疊的結果是什么?
首先,外邊距重疊就是 margin-collapse。相鄰的兩個盒子(可能是兄弟關系也可能是祖先關系)的外邊距可以結合成一個單獨的外邊距。 這種合并外邊距的方式被稱為折疊,結合而成的外邊距稱為折疊外邊距。
折疊結果遵循下列計算原則:
- 兩個相鄰的外面邊距是正數時,折疊結果就是它們之中的較大值;
- 兩個相鄰的外邊距都是負數時,折疊結果是兩者絕對值的較大值;
- 兩個外邊距一正一負時,折疊結果是兩者的相加的和;
32.display: none; 與 visibility: hidden; 有什么區別?
聯系: 這兩個屬性的值都可以讓元素變得不可見;
區別:
- 從占據空間角度看:display: none;會讓元素完全從渲染樹中消失,渲染的時候不占據任何空間;visibility: hidden;不會讓元素從渲染樹消失,渲染師元素繼續占據空間,只是內容不可見;
- 從繼承方面角度看:display: none;是非繼承屬性,子孫節點消失由于元素從渲染樹消失造成,通過修改子孫節點屬性無法顯示;visibility:hidden;是繼承屬性,子孫節點消失由于繼承了hidden,通過設置visibility: visible;可以讓子孫節點顯式;
- 從重繪和重排角度看:修改常規流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪 讀屏器不會讀取display: none;元素內容;會讀取visibility: hidden元素內容;
33.css hack原理及常用hack有哪些?
原理: 利用不同瀏覽器對CSS的支持和解析結果不一樣編寫針對特定瀏覽器的樣式。
常見的hack有: 屬性hack、選擇器hack、IE條件注釋。
34.link 與 @import 的區別?
- link 是HTML方式, @import 是CSS方式;
- link最大限度支持并行下載,@import 過多嵌套導致串行下載,出現FOUC;
- link 可以通過 rel="alternate stylesheet"指定候選樣式;
- 瀏覽器對 link 支持早于@import,可以使用 @import對老瀏覽器隱藏樣式;
- @import必須在樣式規則之前,可以在css文件中引用其他文件;
總的來說: link優于@import。
35.什么是 FOUC(Flash of Unstyled Content)? 如何來避免 FOUC?
當使用@import導入CSS時,會導致某些頁面在IE出現奇怪的現象: 沒有樣式的頁面內容顯示瞬間閃爍,這種現象被稱為“文檔樣式暫時失效”,簡稱FOUC。
產生原因: 當樣式表晚于結構性html加載時,加載到此樣式表時,頁面將會停止之前的渲染。等待此樣式表被下載和解析后,再重新渲染頁面,期間導致短暫的花屏現象。
解決辦法: 只要在
之間加入一個或者元素即可。36.display,float,position有什么關系?
- 如果 display 為none,那么position和float都不起作用,元素不顯示;
- 如果position值為absolute或者fixed,元素絕對定位,float的計算值為none,display根據下面的表格進行調整;
- 如果float不是none,框是浮動的,display根據下表進行調整;
- 其他情況下display的值為指定值 總結起來:絕對定位、浮動、根元素都需要調整 display;
37.外邊距折疊(collapsing margins)
毗鄰的兩個或多個margin會合并成一個margin,叫做外邊距折疊。規則如下:
- 兩個或多個毗鄰的普通流中的塊元素垂直方向上的margin會折疊;
- 浮動元素或linline-block元素或絕對定位元素的margin不會和垂直方向上的其他元素的margin折疊;
- 創建了會計格式化上下文的元素,不會和它的子元素發生margin折疊;
- 元素自身的margin-bottom和margin-top相鄰時也會折疊;
38.有哪幾種隱藏元素的方法?
- visibility: hidden; 這個屬性只是簡單的隱藏某個元素,但是元素占用的空間仍然存在;
- opacity: 0;``CSS3屬性,設置0可以使一個元素完全透明;
- position: absolute; 設置一個很大的 left 負值定位,使元素定位在可見區域之外;
- display: none; 元素會變得不可見,并且不會再占用文檔的空間;
- transform: scale(0); 將一個元素設置為縮放無限小,元素將不可見,元素原來所在的位置將被保留;
- HTML5屬性,效果和display:none;相同,當這個屬性用于記錄一個元素的狀態;
- height: 0; 將元素高度設為 0 ,并消除邊框;
- filter: blur(0); CSS3屬性,將一個元素的模糊度設置為0,從而使這個元素“消失”在頁面中;
39.li與li之間有看不見的空白間隔是什么原因引起的?有什么解決辦法?
li排列受到中間空白(回車/空格)等的影響,因為空白也屬于字符,會被應用樣式占據空間,產生間隔。解決辦法:
- 在ul中用font-size:0(谷歌不支持);可以使用letter-space:-3px;
- 設置float:left;
40.瀏覽器是怎樣解析CSS選擇器的?
瀏覽器解析CSS是從上到下,從左到右解析的,這樣會提高查找選擇器所對應的元素的效率(至于原因,有興趣的童鞋可以自行去了解)。
41.全屏滾動的原理是什么?用到了CSS的哪些屬性?
全屏滾動有點類似于輪播,整體的元素一直排列下去,假設有5個需要展示的全屏頁面,那么高度是500%,只是展示100%。也可以理解為超出隱藏部分,滾動時顯示。
可能用到的CSS是: overflow:hidden; transform:translate(100%, 100%); display:none;
42.對瀏覽器內核的理解?
瀏覽器內核主要分為兩個部分: 渲染引擎和js引擎;
- 渲染引擎: 負責取得頁面的內容(html,xml, 圖像等)、整理訊息(加入css等)、以及計算網頁的顯示方式,然后對輸出至顯示器或者打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同,所以渲染的效果也不同。所有網頁瀏覽器、電子郵件客戶以及其他所需要編輯、顯示網絡的應用程序都需要內核。
- JS引擎: 解析和執行Javascript來實現網頁的動態效果。
最開始渲染引擎和js引擎沒有明確的區分,后來js引擎越來越獨立,內核就傾向于只渲染引擎。
43.對WEB標準以及W3C的理解與認識
對于結構的要求:(規范的標簽可以提高搜索引擎對頁面的抓取效率,對SEO很有幫助)
- 標簽要閉合
- 標簽字母小寫
- 標簽不允許隨意嵌套
對于CSS和JS來說:
- 盡量使用外鏈CSS樣式表和JS腳本。同時結構,表現和行為分為三塊,符合規范。此外,還得提高頁面渲染速度,提高用戶體驗。
- 盡量少用行內樣式,保證結構和表現分離。標簽的id和class等的屬性命名要做到見文知意,標簽越少,加載越快,用戶體驗就會越高。同時代碼方面也會更易于維護,便于改版。
- 不需要變動內容,便可一同打印版本而不需要復制內容,提高網站易用性。
44.制作一個訪問量很大的網站,如何管理所有的css文件,js和圖片?
從人手,分工和同步方面回答:
- 前期團隊必須確認好全局樣式,編碼模式;
- 代碼風格,編寫習慣保持一致;
- 標注樣式編寫人,各模塊都要及時標注(標注關鍵樣式調用的地方);
- 對自己負責的頁面進行標注;
- CSS和JS分文件夾存并行存放,命名都要統一;
- JS分文件夾存放,命名以該JS功能為準的英文翻譯;
- 圖片采用整合的.png格式存放,盡量整合在一起,方便將來管理;
45.視差滾動效果以及如何實現?
視差滾動(Parallax Scrolling)指網頁滾動過程中,多層次的元素進行不同程度的移動,視覺上形成立體運動效果的網頁展示技術(3D效果)。
實現方式:
- CSS3實現: 優點是開發時間相對較短,性能和開發效率比較好。缺點是不能兼容到低版本的瀏覽器;
- JQuery實現:(通過控制不同層滾動速度,計算每一層的時間)優點是能兼容到各個版本,效果可控性好,缺點是開發起來對制作者的要求較高;
- 插件實現方式: 例如使用parallax-scrolling,兼容性十分好;
46.對BFC規范(塊級格式化上下文:block formatting context)的理解
BFC規定了內部的Block Box如何布局。一個頁面是由很多個Box組成的,元素的類型和display屬性,決定了這個Box的類型。不同類型的box,會參與不同的Formatting Context(決定如何渲染文檔的容器),因此Box內的元素會以不同的方式渲染,也是就是說BFC內部的元素和外部的元素不會相互影響。
定位方案:
- 內部的box會在垂直方向上一個接一個的放置;
- box垂直方向的距離由margin決定,屬于同一個BFC的兩個相鄰Box的margin會發生重疊;
- 每個元素margin box的左邊,與包含塊border box的左邊相接觸;
- BFC的區域不會與float box重疊;
- BFC是頁面上的一個隔離的獨立容器,容器里面的元素不會影響到外面的元素;
- 計算BFC的高度時,浮動元素也會參與計算。
滿足下列條件之一就可以出發BFC:
- 根元素變化,即html;
- float的值不為none(默認);
- overflow的值不為visible(默認);
- display的值為inline-block, tabke-cell,table-caption;
- position的值為absolute或fixed;
47.元素豎向的百分比設定是相對于容器的高度嗎?
一般來說,子元素的百分比單位都是以父元素為依據。但是margin和padding例外。元素的height是相對于容器的高度,但是元素的margin和padding是相對于容器的寬度。
48.一個滿屏'品字'布局如何設計?
方法有很多種,但是比較簡單的方式就是: 上面的div寬度設置為100%,底下兩個div設置成50%,并使用float或者inline使其保持在同一行即可(具體的樣式可以自己微調)。如下:
css: .content { width: 50%; height: 150px; margin: 0 auto;}.top { width: 40%; height: 50px; background-color: pink; margin-bottom: 50px; margin-left: 30%;}.left { width: 45%; height: 50px; background-color: pink; float: left;}.right { width: 45%; height: 50px; background-color: pink; float: right;}html:49.經常遇到的瀏覽器的兼容性有哪些?原因,解決方法是什么,常用hack的技巧 ?
(1)、問題:png24位的圖片在ie瀏覽器上出現背景。解決: 做成png8;
(2)、問題:瀏覽器默認的margin和padding不同。 解決: 添加一個全局的*{ margin: 0; padding: 0;};
(3)、問題:IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性,而Firefox下,只能使用getAttribute()獲取自定義屬性。 解決: 統一通過getAttribute()獲取自定義屬性;
(4)、問題: IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性,而Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。 解決: 使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX。
50.box-sizing 常用的屬性有哪些?分別有什么作用?
- box-sizing: content-box; // 默認的標準(W3C)和模型元素效果;
- box-sizing: border-box; // 觸發怪異(IE)和模型元素的效果;
- box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值;
本篇未完結,請見下一篇
推薦CSS學習相關文章
手把手教你CSS Flex布局「真香」
細品用SVG實現一個優雅的提示框
手把手整理CSS3知識匯總【思維導圖】
手把手教你55 個提高CSS 開發效率的必備片段
手把手教你常見的CSS布局方式【實踐】
讓CSS flex布局最后一行左對齊的N種方法
妙用CSS變量,讓你的CSS變得更心動
純CSS實現簡單骨骼動畫【實踐】
CSS揭秘實用技巧總結
你未必知道的49個CSS知識點
深入淺出超好用的 CSS 陰影技巧
關于前端CSS寫法104個知識點匯總(一)
關于前端CSS寫法104個知識點匯總(二)
前端開發規范:命名規范、html規范、css規范、js規范
CSS變量實現暗黑模式,我的小鋪頁面已經支持
深入淺出CSS中徹底搞懂word-break、word-wrap、white-space
深入淺出詳細講解CSS 渲染原理以及優化策略
手把手教你深入CSS實現一個粒子動效的按鈕
手把手教你css 中多種邊框的實現小竅門【實踐】
手把手詳細教你優化CSS提高網站加載速度的21種方法匯總【實踐】
作者:hh_phoebe
轉發鏈接:https://juejin.im/post/5ee0cf335188254ec9505381
總結
以上是生活随笔為你收集整理的css就近原则_细品100道CSS知识点(上)「干货满满」的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 超详细的8psk调制解调通信系统讲解与仿
- 下一篇: 求高光谱图像相关系数矩阵