核心屬性：css文本屬性 1、font-size9pt = 12px; 1em=16px 0.75em=12px=9pt2、font-family瀏覽器默認為宋體，但是在谷歌瀏覽器里面默認字體是微軟雅黑3、font-weightbolder(更粗的)bold(加粗)normal(常規)lighter（細體）/100-900 9個等級 100 細體 400 正常（取消加粗和標題標簽的效果） 700加粗 900更粗4、font-styleitalic/oblique/normal italic傾斜字體/oblique字體5、color 文本顏色1-顏色單詞2-#6位16進制顏色值3-rgb(r,g,b)4-rgba(r,g,b,a)6、文本的水平對齊方式text-align left center right justify兩端對齊7、單行文本垂直居中line-height 還能實現多行文本里的行高、行間距normal/value取值為高度的時候，會實現垂直居中取值小于高度的時候，靠上邊顯示取值大于高度的時候，靠下邊顯示一般在單行文本里面，line-height可以替換height多行文本里面，不推薦8、文本修飾線text-decoration取值/underline(下劃線)==》<u></u>/line-thouge(中劃線)==》 <s></s><del></del>/overline(上劃線)/none9、字符、詞 間距字符間距：字母與字母之間的間距、漢字與漢字之間的間距letter-spacing:px詞間距：world-spacing：px英文單詞和英文單詞的間距10、首行縮進讓開頭文本向后或向前縮進多少個像素，或者實現開頭空倆個格子的效果text-indent: 只對第一行起作用，可以為正數，也可以為負數如果想要實現開頭空兩個格子：使用單位em單位 ===》相對單位，父元素字體大小進行縮小或者放大的倍數11、檢索大小寫字母text-transform:none 五轉換capitalize 首字母大寫uppercase 全大寫lowercase 全小寫12、小型大寫字符font-variantnormal常規字體/small-caps小型大寫字母字體13、fontfont 加粗 傾斜 字體大小/行高 字體注意：多個屬性值之間使用空格隔開若你想要的字體大小和行號一起使用需要用"/"連接如果使用符合屬性的話，字體大小和字體必須設置，不設置的話，實現不了。vertical-aligntop/bottom/middle/baseline layout-flowforizontal自左向右/vertical-ideographic自上而下font:bolder italic 12px/1.5em "宋體"css列表屬性1、list-style-type:disc/circle/square/none2、list-style-image:url()3、list-style-position:outline外邊/inside里面 定義列表符號位置4、復合屬性 順序和font里不一樣，順序可以調換list-style: type image position5、著重記憶：list-style：none; 去掉列表符號css背景屬性1、背景色background-color:red2、背景圖片background-image:url()只要你插入背景圖片就平鋪如果你的背景圖片和盒子一樣大，就正好顯示，若背景圖片比盒子小，就會顯示平埔效果。如果背景圖片比盒子大就會出現顯示不全的效果。3、背景平鋪屬性background-repeat:repeat/no-repeat/repeat-x/repeat-y4、背景圖片的位置background-position:left/center/right/數值 top/center/bottom/數值實現正中位置：1、如果關鍵詞一致，可以直接用一個代替倆個值2、如果給一個值，這個值代表水平方向，默認垂直居中經常使用的一行代碼:background-position:right center;5、背景的固定和滾動background-attachementfixed 固定scroll 滾動默認值 隨著滾動條會滾上去fixed 背景圖片固定在瀏覽器的左上角圖片仍然屬于盒子,但是位置的調整不再相對于盒子來說了,相對于瀏覽器窗口的左上角進行位置調整6、復合屬性background: color image repeat position attachment7、背景圖片的尺寸大小background-size :x yx和y取值數值 px/%關鍵字cover=======等比例放大這個圖片，直到這個圖片撐滿整個盒子，經常出現裁剪效果contain====等比例放大這個圖片，直到這個圖片撐滿整個盒子的一個邊空就結束，盒子有留白css邊框屬性元素邊緣叫做框border: 5px solid #ff0000;border-widthborder-colorborder-style:solid實/dashed虛/dotted點/double/noneborder-bottom/left/right/topborder-left-colorcss浮動屬性含義：讓元素漂浮，讓元素飄起來作用：讓布局元素橫向顯示改變排列方式屬性：float值 ：none 不浮動left 左浮動right右浮動特點：(兄弟關系)如果給前面的盒子左浮動，后面的元素會上去補位置====》半脫離文檔流如果兄弟元素都添加浮動，元素都會脫離文檔流，并且會挨著橫排顯示如果都是左浮動，會從左側依次開始向右排反之反之如果盒子都添加浮動，剩余空間不夠，盒子會折行顯示浮動后的元素補位置會以右側預留空間補位為先(父子關系)浮動會給后面的元素帶來影響==補位置不讓上去補位置清除浮動：清除浮動帶來的影響clear：none(none)/left/right/both浮動產生的影響：如果父元素沒有固定的高度，子元素添加浮動，后面元素上去補位置，父元素默認會降低，這種效果被稱之為高度塌陷解決高度塌陷：1、設置高度，給固定的高度 內容過多會溢出2、清除浮動，不讓補位元素補位置 如果父元素里面只有一個子元素，沒有補位元素3、給浮動元素后面悄悄地補一個元素，應用清除浮動，但是這個元素類型必須是塊元素4、給父元素添加overflow：hidden;觸發一個bfc形成一個獨立區域，不受到外界干擾，也不會把內部的設置影響到外部，同時還能讓浮動的元素參與高度的計算，用于解決高度塌陷問題5、萬能清除法：floatclear清除浮動none/left/right/both

總結

以上是生活随笔為你收集整理的前端 CSS day03-核心属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。