width min-width max-width
overflow: scroll|hidden|auto
font-size瀏覽器預設的字型大小是16px,設定的是字型高度,寬度自動縮放
font-weight 字型粗細 lighter|normal|bold|bolder
font-style: italic|oblique|normal 斜體|傾斜 oblique強制字型傾斜
<em>預設斜體,有語義,強調
font-family:有空格的或者中文需要加雙引號 如"Times New Roman"
通用字型:arial
color: 英文單詞顏色設定|十六進位制的顏色值
光學三原色
red green blue
00-ff 00-ff 00-ff ->十六進位制
0-255 0-255 0-255 ->rgb(0,0,255)
border: 1px solid #000;
可視區域:(width+左邊框+右邊框)*(height+上邊框+下邊框)
border-style:dotted|dashed|solid|double|groove|ridge|inset|outset
三角形的寫法
text-align:right|center|left; 對齊必須是相對有寬高的容器
line-height 文字行高 預設22
文字縮排
text-indent:2em; 預設 1em=16px; 若想1em=10px可設定font-size:52.6
text-decoration:none|underline|line-through|overline
ins del
cursor: pointer(游標小手)|not-allowed(禁用)
單行文字截斷和顯示省略號的三大件
white-space: nowrap; //不換行
overflow-x: hidden;
text-overflow: ellipsis; //隱藏部分加省略號
display
block|inline-block|
偽類選擇器:
hover 滑鼠移動上邊的樣式
disabled
checked
display:none 和 visibility:hidden 的區別
visibility:hidden保留被隱藏元素所佔據的HTML文件空間
display:none 不保留被隱藏元素所佔據的HTML文件空間
opacity:值越大透明度越低,值越小透明度越高
label的for起作用的三個條件:1同父級 2相鄰 3在其之後
改變CheckBox的樣式的方法:
input:focus{border:1px solid green} 聚焦後有綠色邊框
div span:first-child{}
div span:last-child{}
:nth-child(odd) 偽類 n sixth
vertical-align: middle|top|bottom|畫素
容器內多行文字居中的方法:
1容器 display:table
2容器內文字 display:table-cell(表格單元格屬性)
3容器內文字 vertical-align:middle
通處理:
ul{
padding: 0;
margin: 0;
list-style: none;
}
h1,h2,h3,h4,h5,h6{ font-weight:normal;}
input,textarea,button{
outline:none;
}
a{text-decoration:none;}
i,em{font-weight:normal;}