在下方公眾號回复“面試寶典”，可獲取給你整理的107頁前端面試題。
CSS屬性
< p data-tool='mdnice編輯器' >屬性：屬性是指定選擇符所具有的屬性，它是css的核心，css2共有150多個屬性屬性值：屬性值包括法定屬性值及常見的數值加單位，如25px，或顏色值等文本屬性
1:文本大小font-size
說明：
1） 屬性值為數值型時，必須給屬性值加單位，屬性值為0時除外。
2）單位還可以是pt，9pt=12px;
3）為了減小系統間的字體顯示差異，IE Netscape Mozilla的瀏覽器製作商於1999年召開會議，共同確定16px/ppi為標準字體大小默認值,即1em.默認情況下，1em=16px,0.75em=12px; rem
4）使用絕對大小關鍵字xx-small =9pxx-small =11pxsmall =13pxmedium =16pxlarge =19pxx-large =23pxxx-large =27px
2:文本顏色 color
說明：
用十六進制(是計算機中數據的一種表示方法)表示顏色值：
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9 A B C D E F
顏色模式：光色模式
R G B
FF 00 00
顏色值的縮寫：當表示三原色的三組數字同時相同時，可以縮寫為三位;
當用十六進製表示顏色值時，需要在顏色值前加“#” #fa 00 00
3:文本類型 'mdnice編輯器' >說明：
瀏覽器首先會尋找字體1、如存在就使用改字體來顯示內容，如在字體1不存在的情況下，則會尋找字體2，如字體2也不存在，按字體3顯示內容，如果字體3 也不存在；則按系統默認字體顯示；
當字體是中文字體時，需加雙引號；當英文字體中有空格時，需加雙引號如（“Times New Roman”）當英文字體只有一個單詞組成是不加雙引號；如：（Arial）；Windows中文版本操作系統下，中文默認字體為宋體或者新宋體，英文字體默認為Arial.
4:文字加粗font-weight:bolder(更粗的)/bold（加粗）/normal（常規）/100— 900;
說明：在css規範中，把字體的粗細分為9個等級，分別為100——900，其中100對應最輕的字體變形，而900對應最重的字體變形，100-400 一般500常規字體600-900加粗字體
5:font-style：italic/oblique/normal（取消傾斜，常規顯示）;
說明：italic和oblique都是向右傾斜的文字, 但區別在於Italic是指斜體字，而Oblique是傾斜的文字，對於沒有斜體的字體應該使用Oblique屬性值來實現傾斜的文字效果.
6:文字行高 {line-height:normal/value;}
說明：當單行文本的行高等於容器高時，可實現單行文本在容器中垂直方向居中對齊；當單行文本的行高小於容器高時，可實現單行文本在容器中垂直中齊以上；當單行文本的行高大於容器高時，可實現單行文本在容器中垂直中齊以下（IE6及以下版本存在瀏覽器兼容問題）
*文字屬性簡寫：font:12px/24px '宋體';
font屬性的簡寫：字號，行高，字體font-size:12px; line-height:24px; 'mdnice編輯器' >font屬性的簡寫：說明:font的屬性值應按以下次序書寫(各個屬性之間用空格隔開)
順序: font-style font-weight font-size / line-height font-family
注意：
(1)簡寫時 , font-size和line-height只能通過斜杠/組成一個值，不能分開寫。
(2) 順序不能改變,這種簡寫法只有在同時指定font-size和font-family屬性時才起作用,而且,你沒有設定font -weight , font-style , 他們會使用缺省值（默認值）。
8：水平對齊方式
text-align:left/right/center/justify（兩端對齊中文不起作用）
9:文本修飾text-decoration:
說明：
none:沒有修飾
underline:添加下劃線
overline:添加上劃線
line-through:添加刪除線
10:首行縮進
1）text-indent可以取負值；
2）text-indent屬性只對第一行起作用。
11:字間距、詞間距
字間距{letter-spacing:value;}控制英文字母或漢字的字距。
詞間距{word-spacing:value;}控制英文單詞詞距。
列表屬性
1、定義列表符號樣式
list-style-type：disc(實心圓)/circle(空心圓)/square(實心方塊)/none(去掉列表符號)；list-style- type:none===list-style:none;
2、使用圖片作為列表符號
list-style-image：url(所使用圖片的路徑及全稱)；
3、定義列表符號的位置
list-style-position:outside(外邊)/inside(裡邊)；list-style:none;去掉列表符號
邊框屬性
border:邊框寬度邊框風格邊框顏色;
例如：border:5px solid #ff0000
邊框：border,網頁中很多修飾性線條都是由邊框來實現的。
邊框寬度：border-width:
邊框顏色：border-color:
邊框樣式：border-style:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線)
可單獨設置一方向邊框
border-bottom:邊框寬度 邊框風格 邊框顏色;底邊框
border-left:邊框寬度 邊框風格 邊框顏色;左邊框
border-right:邊框寬度 邊框風格 邊框顏色;右邊框
border-top:邊框寬度 邊框風格 邊框顏色;上邊框
背景屬性
1、背景顏色{background-color:顏色值;}
2、背景圖片的設置 background-image：url(背景圖片的路徑及全稱)；
背景圖片的顯示原則 ：
1）容器尺寸等於圖片尺寸，背景圖片正好顯示在容器中
2）容器尺寸大於圖片尺寸，背景圖片將默認平鋪，直至鋪滿元素；
3）容器尺寸小於圖片尺寸，只顯示元素範圍以內的背景圖。網頁上有兩種圖片形式：插入圖片、背景圖；插入圖片：屬於網頁內容，也就是結構。背景圖：屬於網頁的表現，背景圖上可以顯示文字、插入圖片、表格等。
3、背景圖片平鋪屬性{background-repeat:no-repeat/repeat/repeat-x/repeat-y } < /span>
4、背景圖的位置性{background-position:left/center/right/數值top/center/bottom/數值;}水平方向上的對齊方式（left/center/right）或值垂直方向上的對齊方式(top/center/bottom)或值background-position:值1 值2;
兩個值 ：
第一個值表示水平位置的值，第二個值：表示垂直的位置。當兩個值都是center的時候寫一個值就可以代表的是水平位置和垂直位置
說明：向左方向，向上方向是負值背景屬性的縮寫語法：background:屬性值1 屬性值2 屬性值3 ；背景縮寫：background:url（背景圖片的路徑及全稱） no-repeat center top #f00；
網頁上常用的圖片格式（壓縮圖片）
1)jpg :有損壓縮格式，靠損失圖片本身的質量來減小圖片的體積，適用於顏色豐富的圖像;(像素點組成的，像素點越多會越清晰)如果網頁中
2）gif：有損壓縮格式，靠損失圖片的色彩數量來減小圖片的體積，支持透明，支持動畫，適用於顏色數量較少的圖像; 3)png:有損壓縮格式，損失圖片的色彩數量來減小圖片的體積，支持透明，不支持動畫，是fireworks的源文件格式，適用於顏色數量較少的圖像;
5、背景圖的固定性{{background-attachment:scroll(滾動)/fixed(固定);}fixed 固定，不隨內容一塊滾動；scroll:隨內容一塊滾動。
浮動
css屬性繼承
不可繼承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width 、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align
所有元素可繼承：visibility和cursor。
內聯元素可繼承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font -variant、font-weight、text- decoration、text-transform。
塊狀元素可繼承：text-indent和text-align
列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可繼承：border-collapse。
推薦閱讀< /span>
HTML、CSS從零開始| 入門介紹
HTML 、CSS從零開始| HTML表單標籤
HTML、CSS從零開始| CSS基礎
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/HTML%20CSS%20from%20scratch%20%20CSS%20properties.html
支付宝扫一扫 
评论列表（196条）
测试