03-CSS文字屬性/盒子模型

`css`文字屬性

• font-family字體類型

  • 咱們在定義的時候要注意，要是用戶電腦上沒有這個字體的時候怎麼辦

  • .box{font-family:Tahoma,'Microsoft Yahei',SimSun;}/*字體類型*/

  • 字體中有多個字體的時候，若是前面的字體沒有就使用後面的字體

• font-size字體大小

  • 單位：px|%|em|rem

  • % 相對於父容器中字體%調整

  • 1em 等於父級的字體尺寸——相對於父級字體大小而言

  • rem 相對於html（跟標籤）的字體大小

• font-weight字體粗細

  • 關鍵字

    • normal 默認字體

    • lighter 較細

    • blod 較粗

    • bolder 很粗

  • 給值

    • 100-900只能給整百數，值越大字體越粗

    • 400至關於正常的

    • 700至關於blod

• font-style字體類型（規定是否傾斜）

  • normal 文字正常

  • italic 文字斜體(屬性)

  • oblique 文字傾斜

• color文字顏色

  • 關鍵詞

    • green、black等英文單詞

  • #16進制值

    • #666666、#ddd

  • rgb(0-255,0-255,0-255)

    • r-red

    • g-green

    • b-blue

  • rgba(0-255,0-255,0-255,0-1)

    • r-red

    • g-green

    • b-blue

    • a-alpha透明度

      • 0 徹底透明

      • 1 徹底不透明

css文本屬性

• text-decoration下劃線、刪除線、上劃線

  • none默認值,能夠用這個屬性值去掉已經有下劃線或刪除線或上劃線的樣式

  • underline 下劃線，通常用於文章的重點代表

  • overline上劃線

  • line-through刪除線

• text-transform文本大小寫

  • none默認值 無轉換髮生

  • uppercase轉換成大寫

  • lowercase轉換成小寫

  • capitalize將英文單詞的首字母大寫

• text-align文本水平對齊方式

  • left 默認值，向左對齊

  • right向右對齊

  • center居中對齊

• text-indent首行縮進（em）

• line-height行高

• letter-spacing字距

• word-spacing詞距

背景

• background-color背景色

• background-image：url（1.jpg)背景圖片

• background-repeat背景平鋪

  • repeat平鋪，默認

  • no-repeat不平鋪

  • repeat-xX軸平鋪

  • repeat-yy軸平鋪

  • 注意：只有背景圖片的寬高小於被設置的背景的元素的寬高，纔會有平鋪效果

• background-position背景位置 X軸 Y軸

  • 關鍵詞：(九宮格)

    • X軸left(默認) ,center,right

    • Y軸top(默認),center,bottom

  • 值：% px

  • 若是給一個值：第二個值默認center（50%）;

  • 值：X軸的值 Y軸的值若是給的是方位值：能夠顛倒

• background-size背景大小

  • 值：% px

  • 給一個值的時候，默認X軸，Y軸默認auto;

  • auto 會等比例縮放

  • 特殊值

    • cover等比例縮放直到鋪滿X軸和Y軸/保持寬高比不變，保證佔滿盒子，可是不必定能看到所有圖

    • contain 等比例縮放X軸或Y軸其中一個方向/保持寬高比不變，保證看清全圖，可是不必定佔滿盒子

• background複合樣式

  background:color image repeat position/size;

vertical-align垂直對齊方式

定義行內元素的基線相對於該元素所在行的基線的垂直對齊。
top			元素的頂端與行中最高元素的頂端對齊 對齊到line-height的頂部
middle		此元素放置在父元素的中部  對齊到line-height 中部
bottom		元素的頂端與行中最低的元素的頂端對齊 對齊到line-height 底部
（與line-height相關）

text-top		元素的頂端與父元素字體的頂端對齊
text-bottom	     元素的底端與父元素字體的底端對齊。
baseline		默認。元素放置在父元素的基線上。

加vertical-align的同排元素都要vertical-align；

盒子模型

css盒子模型

• 全部的頁面元素均可以當作一個盒子，而且佔據着必定的頁面空間

• 盒子模型是由content(內容)、 padding(內邊距)、 margin(外邊距)、 border(邊框)這四個屬性組成的。

border邊框

• 複合樣式：border:邊框大小 類型 顏色;border:5px solid #006633;

• border-width: 5px;		大小
  border-style: solid;	類型
  border-color: red;	    顏色
  border-top:0px;       /*去除上邊框*/
  border-top:none;      /*去除上邊框*/

• border-width 邊框大小

  • 四個值：上 右 下 左(順時針)

  • 三個值：上 左右 下

  • 二個值：上下 左右

  • 一個值：四個方向值相等

  • border-top-width 頂部邊框大小

  • border-right-width 右邊框大小

  • border-bottom-width 底部邊框大小

  • border-left-width 左邊框大小

• border-style 邊框類型

  • solid 實線

  • dashed 虛線

  • dotted 點線

  • double 雙邊框

  • border-top-style 頂部邊框類型

  • border-right-style 右邊框類型

  • border-bottom-style 底部邊框類型

  • border-left-style 左邊框類型

• border-color 邊框顏色

  • 四個值：上 右 下 左(順時針)

  • 三個值：上 左右 下

  • 二個值：上下 左右

  • 一個值：四個方向顏色同樣

  • border-top-color 頂部邊框顏色

  • border-right-color 右邊框顏色

  • border-bottom-color 底部邊框顏色

  • border-left-color 左邊框顏色

• padding內邊距，邊框與內容之間的距離

  • 四個值：上 右 下 左(順時針)

  • 三個值：上 左右 下

  • 二個值：上下 左右

  • 一個值：四個方向值相等

  • padding-top 頂部內邊距

  • padding-right 右內邊距

  • padding-bottom 底部內邊距

  • padding-left 左內邊距

  ​

• margin外邊距，元素與其餘元素的距離（邊框之外的距離）

  • margin-top 頂部外邊距

  • margin-right 右外邊距

  • margin-bottom 底部外邊距

  • margin-left 左外邊距

  • 自動水平居中

    • margin:auto; 左右居中

    • margin:20px auto; 上下20px 左右居中

    • margin:20px auto 0; 上20px 左右居中 下0

盒子大小的計算

• content+border+padding盒子大小 = 樣式寬 + 內邊距 + 邊框

• 盒子寬度 = 左border+左padding+width+右padding +右border

• 盒子高度 = 上border+上padding+height+下padding+下border

float浮動

• 浮動的定義：使元素脫離文檔流 ，按照指定（左右）方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來。

• 文檔流 是文檔中可顯示對象在排列時所佔用的位置/空間（在頁面中佔位置）

• 脫離文檔流 ：在頁面內中不佔位置

• 浮動的通常狀況

  • float:left;

  • float:right;

• 清除浮動

  • overflow: hidden;

  • .clearfix:after{content:'';display:block;clear:both;}  時下主流

position定位

• 規定元素的定位類型

• static 靜態定位（沒有定位），默認

• relative 相對定位，相對於其正常位置進行定位

  • 不會脫離文檔流

  • 不影響元素自己的特性

  • 若是沒有定位偏移量，對元素自己沒有任何影響

• absolute 絕對定位，參考最近非static定位的父級進行定位

  • 使元素徹底脫離文檔流

  • 沒有定位父級則相對於body(整個文檔)發生偏移

  • 絕對定位通常配合相對定位使用

• fixed 固定定位，相對於瀏覽器窗口進行定位

• 方位詞

  • left: 距離左邊的距離

  • right: 距離右邊的距離

  • top:距離頂部的距離

  • bottom:距離底部的距離

  • z-index 規定定位的層級（默認0）

    • 值：number 值越大層級越高