css 屬性筆記

1.calc

width : calc(100% - 50px);   /*注意運算子前後要有空格。*/

width : calc(100% - 2.5rem);   /*注意運算子前後要有空格。*/

.aticle

他們都是相對單位。rem是相對於頁根元素html設定的字型大小計算相對單位。em是相對於當前元素的字型大小計算。如果當前元素沒有設定字型大小，em會根據繼承去獲取字型大小。所以有時父元素大小改變了，通過em設定寬高的子元素也相應改變。

html 

.rem 
.em 

通用選擇器（*）

<

標籤選擇器(h1) 

<

類選擇器(.) 

<

偽類選擇器(:hover) 

< id

選擇器(#)

5.css屬性中

text-indent

和padding

的區別text-indent是首行縮排效果，第二行又是正常顯示。

padding

是內邊距，所有行都會有左縮排的效果。

6.box-sizing盒子模型應用。

相容性設定： -webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box;

設定了當前屬性的元素：寬高的計算會包括內邊距和邊框，不包含外邊距。利於並列元素寬高的計算。

.indent 

.padding 
我是text-indext 我超長了布局應該怎麼變化，左側有文字麼？ 是有的
我是padding，我超長的布局如下所示。左側有文字麼？ 沒有的

7.background屬性

控制元素背景。格式 background: url(../xx.png) 5px 50% no-repeat;

第乙個引數是背景的位址，第二個是相對左側偏移量。第三個是垂直偏移量。設定50%為居中。最後乙個是背景不重複。  可以配合background-size使用。設定背景的大小。

background:rgb(158,47,47,0.7) url(../img/eyes.png) 5px 0 no-repeat;  //這裡第乙個引數加入了背景顏色，第四個引數為透明度。

background-size: 20px 20px;
//截圖就是上面截圖的藍色眼睛，第乙個引數可以是乙個顏色值，就是背景顏色。其餘引數依次後移。

#icon1 

var ele = e.target;
console.log("clientwidth  " + ele.clientwidth);    //元素寬度，content+padding
console.log("left   " + ele.style.left);              //理論上是margin-left的值。但是測試是沒有效果
console.log("padding  " + ele.style.padding );       //沒有效果
console.log("margin  " + ele.style.margin );              //沒有效果
console.log("clientleft " + ele.clientleft);         //左邊框寬度
console.log("clientoffsetwidth   " + ele.offsetwidth)          //元素寬度，content+padding+ border
				
css 筆記     css 屬性
以下內容大部分來自 文字字型 匹配原則 泛型字型 文字大小 n 取值 文字效果 文字粗細 說明 設定英文大小寫轉換屬性 字型屬性 字型顏色 返回目錄 水平對齊方式 垂直對齊 文字效果 首行縮排 文字轉換 單詞之間間隔 字元之間間距 壓縮空白屬性 行距 設定標註文字水平對齊方式 設定標註文字顯示的位置...
				
css屬性學習筆記
1 交集選擇器 p.p1 是p標籤並且class是p1 2 後代選擇器 div p 在div下面的p標籤 3 並集選擇器 新增多個標籤，中間用逗號隔開。標籤可共用後面屬性的效果。多個樣式表作用於同一標籤上，如果這些樣式都不一樣的話，那麼標籤的 最終樣式就是所有層疊樣式的總和。如果有相同樣式宣告，按優...
				
Css屬性 學習筆記
文字屬性 box 字型屬性 p 引用外部字型書寫格式 font face box 邊框屬性 box 乙個值 控制四個角，css3 兩個值 1 分隔符為空格 第乙個值左上角和右下角圓弧半徑 第二個值左下角和右上角圓弧半徑.2 分割線為正斜線，第乙個值四個角的水平半徑，第二個值四個角的垂直半徑 橢圓形。...