一，邊框border：
- border有四個屬性基本值：分別對應一個盒子的四條邊，分別是上右下左，如圖：
通常可以書寫為如下：
- border還有三個其它常用屬性，分別是
border-width（粗度），border-style（樣式），border-color（顏色），下面介紹他們的用法和常用值：
1.border-width：邊框粗度，通常使用Npx的固定單位來直接表明，例如：border-width:1px;
-
border-style：邊框樣式，設定邊框的樣子，常用的有三個值：solid（默認實線），dotted（點線），dashed（虛線）
3.
border-color：邊框顏色，默認是黑色，其它常用的值還有：red，yellow等，此外還可以用十六進制和rgb顏色表示方法來進行表示4.縮寫，它們三個樣式與border的四個基本值可以縮寫為：
border:1px dotted red;
- 圓角
border-radius：邊框半徑，表示邊框的角的半徑，可以構造圓角，如下圖就是一個圓角邊框：
border-radius有四個值，按照順序分別對應上圖的左上，右上，右下，左下，它們可以寫為：
border-radius:30px 30px 30px 30px
也可以簡寫為：
border-radius:30px
二，字體font
- 字體font有四個常用屬性，分別是
font-size（大小），font-family（字體），font-weight（粗度），line-height（行高） -
font-size：字體大小，字體大小的單位有幾個，它們的寫法分別是：
1.px：font-size:12px;
2.em：font-size:1em;
3.rem：font-size:1rem;
4.百分比：font-size:200%;
5.vw：font-size:1vw;
-
font-family：字體，字體是指字的形狀樣式，在CSS中，font-family有三種寫法（用微軟雅黑字體為例）：
1.英文寫法：font-family: "Microsoft YaHei"
2.中文寫法：font-family: "微軟雅黑"
3.Unicode寫法：font-family: /5FAE/8F6F/96C5/9ED1
要記住下面幾點：
1.英文寫法中如果有空格以及采用中文寫法的話要加引號；
2.盡量采用Unicode碼字體，因為如果直接寫中文字體的情況下編碼方式和解碼方式有可能不匹配，從而導致亂碼；
3.字體的Unicode碼可以在開發者工具的console里用escape('字體中文')獲得，如下圖：
但是要注意的是，里面的%u要轉換為/
-
font-weight：字體粗度，常用值是bold，表示粗體，如下圖對比：
line-height：行高，指的是行與行之間的空間，常用單位是px，em，rem，百分比。瀏覽器默認字體和最小字體
1.通常來說，瀏覽器默認字體是16px，最小字體是12px，因為當字體小于12px時，人眼的認知功能就難以發揮作用
2.如果我想設置更小的字體呢？比如設置9px的字體，該怎么辦？
方法：
可用使用如下樣式：
效果：
三，文本text
文本text是指文本在盒模型中的格式表現形式，常用的有：
text-align（對齊方式），text-indent（縮進），text-decoration（a鏈接顯示方式），word-spacing（設置單詞間距），letter-spacing（設置字符間距），
text-overflow（規定當文本溢出包含元素時發生的事情）text-align：對齊方式，常用的有四個值：left默認左對齊，right右對齊，center居中，justify兩邊對齊
1.前面三個對比如下圖：
2.justify兩邊對齊適用于多行文字，他會使該段文字的左右兩邊自動對齊，字間距有可能發生變化，如下圖；
-
text-indent：首行縮進，常用單位是px，em，rem，百分比，用上圖文字延時如下：
-
word-spacing與letter-spacing：一個是單詞或中文字間距，第二個是字符間距，對比如下圖：
text-overflow：規定當文本溢出包含元素時發生的事情，例如當文本過長時，可以設置溢出文本為'...'如何設置溢出文本為'...'
如下圖文本：
設置不折行，且溢出文本為‘...’
- 如何設置行內元素在塊級元素里居中
用text-align，代碼如下：
四，display樣式（改變元素的級），行內元素和塊級元素詳見我的這篇文章
- display樣式有三個常用的值：inline（行內），block（塊級），inline-block（行內塊級）
- inline：設置元素為行內元素
- block：設置元素為塊級元素
- inline-block：設置元素為行內塊級元素
- 關于display的其它值有：table，table-cell，table-row，list-item，none，inherit
五，隱藏和透明
- 透明（指的是元素不能被看見，但是位置依然被占據）
1.opacity:0~1：透明度，作用于整體，用得比較少；
2.visibility:hidden：元素可見度，表示該元素透明，位置依然占據；
3.background-color:rgba(0,0,0,0~1)：表示背景色的透明度，a的值為0時完全透明； - 隱藏（指元素整體消失，并且不占據位置）
1.display:none：表示設置該元素消失，不占據位置也看不見；
六，顏色color的寫法
- 單詞：red，blue，yellow等；
- 十六進制：#000，#fff，#060606等；
- rgb形式：
rgb(255,255,255)； - rgba形式：rgba(0,0,0,0.5)，里面的a代表的是透明度，范圍是0~1，數值越大越不透明；
七，單位
- px：像素，固定單位；
- em：相對單位，相對于父元素，例如1em就是相等于父元素的px大小；
- rem：相對單位，相對于根元素，例如1rem就是相等于根元素的px大小；
- vw：相對單位，相對于屏幕大小，1vw就是屏幕的1%大小；
八，css樣式的繼承
- 什么是css樣式繼承
繼承就是子元素繼承了父元素的CSS樣式的屬性 - 常用的會被繼承的樣式有哪些？
1.字體：family，size，weight，line-height
2.文本：letter-spacing，word-spacing，text-align, text-indent
3.列表：list-style-type
4.顏色：color，ps：a標簽不能繼承父元素的字體顏色，原因是a標簽自己有默認字體顏色，會覆蓋掉繼承自父元素的字體顏色； - 什么屬性不能被繼承
1.display
2.float
3.padding和margin
4.背景相關，比如顏色圖片等
