1.繼承
css的繼承：就是給父級設定一些屬性，子級繼承了父級的該屬性，這就是我們css中的繼承，官方的解釋，繼承是一種規則，它允許樣式不僅應用于特定的html標簽元素，而且應用于其后代元素，
a.有繼承的屬性
1.字體系列屬性
font:組合字體
font-family:規定元素的字體系列
font-weight:設定字體的粗細
font-size:設定字體的尺寸
font-style:定義字體的風格
2.文本系列屬性
text-index:文本縮進
text-align:文本水平對齊
line-height:行高
word-spacing:增加或減少單詞間的空白，即字間隙
letter-spacing:增加或減少字符間的空白，即字符間距
direction:規定文本的書寫方向
color:文本顏色
3.元素的可見性
visibility
4.游標屬性
cursor
5.所有元素可以繼承的屬性
visibility/cursor
6.行內元素可以繼承的屬性
字體系列屬性/除text-indent,text-align之外的文本系列屬性
7.塊級元素可以繼承的屬性
text-align/text-indent
b.無繼承的屬性
1.display
2.文本屬性
vertical-align:垂直文本對齊
text-shadow:文本陰影效果
white-space:空白符
3.盒子模型屬性
width/height/margin/border/padding
4.背景屬性
background/background-color/background-image/background-repeat/background-position
5.定位屬性
float/clear/position/top/right/bottom/left/z-index/overflow
6.輪廓樣式屬性
outline
2.css預處理工具
css前處理器是一個能讓你通過前處理器自己獨特語法生成css的程式
- sass
- 兼容css
擴展名.scss/.sass
- less
兼容css
擴展名.less - stylus
兼容css
擴展名.styl
采用縮進語法
3.行內元素/塊級元素
- 塊級元素
1.總是從新的一行開始，即各個塊級元素獨占一行，默認垂直向下排列
2.高度，寬度，margin，padding都是可控的，設定有效
3.寬度沒有設定時，默認為100%
4.塊級元素中可以包含塊級元素和行內元素 - 行內元素
1.和其它元素在一行，即行內元素和其它元素都會在一條水平線上排列
2.高度，寬度是不可控，設定無效，由內容決定
3.根據標簽語意化的理念，行內元素最好只包含行內元素，不包含塊級元素 - 轉換
1.display:inline轉換為行內元素
2.display:block轉換為塊狀元素
3.display:inline-block轉換為行內塊狀元素 - 塊狀元素可以繼承的屬性
Text-indent
Text-align
Visibility
Cursor
4.盒模型
css盒模型本質是一個盒子，封裝html元素，包括margin/border/padding/content
- 標準模型
width=content - ie模型
width=border+padding+content - 自定義
Box-sizing:content-box（默認模式）
Box-sizing:border-box（ie模式） - js獲取盒模型寬高
dom.style.width/height 獲取行內樣式的寬高
window.getComputedStyle(dom).width/height ie模式下
Dom.getBoundingClientRect().width/height 渲染后的寬高
dom.offsetWidth/offsetHeight 內容+內邊距+邊框不包括外邊距
5.bfc塊級格式化背景關系
- 概念：bfc是css布局的一個概念，是一個獨立的渲染區域，是一個環境，里面的元素不會影響外部的元素，
- 問題：父子元素和兄弟元素邊距重疊，重疊原則取最大值，空元素的邊距重疊取margin和padding的最大值
- css創建bfc，脫離檔案流
1.html元素
2.浮動
3.絕對定位
4.display:inline-block
5.表格元素
6.彈性盒子
7.overflow:hidden - 使用場景
1.自適應布局，避免多列布局由于寬度計算四舍五入換行
2.避免元素被浮動元素覆寫
3.父元素高度包含子浮動元素，清除內部浮動
4.去除邊距重疊，分別屬于不同的bfc
6.ifc行內格式化背景關系
1.內部的box會在水平方向，一個接一個的放置
2.這些box的水平方向的margin/border/padding都有效
3.對齊方式line-height/vertical-align
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540649.html
標籤：其他