css學習筆記3
文字樣式2
1.文字顏色設定-屬性：color
屬性值：顏色的英文單詞表示/hex（三原色16進製制）/rgba（三原色十進位制），該模式還支援對不透明度的設定a，他表示不透明度，取值區間0-1，可保留兩位小數
2.文字的居中方式text-align該屬性用於控制「行內塊元素」或「塊元素」內「行內元素」（文字元素）的居中方式的，包含三個值：left（預設）文字左對齊center文字居中對齊right文字右對齊
3. 段落首行縮排 text-indent 中文布局，使用「2em」作為首行縮排「兩個字元」4. 文字裝飾線 text-decoration none（預設）無裝飾線underline在文字下方顯示 a超連結標籤預設帶有overline 在上方顯示line-through 在文字中間顯示 相當於刪除線5. 英文本母大小寫轉換 text-transform none （預設）保持原來不變capitalize 將每個單詞首字母大寫，不管其他字母lowercase 將所有英文本母轉為小寫uppercase 將所有英文本母轉為大寫6. 文字陰影 text-shadow 給文字新增陰影效果（— — — —）四個值分別代表：水平方向陰影偏移、垂直方向陰影偏移、陰影模糊距離、陰影的顏色7. 段落文字的行高 line-height該屬性是用於設定「行內元素」中文字元素在一行中所佔據的高度，（可實現單行文字垂直居中的效果）使用場景如：**、導航按鈕、自定義樣式按鈕、標題欄等。8. 單詞的間距 word-spacing 設定英語單詞的間距當你的文字間沒有空格時，整體就會被當做乙個單詞。當你的每個漢字兩邊都有空格時，每個漢字才會被當做是乙個單詞。其值可以為負數，距離會減小9. 字元的間距 letter-spacing10. 該屬性是用於控制字元間的間距。11. 乙個字母，乙個漢字，甚至乙個空格都是乙個字元。12. 在html中，多個空格最終會變為乙個空格的。其值可以為負數，距離會減小13. 空格換行處理 white-space設定如何處理元素內的空格符和換行符14. normal （預設）由瀏覽器處理空格和換行15. pre段落中所有空格符和換行符都會被保留，類似pre標籤16. nowrap 段落內的文字不會換行pre-wrap段落裡所有的空格符序列和換行符序列都會被保留，這點類似於pre，但是他不會去更改瀏覽器的預設行為（當內容的寬度小於了窗體的寬度時會出現滾動條的行為）17. pre-line18. 保留換行符，但是多個空格還是會按照瀏覽器的預設行為處理（多個合併為乙個）19. 20. 注意：21. 如果你當前的內容是無空格分隔的一連串的英文，那麼他會被瀏覽器當作是乙個單詞，不會讓他換行，只會出現水平滾動條去適應他。22. 設定文字方向 direction23. ltr預設24. rtl從右往左25. 設定文字溢位來時的處理 overflow26. 文字的裁切 text-overflow27. clip 裁剪文字（從屬性意義不大，通過overflow：hidden可實現此效果）ellipsis顯示省略符號來代表被裁剪的文字不過該屬性不能單獨使用，必須要配合「white-space」和「overflow」來使用，否則會達不到所期望的效果。盒子模型1.盒子的組成a. content內容b. padding內間距c. border邊框d. margin外間距 2.標準的盒子模型最終盒子的width」和「height == content3.ie瀏覽器盒子模型最終盒子的「width」和「height」== conent、padding和border；
4. 盒子模型的轉換，css的樣式屬性「box-sizing」的值設為「border-box」–》ie盒子模型（推薦）「box-sizing」的值設為「content-box」–》w3c盒子模型4.盒子的幾個屬性width盒子寬度height盒子高度padding內邊距：盒子內容與盒子邊框的距離border盒子邊框margin：外邊距：盒子邊框和其他邊框的距離1. padding和margin的控制四個方向單獨控制margin-left: 1rem;margin-right: 1rem;margin-top: 1rem;margin-bottom: 1rem; padding-left: 1rem;padding-right: 1rem;padding-top: 1rem;padding-bottom: 1rem;當為組合之值的含義：乙個值：上下，左右三個值：上，左右，下四個值：上下左右分別設定6.border設定邊框的三大屬性border-width 設定邊框的寬度。border-style 設定邊框的型別，主要有以下可以設定的值 none,solid（實線邊框），dotted（點線邊框），double（雙線邊框），dashed（虛線邊框）等等，，，border-color 設定邊框的顏色，盒子模型的轉換，css的樣式屬性「box-sizing」的值設為「border-box」–》ie盒子模型（推薦）「box-sizing」的值設為「content-box」–》w3c盒子模型4.盒子的幾個屬性width盒子寬度height盒子高度padding內邊距：盒子內容與盒子邊框的距離border盒子邊框margin：外邊距：盒子邊框和其他邊框的距離1. padding和margin的控制四個方向單獨控制margin-left: 1rem;margin-right: 1rem;margin-top: 1rem;margin-bottom: 1rem; padding-left: 1rem;padding-right: 1rem;padding-top: 1rem;padding-bottom: 1rem;當為組合之值的含義：乙個值：上下，左右三個值：上，左右，下四個值：上下左右分別設定
6.border設定邊框的三大屬性border-width 設定邊框的寬度。border-style 設定邊框的型別，主要有以下可以設定的值 none,solid（實線邊框），dotted（點線邊框），double（雙線邊框），dashed（虛線邊框）等等，，，border-color 設定邊框的顏色，6.border設定邊框的三大屬性border-width 設定邊框的寬度。border-style 設定邊框的型別，主要有以下可以設定的值 none,solid（實線邊框），dotted（點線邊框），double（雙線邊框），dashed（虛線邊框）等等，，，border-color 設定邊框的顏色，
6. 7圓角的盒子 border-radius8.元素的輪廓 outline （不會佔據頁面空間）7圓角的盒子 border-radius
7. 8.元素的輪廓 outline （不會佔據頁面空間）8.元素的輪廓 outline （不會佔據頁面空間）
盒子模型及其樣式
分類 ie盒子模型 標準w3c盒子模型 盒子模型 content 內容 padding border margin padding 外邊距 border 邊框 margin 外邊距 box width 200px height 200px div的內容的寬高width，height 內容區域 bor...
css盒子模型和樣式更改
取自菜鳥教程 margin 外邊距，多個盒子排列時外邊距取較大的那乙個，並不是相加 border 邊框 padding 內邊距 content 內容 這個基礎應用直接放 了哦 box1 下面這種寫法只需要記住，順序為從上開始順時針旋轉就可以了 box2 也可以分開寫，等價於box2 box3 預設情...
標準盒子模型和IE盒子模型
盒子模型是css中乙個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content，並...