css3的一種新的布局模式
主要記錄盒子自身樣式與子元素樣式
屬性名稱
屬性功能
屬性值例子
display
設定彈性盒子型別
flex,inline-flex
display:flex
flex-direction
設定伸縮盒的起點與終點位置
row, row-reverse, column, column-reverse
flex-direction:column
flex-wrap
子元素寬度超出時是否換行
nowrap, wrap, wrap-reverse
flex-wrap:wrap
justify-content
子元素橫向對齊方式
flex-start, flex-end, center, space-between, space-around
justify-content:space-around
align-items
子元素在側軸方向上的對齊方式
flex-start, flex-end, center, baseline, stretch
align-items:center
align-content
子元素縱軸的對齊方式
flex-start, flex-end, center, space-between, space-around, stretch
align-content:space-around
屬性名稱
屬性功能
屬性值例子
flex-grow
多出的空間兄弟節點侵分比例
預設值0
flex-grow: 1;
flew-shrink
超出的空間壓縮比例1
預設值1
flex-shrink:2;
flex-basis
父容器為彈性盒子時自己的寬度基準
預設值auto
flex-basis:1
flex
上面三個的復合屬性
1，auto,none
flex:1
order
彈盒子元素出現順序
數值order:1
align-self
自身在縱軸上的對齊方式
auto, flex-start, flex-end, center, baseline, stretch
align-self:center
根據不同的訪問，呈現出不同的效果
語法一
@media **型別 and|not|only （**條件）
例子：@media screen and (
min-width
:1200px)
}@media screen and (
max-width
:75rem)
}
rel=
'stylesheet'
media
='**型別 and|not|only (條件）'
href
='樣式檔案.css'
>
一，超出空間：內部所有子容器寬度之和-外部容器的寬度
二，加權總和：子容器1寬度它的flew-shrink值+其它容器的這個資料
三，子容器被移除的值：子容器的寬度flew-shrink/加權總和
四，子容器的最終寬度：子容器原始寬度-子容器被移除的值
五，例子
前端小知識彙總
disabled 超文字傳輸協議 http 的設計目的是保證客戶機與伺服器之間的通訊。http 的工作方式是客戶機與伺服器之間的請求 應答協議。web 瀏覽器可能是客戶端，而計算機上的網路應用程式也可能作為伺服器端。head 與 get 相同，但只返回 http 報頭，不返回文件主體 put 上傳指...
容易誤解的前端知識彙總（筆記中）
1.first child last child，選中第乙個或最後乙個元素，注意官方稱父元素的第乙個.這個意味著著即便你加上 a 樣式 這樣的選擇器，他依然不理不睬。效果如下 我們使用這個css選中最後乙個a div1 p last child元素結構如下 第乙個段落。第二個段落。第三個段落。第四個...
前端知識彙總 面試用 （二）
1 事件冒泡 ie事件流 事件開始時由最具體的元素 文件中巢狀層次最深的那個節點 節點，然後逐級向上傳播到較為不具體的節點 文件 所有瀏覽器均支援 2 事件捕獲 與冒泡剛好相反，所有瀏覽器均支援，不過不建議使用 3 dom事件流 dom2級事件流規定的事件流包括三個階段 事件捕獲階段 處於目標階段和...