自己學習CSS的總結
塊級元素與行內元素
- 塊級(block-level);行內(inline-level)
- 塊級可以包含塊級和行內，行內只能包含文字和行內
- 塊級佔據一整行空間，行內佔據自身寬度空間
- 寬高設定,內外邊距的差異
block-level
div h1 h2 h3 h4 h5 h6 p
hr form ul dl ol pre table
li dd dt tr td th
複製程式碼inline-level
em strong span a br img
button input label select textarea
code script
複製程式碼對於行內元素儘量不要設定margin-top、margin-bottom；padding-top、padding-bottom值；
寬高
width:100px;
height:100px;
複製程式碼- 塊級元素可以設定寬高
- 行內元素設定寬高無效
邊框
border:1px red solid;
border-width:1px;
border-color:red;
border-style:solid;
複製程式碼設定寬高為0，左右上邊框設定為透明色transparent，可以得到一個向上的三角形，同理向左向右向下，兩個連結的邊框設定為相同顏色，可以得到一個直角三角形。
邊距
padding
內邊距 內容到邊框的距離 有四個方向的值 上 右 下 左 值可以是數值，也可以是百分比(相對於父容器)
padding: 10px;
padding: 10px 20px 10px 20px;
padding: 10px 20px;
padding: 10px 20px 5px;
padding-top: 10px;
複製程式碼margin
外邊距邊框外的距離 有四個方向的值 上 右 下 左 值可以是數值，也可以是百分比(相對於父容器) 可以是負值
margin: 10px;
margin: 10px 20px 10px 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin-top: 10px;
複製程式碼塊級元素 margin:0 auto; 可以水平居中
display
CSS屬性指定用於元素的呈現框的型別。在 HTML 中，預設的 display 屬性取決於 HTML 規範所描述的行為或瀏覽器/使用者的預設樣式表.
除了多種不同的生成的元素的盒型別，值 none 可以關閉一個元素的顯示；當你使用 none 所有的後代元素他們的顯示也會被關閉。文件渲染的過程中就好像在文件樹中這個元素不存在一樣。
更多值 參考display
inline-block
- 既呈現inline特性(不佔據一整行，寬度由內容決定)
- 又呈現block特性(可設定寬高，內外邊距)
縫隙問題
inline帶來的 換行被瀏覽器識別為空格，是一個字元 可以緊貼著元素寫消除空格;父元素設定font-size:0;自己在設定字型大小.
多個inline-block元素如果垂直不對齊 用vertical-align
vertical-align
字型
font-size 字型大小
font-family 字型
font-weight 字型粗度
line-height 行高 可以用百分比 固定倍數 固定尺寸
固定倍數line-height:2這個無單位數字乘以該元素的字型大小
百分比line-height:10%給定的百分比值乘以元素計算出的字型大小
以上元素可以繼承
font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
font-size: 12px;
line-height: 1.5;
font-family: tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
//\5b8b\4f53 是字型名稱的Unicodc碼
//中文版的chrome預設字型大小16px 最小字型12px
複製程式碼文字
text-align:文字對齊方式left,right,center,right,justify 針對塊級元素的行內元素生效
text-indent: 文字第一行縮排距離
text-decoration:文字加一條線 none,underline,line-through,overline,
color:文字顏色
text-transform:改變文字大小寫none,uppercase,lowercase,capitalize
word-spacing:改變字或單詞之間的標準間隔
letter-spacing:字母間隔修改的是字元或字母之間的間隔
顏色
單詞:red，green等
十六進位制：#000000，#fff,#f00,#0f0等
rgb:rgb(255,255,255)等
rgba:rgba(255,255,255,.5);
單位
px: 固定單位
百分比: 相對單位 (寬高相對於父元素的寬高 父輩需要設定高度 文字大小相對父輩元素的字型大小 line-height 給定的百分比值乘以元素計算出的字型大小 padding margin 相對於父元素的寬度,top,bottom,right,left相對於父元素高度)
em 相對單位 相對於父元素字型的大小
rem 相對單位，相對於根元素(html)字型大小
vw,vh 相對單位，1vw為螢幕的1%(相容性不好 相容性查詢Can I Use)
背景
background-attachment 背景影象是否固定或者隨著頁面的其餘部分滾動
background-color 背景顏色
background-image 把影象設定為背景
background-position 設定背景影象的起始位置
background-repeat 設定背景影象是否重複
background-size 設定背景影象的大小
CSS Sprite
雪碧圖 不同的圖片或圖示合併在一張圖上 減少網路請求，提高網頁載入效能. 通過position-size來控制顯示哪個圖片
製作網站 CSS雪碧圖
隱藏or透明
- opacity: 0;透明度為0，整體
- visibility:hidden;和opacity: 0;類似，佔據原來的位置
- display:none;消失 不佔位置
- background-color: rgba(0,0,0,.2)只是背景色透明
盒模型
標準盒模型
IE盒模型
區別 W3C標準中padding,border所佔的空間不在width,height範圍內，大家俗稱的IE盒模型的width包括content+padding+border
box-sizing:border-box;IE盒模型 box-sizing:content-box;標準盒模型