A. 浮動屬性
在網(wǎng)頁布局中經(jīng)常看見很多標簽默認是從上到下顯示的，需要改變默認的排序方式可以使用浮動屬性。
概念：使用浮動屬性可以改變元素的位置（默認從上到下改為從左到右/從右到左）
屬性：float 使xx漂浮/浮動
屬性值：left / right / none（默認值，表示不浮動）
-
浮動的特點
- 從浮動的屬性上進行觀察就可以得出結論废登，浮動只能控制元素在水平方向上移動
- 給元素設置了浮動屬性之后，當前元素會脫離文檔流
- 浮動元素漂浮停止的條件
- 碰到父級包含框（父級的邊框）的時候就會停止浮動
- 碰到前面一個浮動屬性也會停止浮動
- 特殊情況：當浮動的子級元素寬度大于父級容器時郁惜，最后一個子級元素會往下移動直到找到足夠的空間堡距。
拓展“流”的概念
- 文檔流/普通流：指的就是網(wǎng)頁的正常布局
- 浮動流/浮動層：會出現(xiàn)在正常網(wǎng)頁的上方（看不見的）
B. 標準盒模型
- 作用：每個標簽都是一個盒子，設置元素與元素之間的位置關系（間距）
- 組成
- content 內(nèi)容區(qū)域：元素自己的大小（寬高）
- padding 內(nèi)邊距：父級和子級之間的間距
- border 邊框
- margin 外邊距：同級元素之間的間距
一吏颖、外邊距margin
作用：設置同級元素之間的位置關系（哪個元素移動就給哪個元素設置即可）
屬性：margin
-
特點
- 既然是設置間距的，所以外邊距的屬性值需要數(shù)值加單位
- 關于margin屬性值個數(shù)的使用（多個屬性值之間需要使用空格隔開）
- 一個屬性值的時候：上下左右都是一樣的
- 兩個屬性值的時候：上下恨樟、左右
- 三個屬性值的時候：上半醉、左右、下
- 四個屬性值的時候：上劝术、右缩多、下、左（順時針）
- 還可以設置某一個方向：margin-方向值（top|right|bottom|left）
-
總結關于margin外邊距常見的設置
- *{margin:0;padding:0} 清除瀏覽器的默認間距
- 版心的選擇器{margin:0 auto} 版心居中
-
越好用的屬性养晋，bug（兼容性）越多
當兩個盒子上下排列的時候衬吆，分別設置margin-top/bottom 解析的時候會解析之間的最大值
-
在父級元素中只有一個子級元素的時候，子級元素設置margin-top會錯誤解析到父級元素
解決方法：
- 子級設置浮動
- 給父級設置邊框
- 文本溢出屬性
- 內(nèi)邊距
二绳泉、內(nèi)邊距padding
- 作用：可以設置父級元素和子級元素之間的位置關系
- 屬性：padding
- 特點
- padding的屬性值需要設置數(shù)值和單位
- 關于padding的設置位置（特點）
- 父級元素：會撐大當前容器的大小逊抡，為了保證頁面不受影響，在初始的寬高上減去相應的padding值（控制所有子級）
- 子級元素：單獨控制某一個子級元素零酪，子級元素也會被撐大冒嫡，是否需要減去根據(jù)需求定
- 關于padding屬性值個數(shù)的使用（多個屬性值之間需要使用空格隔開）
- 一個屬性值的時候：上下左右都是一樣的
- 兩個屬性值的時候：上下、左右
- 三個屬性值的時候：上四苇、左右孝凌、下
- 四個屬性值的時候：上、右月腋、下蟀架、左（順時針）
- 還可以設置某一個方向：padding-方向值（top|right|bottom|left）
- 注意：內(nèi)外邊距可不可以使用負值？
- 外邊距可以使用榆骚，內(nèi)邊距不行
三片拍、邊框?qū)傩詁order
-
邊框?qū)傩越M成
- border-width 邊框的寬度
- border-style 邊框的樣式
- border-color 邊框的顏色
-
屬性值
- 邊框的寬度：px為單位
- 邊框的樣式：
- solid（實線）、dashed（虛線）妓肢、dotted（點線）穆碎、double（雙實線）
- 邊框的顏色：英文單詞/#
-
邊框的簡寫/復合屬性
- 屬性：border
- 屬性值：border-width border-style border-color
- 當一個屬性有多個屬性的時候是可以不區(qū)分先后順序的
- 每個屬性值之間使用空格隔開即可
-
常見需求引出邊框的其他用法
-
改變某個方向上邊框顏色
border-top-color:red; -
改變某個方向上所有樣式
border-right:10px double blue; -
清除某個標簽的默認邊框樣式
border:none; border:0;
-
-
哪些標簽自帶邊框
input、testarea（多行文本域）职恳、select（下拉菜單）
-
三角形的繪制
div{ border: 50px transparent solid ; border-bottom-color: green; height: 0px; width: 0px; }
四所禀、總結
作用：設置元素與元素之間的間距
組成：content/padding/margin/border
-
計算方式
div{ width: 100px; height: 100px; border: 10px solid black; padding: 20px; margin: 30px; }Q：這個盒子的大小是多少？
A：
- 自身大蟹徘铡：100px + 20px*2 + 10px*2 = 160px
- 真實大猩恰：160px +30px*2 = 220px
盒子的自身大小：content + padding + border
盒子的真實大胁儋鳌：content + padding + border + margin
-
盒模型的分類：box-sizing
- 標準盒模型：content-box（默認值）
- 怪異盒模型（IE盒模型 border-box：當文檔丟失了文檔聲明的時候會觸發(fā)這樣的計算方式）
- 特點：padding和border不會撐大盒子的大小
- 計算
- 自身大泄硬摺：content（包含padding和border）
- 真實大小：content（包含padding和border）+margin
C. 文本屬性
一、 文本大小
- 屬性：font-size
- 屬性值：常規(guī)的屬性值/法定的屬性值
- 可以使用數(shù)值和單位表示文本的大小
- 在瀏覽器中斤寂，默認的字體大小是16px耿焊，設置字體的時候建議設置為偶數(shù)
- 由于瀏覽器之間存在差異，規(guī)定瀏覽器最小字體是12px（設計圖字體最小12px）
- web中px單位是最常用的遍搞，另外還有pt罗侯、em等（12pt=16px 1em=16px）
- pt 磅，常用與一些硬件設備（打印機）
- em 相對單位溪猿，相對于父級元素計算（首行縮進）
二钩杰、文本類型
word、ppt字體诊县。商用注意版權問題讲弄。
屬性：font-family
-
屬性值
中文：當屬性值是中文的時候建議加引號
英文：當屬性值有多個英文單詞的時候需要加引號，只有一個不需要加引號
-
如果有多個備用字體用逗號隔開
font-family: 'Courier New', Courier, monospace; 在瀏覽器中默認的字體類型是微軟雅黑依痊，更改字體需要在本地有字體包
在windows系統(tǒng)下中文漢字是宋體/新宋體避除，英文是arial
三、加粗和傾斜屬性
-
加粗屬性：font-weight
-
100-900 整百數(shù) 表示加粗程度胸嘁，沒有px單位
100-500表示正常字體驹饺，600-900表示加粗字體
bold 加粗的 / bolder 更粗的
-
normal 正常的/清除加粗標簽的默認樣式
b,strong{ font-weight:normal; }
-
-
傾斜屬性：font-style
italic 傾斜的 / obliuqe 更傾斜的
-
normal 正常的/清除傾斜標簽的默認樣式
i,em{ font-style:normal; }
D. 對齊方式
一、水平方向?qū)R
- 屬性：text-align
- 屬性值
- left / right / center
- justify 兩端對齊（不常用）
二缴渊、垂直方向?qū)R
- 屬性：line-height
- 特點：當行高和容器高度相等的時候赏壹，就會垂直方向居中顯示。
補充：
marquee 滾動樣式（官方不推薦衔沼，很多瀏覽器逐漸遺棄使用）
<marquee>歡迎光臨</marquee>
三蝌借、總結
文本屬性總結
- font-size 文本大小
- font-family 文本類型
- font-weight 文本加粗
- font-style 文本傾斜
- text-align 水平對齊
- line-height 垂直對齊
簡寫方式
- 屬性：font
- 屬性值：font-weight font-style font-size/line-height font-family
- 說明
- font-weight font-style沒有需求可以不寫并且可以互換位置
- font-size/line-height 固定的不可以互換位置
- font-family無論有沒有需求都要寫
div{
font:bolder oblique 20px/50px "微軟雅黑";
font:20px/50px "楷體"
}
E. 字體顏色
屬性：color（切記不可以寫成font-color）
-
屬性值
英語單詞：green、pink指蚁、red
-
十六進制：
用法：以#開頭菩佑，后面有6位字符任意組成（a-f,0-9）
-
常見的顏色：#ffffff,#000000,#cccccc（當后面的6位字符是相同的時候，可以簡寫成3位）
例如#00ccaa => #0ca
獲取設計圖的顏色方式：ps的吸管工具/getColor軟件
-
rgb(red,green,blue) / rgba(red,green,blue,alpha)
alpha -- 透明度 取值0-1
拓展：透明度的寫法 opacity:0-1
F. 文本操作
一凝化、文本修飾屬性
屬性：text-decoration（修飾/描述）
-
屬性值
underline 下劃線
overline 上劃線
line-through 刪除線
-
none 沒有/清除下劃線
/* 清除下劃線a標簽的默認樣式 */ a{ text-decoration: none; }
二稍坯、首行縮進
- 屬性：text-indent
- 屬性值：數(shù)值加單位（px、em）
- 可以設置負值
- 只針對第一行文本起作用
- 注意：只能在塊級元素中使用（能設置寬高大写杲佟）
三瞧哟、文字間距
屬性：letter-spacing
G. 列表屬性
列表屬性的使用只針對于有序和無序列表
屬性：list-style-type
簡寫：list-style
-
屬性值：none 表示將列表的默認符號清除掉（兼容問題）
/* 清除列表的默認樣式 */ ul,li,ol{ list-style: none; }
H. 背景屬性的使用
一、背景顏色的使用
- 屬性：background-color/簡寫background
- 屬性值：與css中的顏色用法一樣（邊框顏色枪向、背景顏色勤揩、文字顏色），英文單詞/十六進制/rgba
二秘蛔、 背景圖片的使用
- 屬性：background-image
- 屬性值：url(圖片的路徑地址)
- 注意：關于img和背景圖片的區(qū)別
- img是結構默認只會顯示一張并且是占位置的
- 背景圖片是不占位置的并且默認會鋪滿整個容器
三陨亡、背景平鋪屬性
- 屬性：background-repeat
- 屬性值
- no-repeat 不平鋪傍衡，只會顯示一張圖
- repeat 平鋪，默認值
- repeat-x
- repeat-y
四负蠕、背景定位屬性
屬性：background-position（位置/定位）
-
屬性值
坐標值 100px 100px
方向值：top蛙埂、right、bottom遮糖、left绣的、center
-
當水平方向和垂直方向相等的時候，可以簡寫成一個
/* 右下角 */ div{ background-position:left bottom; }
五止吁、背景固定屬性
- 屬性：background-attachment
- 屬性值
- scroll 默認值 滾動
- fixed 固定
六被辑、背景屬性的簡寫方式
- 屬性：background
- 屬性值：顏色 圖片 平鋪 定位 固定
