資訊專欄INFORMATION COLUMN
1.盒子模型
w3c標準: width: content
ie標準: width: content+padding+border
elementUi,bootstrap: box-sizing:border-box;
2.選擇器優先級!important > 行內樣式 > #id > .class > tag > * > 繼承 > 默認
3.BFC塊格式化上下文（Block Formatting Context，BFC）
3.1 觸發條件1. 根元素 1. position: absolute/fixed 2. display: inline-block / table 3. float 元素 4. ovevflow !== visible3.2 外邊距塌陷
當兩個元素垂直排列時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并,并選取margin大的
當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并
假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并
3.2.1 外邊距塌陷情況
blue
red
3.2.2 外邊距塌陷解決
blue
red
3.3 參考
https://www.cnblogs.com/ianya...
4.link與@import 4.1 區別@import是 CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。
加載頁面時，link標簽引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢后被加載。
@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標簽作為 HTML 元素，不存在兼容性問題。
可以通過 JS 操作 DOM ，插入link標簽來改變樣式；由于 DOM 方法是基于文檔的，無法使用@import的方式插入樣式。
link引入的樣式權重大于@import引入的樣式。(@import引入的樣式，會被層疊掉了。其雖然后被加載，卻會在加載完畢后置于樣式表頂部，最終渲染時自然會被下面的同名樣式層疊)
4.2參考https://www.jianshu.com/p/fc1...
5.如何居中一個元素 5.1 水平居中 5.2 垂直居中 5.3 水平垂直居中 5.4 參考https://github.com/ljianshu/B...
6. css繼承 6.1什么是css繼承繼承就是指子節點默認使用父節點的樣式屬性。
1.可繼承：顏色，文字，字體間距行高對齊方式，和列表的樣式可以繼承
不可繼承: 其它
所有元素可繼承：visibility和cursor。 內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。 終端塊狀元素可繼承：text-indent和text-align。 列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。6.2參考
https://www.nowcoder.com/ques...
7.css選擇器 7.1 參考 8.px,em,rem 8.1 pxpx:像素,px是相對于顯示器屏幕分辨率而言的
1920*1024 前者是屏幕寬度總共有1920個像素寬度后者則是高度為1024個像素
8.2 emem的值并不是固定的；
em會繼承父級元素的字體大小。
任意瀏覽器的默認字體高都是16px
.p1 {
font-size: 1em;
}
.div {
font-size: 30px;
}
.div p {
font-size: 1em;
}
我的父級是body
我的父級是div
8.3 rem
rem是css3中新增加的單位相對的只是HTML根元素，默認也是16px
通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應；
區別em是根據父元素繼承相應大小而不是固定的，rem是繼承html根元素的大小
只有改變根元素html的值才能改變rem的值
psd設計圖的寬度是750px,如何做移動端的適配?
Document
i am p
8.4 參考
https://www.jianshu.com/p/a0b...
9. 文字超出顯示省略號 9.1 單行
CSS文本溢出顯示省略號CSS文本溢出顯示省略號
9.2 多行
CSS文本溢出顯示省略號CSS文本溢出顯示省略號CSS文本溢出顯示省略號
10. CSS創建一個三角形的原理
11 chrome顯示小于12px字體
shrink
12.transform(轉換)
transform：轉換
可以可以對元素進行移動、縮放、轉動、拉長或拉伸
2d和3d
13. transition(過渡)過渡
四個過渡屬性
規定應用過渡的 CSS 屬性的名稱
定義過渡效果花費的時間。默認是 0。
規定過渡效果的時間曲線。默認是 "ease"。
規定過渡效果何時開始。默認是 0。
14. animation(動畫)
定義一個屬性， @keyfframes + 屬性
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
15 opacity: 0、visibility: hidden、display: none 優劣和適用場景
display: none (不占空間，不能點擊)（場景，顯示出原來這里不存在的結構）
visibility: hidden（占據空間，不能點擊）（場景：顯示不會導致頁面結構發生變動，不會撐開）
opacity: 0（占據空間，可以點擊）（場景：可以跟transition搭配）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103946.html
摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。 花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
摘要：半路出家的前端程序員應該不在少數，我也是其中之一。年，馮馮同事兼師兄看我寫太費勁，跟我說對面樓在找，問我要不要學，說出來可能有點丟人，但是在那之前，我真得不知道什么是，什么是。 半路出家的前端程序員應該不在少數，我也是其中之一。 為何會走向前端 非計算機專業的我，畢業之后，就職于一家電力行業公司，做過設備調試、部門助理、測試，也寫過一段時間的QT，那三年的時間，最難過的不是工作忙不忙，...
閱讀 2769·2021-11-17 09:33
閱讀 3091·2021-10-25 09:44
閱讀 1199·2021-10-11 10:59
閱讀 2396·2021-09-27 13:34
閱讀 2905·2021-09-07 10:19
閱讀 2133·2019-08-29 18:46
閱讀 1534·2019-08-29 12:55
閱讀 928·2019-08-23 17:11
