css基本樣式1（7.1）

1. 塊級元素(block-level)和行內元素(inline-level)

(1)差別：

• 塊級元素能包含行內元素和塊級元素，行內元素只能包含行內元素和文本內容
• 塊級元素能夠佔據一整行，行內元素只能佔據內容的寬度
• 塊級元素能夠設置寬高margin，padding，行內元素不能設置寬高，設置上下margin和padding不生效，左右的margin和padding生效。(在設置背景顏色，border顯示的狀況下，padding和margin視覺上會被撐開，但實際的佔用位置是不變的)

(2)經常使用的塊級元素

div h1 h2 h3 h4 h5 h6 p form pre 
table tr th td ol li ul dl dd dt

(3)經常使用的行內元素

em strong span img a  button label
select input textarea  code

2.盒模型
盒模型內容的width、height、padding內邊距、border、margin外邊距。

3.寬高width/height
對行內元素不生效，只對塊級元素生效

.box{
background-color:red;
width:100px;
height:20px;
}

4.邊框 border
（1）border主要參數：
一、width 二、樣式（樣式有直線solid、圓點dotted、短直線dashed） 三、顏色

//例子1
.list {
  border: 1px solid #ddd;
}

//例子2利用border畫三角形
.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid deepskyblue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom:100px solid transparent;// transparent讓邊框透明
}

demo：連接描述
（2）邊框倒圓角border-radius

.control {
width:100px;
height:100px;
  border-radius: 4px 10px 8px 5px;
//分別表明的左上、右上、右下、左下的倒圓角直徑
//能夠用百分比作radius的參數
// border-radius：50%或者倒圓角直徑大於半徑，就能夠獲得圓
}

5.內邊距padding

padding：10px 20px 30px 5px；
//分別表明的左上、右上、右下、左下的內邊距寬度
//能夠簡寫成上下10px，左右20px；
padding：10px 20px；

6.外邊距margin
（1）基本用法

margin：10px 20px 30px 5px；
//分別表明的左上、右上、右下、左下的外邊距寬度

（2）外邊距合併

（3）塊級元素的自動居中

margin：0 auto；//至關於左右外邊距距離相等，就居中了

7.去除瀏覽器默認的樣式

*{
margin：0；
padding:0;
}

8.display 指定用於元素的呈現框的類型
塊級：block list -item table
行內：inline inline-block inline-table

• none 不顯示元素。
• block 顯示爲塊狀元素。
• inline 顯示爲行內元素
• inline-block 顯示爲行內塊，建立一個 BFC

9.font
font-size:30px 字體大小
chrome 的最小字體是16px，
font-weight:文字粗度（regular默認 bold粗體）
font-family:字體
line-height:行高

p {
  font:12px/1.5 "Source Han Sans", Helvetica, Arial, sans-serif;
}

10.文本
（1）text-align
text-align 屬性用於設置文字對齊方式。

• left 左對齊
• right 右對齊
• center 居中，當設置在圖片的父元素上時，可使圖片居中
• justify 兩端對齊

（2）text-indent 首行縮進距離

p { 
  text-indent: 2em;  /* 文章的每一段空兩格開頭 */
}

（3）text-docoration 用於設置文字劃線樣式

• text-docoration:none 取消劃線
• text-docoration:underline 下劃線
• text-docoration:overline 上劃線
• text-docoration:line-through 中劃線

(4)text-transform 屬性用於改變字母的大小寫。

• text-transform:none 取消轉換效果
• text-transform:uppercase 轉爲大寫
• text-transform:lowercase 轉爲小寫
• text-transform:capitalize 轉爲首字母大寫

(5)letter-spacing
letter-spacing 屬性用於設置文字/字母的間距。

(6)word-spacing
屬性用於設置單詞/字的間距

11.文本超出省略
demo：連接描述

.card >h3{
  white-space:nowrap;//空白字符：文本不折行
  overflow:hidden;  //超出部分隱藏
  text-overflow:ellipsis;//文本超出的地方，添加省略號
  
}

12.顏色color
單詞：red blue black pink
16進制：#fff #000 #0f0 #eee #333 #666 #f034ec
全部顏色均可以由紅綠藍三種顏色混合而成，就把每一個基色分紅255份，按照16進制來展現。兩個相同的字母是能夠省略的，故#fffffff能夠寫成#fff。
rgb(255,255,255)分別表明是red green blue
rgba(255,255,255,0.5)分別表明是red green blue 透明度（0爲透明，1不透明）

#000爲黑色
#fff爲白色
其餘3個字母相同基本是灰色，不一樣深淺的灰色

13.單位
px:固定單位，像素點之意
em：相對單位，相對於父元素大小
rem：相對單位，相對於html根元素大小
vm：相對單位，1vm相對屏幕寬度的1%，但兼容性不好

14.a連接樣式

• （1）設置顏色

a連接的顏色是不能繼承的，不能經過給父元素設置顏色，繼承給a連接。
a連接的顏色只能經過選擇a連接直接設置

a{
color:red;}

• 取消a連接下劃線

a{ text-decoration:none;}

15.取消ul中li前面的.

li{ list-style:none;}

16.隱藏元素opacity:0 總體透明度爲0visibility:hidden; 隱藏，但還佔用位置display:none; 消失，不佔用位置rgba(255,255,255,0) 只是背景色透明