努力學習與總結是對自己能力的提升,也希望能幫助到同學們。
BFC
塊狀格式化上下文(block formatting context)簡稱 BFC
:是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素。
如何觸發BFC?
- 根元素(
html
): 最大的BFC position
設置爲fixed
或者absolute
- display 設置爲
inline-block
、table-block
、table-caption
overflow
的值不爲visible
float
的值不爲none
- MDN 格式化上下文
BFC的定位方案
- 內部的box會在 垂直方向上 一個接一個的擺放
- 屬於同一個BFC中的兩個相鄰元素的 垂直方向上 margin 會重疊
- BFC中每個元素的左邊margin會與包含塊的左邊border相接觸
- 計算BFC的高度時,浮動元素也會參與計算
選擇器權重
Css選擇器優先級
- !important -> 最高
- 內聯style -> 1000
- id -> 100
- class -> 10
- tag -> 1
- 繼承樣式
margin 屬性
margin
屬性爲給定元素設置所有四個(上下左右)方向的外邊距屬性。- 普通元素的 百分比margin 都是相對於容器的
寬度
計算的 - 絕對定位元素的 百分比margin 相對於其定位祖先元素的寬度計算的
- 上下margin會重疊:只會發生在
block
元素上,(取最大值)- 解決重疊方法:
- 父元素設置
BFC
(如overflow:hidden;如position:absolute等) - 父元素設置
border
/padding
- 當 margin 的值爲
auto
時。瀏覽器會自動選擇一個合適的margin來應用(自動分配剩餘空間)- 需要元素是 塊狀元素
- 需要元素 設置寬度
- margin 可以爲 負值
水平居中 簡單版
- 內聯元素
text-align: center;
- 固定寬度的 塊狀元素
// 設置 左右 margin 爲 auto
margin: 0 auto;
垂直居中 簡單版
- 單行文本 垂直居中 ->
line-height
- 多行文本 垂直居中
// vertical-align 只對行內元素、表格單元格元素生效
// 指定 行內元素/表格單元元素 基線相對於 塊狀元素基線的位置
.center-table {
display: table;
}
.center-table p {
display: table-cell;
vertical-align: middle;
}
元素居中(水平且垂直) 進階
- 固定寬高 居中
通過 絕對定位 + 負margin
#main{
position: relative;
// ... 略
}
#center{
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px;
}
通過 絕對定位 + margin: auto;
#main{
position: relative;
// ... 略
}
#center{
width: 100px;
height: 100px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
}
- 不定寬高
transform 居中
#main{
position: relative;
// ... 略
}
#center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
flex 居中(一)
#main{
display: flex;
justify-content: center;
align-items: center;
}
flex 居中(二)
#main{
display: flex;
// ... 略
}
#center{
margin: auto;
}
瀏覽器如何解析 css
- css 的解析是從上往下
- 渲染順序也是從上往下
- 下載和渲染是同時進行的。
- css的解析和js的解析是不能同時進行的
css選擇器
的解析是從右向左解析- (jQuery選擇器解析方式同理)
- 能先確定元素位置,減少匹配次數
CSS屬性支持判斷
- 利用屬性覆蓋原理
將高版本瀏覽器支持的特性寫在後面。利用瀏覽器的2個CSS解析特性:
- 後面的屬性覆蓋前面的屬性
- 遇到不認識的語法,CSS parser 不解析。
div {
background: red;
background: linear-gradient(90deg, red, yellow)
}
- 使用
.css
的@supports
來判斷屬性支持情況
// 支持特定屬性的處理
@supports (position:sticky) {
div {
position:sticky;
}
}
// 不支持特定屬性:用not處理
@supports not (background: linear-gradient(90deg, red, yellow)) {
div {
background: red;
}
}
// 如果是多個css屬性:用and處理
@supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) {
p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
- 使用 JS 判斷 CSS 屬性支持情況
作爲 @supports 的另一種形式出現的,我們可以使用 javascript 的方式來獲得 CSS 屬性的支持情況。
CSS.supports('display', 'flex');
必須2個參數, 否則返回false,(目前不支持IE瀏覽器)
- 使用 JS 庫
modernizr
如果瀏覽器不支持@supports
,可以通過調用ele.style來判斷屬性支持情況(庫:Modernizr)
- 通過判斷 賦值再查詢 來判斷是否支持
var root = document.documentElement; //HTML
for(var key in root.style) {
console.log(key);
}
// 將會打印
// alignContent
// alignItems
// alignSelf
// alignmentBaseline
// all
// animation
// ...
元素可能有 background 屬性,但是不支持具體的 linear-gradinet() 屬性值。這個時候該如何檢測呢?只需要將具體的值賦值給某一元素,再查詢這個屬性值能否被讀取。
var root = document.documentElement;
root.style.backgroundImage = 'linear-gradient(90deg, #888, #ccc)';
if(root.style.backgroundImage) {
// 支持
} else {
// 不支持
}
簡單的 CSS 屬性支持封裝
通過頁面隱藏的元素進行測試。
/**
* 用於簡單的 CSS 特性檢測
* @param [String] property 需要檢測的 CSS 屬性名
* @param [String] value 樣式的具體屬性值
* @return [Boolean] 是否通過檢查
*/
function cssTest(property, value) {
// CSS && CSS.supports
// CSS.supports('display', 'flex'); 必須2個參數, 否則返回false
// 用於測試的元素,隱藏在頁面上
var ele = document.getElementById('test-display-none');
// 只有一個參數的情況
if(arguments.length === 1) {
if(property in ele.style) {
return true;
}
// 兩個參數的情況
}else if(arguments.length === 2){
ele.style[property] = value;
if(ele.style[property]) {
return true;
}
}
return false;
}
position定位 細節
position: absolute;
- 相對於 非static的先輩元素定位
- 如果先輩元素全是
static
,那麼相對於視口定位
position:fixed
- 相對於視口定位
- 如果先輩元素有
非none
的transform
屬性,那麼相對於該先輩元素定位- (不注意容易產生BUG)
visibility:hidden、display:none、z-index=-1、opacity:0
清除浮動
浮動元素脫離了文檔流,不能撐開元素。需要清除浮動。
清除浮動的方法
- 僞元素 +
clear: both;
// 全瀏覽器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
display: table;
content: " ";
clear: both;
}
.clearfix{
*zoom: 1;
}
// 全瀏覽器通用的clearfix方案【推薦】
// 引入了zoom以支持IE6/7
// 同時加入:before以解決現代瀏覽器上邊距摺疊的問題
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}
- 給父元素設置
overflow: hidden;
- 空白元素 +
clear: both;
(和僞元素實現原理一樣,不過 low 很多)
rem em px vw
px
:(pixel 像素的縮寫),相對於顯示器屏幕分辨率em
:相對於父元素的font-size
rem
:可想成root-em
,相對於 root(html)的font-size
vw
:相對視口(viewport)的寬度而定的,長度等於視口寬度的 1/100
僞類和僞元素的作用和區別
僞類:僞類選擇元素基於的是當前元素處於的狀態,或者說元素當前所具有的特性,功能和class有些類似,但它是基於文檔之外的抽象,所以叫僞類(:first-child :link :visitive :hover :focus :lang)
僞元素:僞元素控制的內容實際上和元素是相同的,但是它本身只是基於元素的抽象,不存在於文檔中,所以叫僞元素(:first-line :first-letter :befoe :after)