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 分割線為正斜線，第乙個值四個角的水平半徑，第二個值四個角的垂直半徑 橢圓形。...