1锰蓬；塊級元素
常用的塊級元素：
div?--?無意義?用在大布局上
ol? --?有序列表
ul? --?無序列表
li? --?列表項
ol和ul下面的第一層級的標簽只能是li
dl? --?定義列表
dt? --?定義術語
dd? --?定義描述
hx（1-6）--?標題?意義?瀏覽器會優(yōu)先抓取h標題中的內容
p? ?--?段落標簽
table?--?表格
from?--?表單
2)行內元素
常用的內聯(lián)元素：
span?--?無意義?用在小結構的區(qū)分
b?--?加粗
strong?--?加粗?帶有強調的意義
i?--?斜體
em?--?斜體? 帶有強調的意義
sub?--?下標
sup?--?上標
s? --?中劃線
del?--?刪除線
small?--?文字變小
big?--?文字變大
1）塊級元素的內容甥绿；
變成塊級元素就將值設置為display：block
特點：
1偏陪、獨占一行
2、在不設置寬高的情況下昼弟，寬度是父級元素內容的寬度，高度是本身內容的高度
3、可以設置寬高
4扯躺、可以設置內外邊距
5、塊級元素可以進行任何元素的嵌套
2）內聯(lián)元素的內容
變成內聯(lián)元素就將值設置為display：inline
特點：
1蝎困、和其他的文字或者內聯(lián)元素在一行顯示
2录语、默認寬高就是內容的寬高
3、不能設置寬高
4禾乘、設置內外邊距的時候澎埠，只有左右起作用
5、內聯(lián)元素不能嵌套塊級元素（規(guī)范）
3）行內塊級元素的特點：display：inline-block
1始藕、可以設置寬度和高度蒲稳，margin和padding
2氮趋、在一行顯示，從左到右（html的書寫順序）
3江耀、也會受到空格的影響剩胁，導致元素之間有間距
4、也會受到垂直對齊方式的影響（內容的高度不同）祥国，如果出現(xiàn)這中情況昵观，我們需要將所有的元素對齊方式修改一致
頁面是由一個個盒子組成，如果是平級盒子默認排布：
1舌稀、塊級元素：從瀏覽器的左上角開始進行排布啊犬，并且是上下排布
2、內聯(lián)元素：從瀏覽器的左上角開始排布壁查，他們會在一行從左到右進行排布
如果是嵌套盒子默認排布：
1觉至、塊級元素：子級盒子會在父級盒子的左上角開始排布，所有平級的子級元素還是會默認上下排布
2潮罪、內聯(lián)元素：子級盒子會在父級盒子的左上角開始排布康谆，所有平級的子級元素還是會默認從左到右排布
2；路徑：
相對路徑：從文件出發(fā)嫉到，通過參照物找到我們要找的文件
../表示上一級?--?指的是要引入文件的上一級沃暗，而不是被引入文件的上一級
如果是同級文件，我們只需要寫文件夾名稱或者文件名稱
每一層級之間用/隔開?-->?父級/子級
絕對路徑：通過一個地址直接能找到我們要找到的文件
D:\2016教學\html和css\13何恶、第十三期\2孽锥、第二天\修改\20161011\備份\anna1.jpg
文件夾沒有后綴
文件才有后綴
3；選擇器的分類：
選擇器的名稱? ?選擇器的格式? ?選擇器的權重? ?作用
1）细层、標簽選擇器? ?標簽名{css}? ? ? ?1? ? ? ? 批量選擇相同標簽名的元素
p{color:red;}? ? ? ? ? ? ?給這些元素添加同一的css樣式
2）惜辑、類選擇器? ? ?.類名{css}? ? ? ?10? ? ? ?區(qū)分相同的標簽名，單獨選擇其中一個
.className{}? ? ? ? ? ? ? 兩個p標簽疫赎，通過不同的類名區(qū)分
3）盛撑、id選擇器? ? #id名{}? ? ? ? ? 100? ? ? ?準確找到唯一的一個元素
選擇器的權重：
當選擇器不同，但是都操作同一個元素的相同css屬性的時候捧搞，誰的權重器權重大抵卫，誰的css屬性值生效
特殊選擇器（組合選擇器）
4；
選擇器的名稱? ?選擇器的格式? ? ? ? ? 選擇器的權重? ? ? ? 作用
1）胎撇、后代選擇器? 選擇器1?選擇器2{}? ? ?所有選擇器的權重之和? 操作一定范圍內的指定? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 元素
父級選擇器?子級選擇器{}?子孫后代全部選擇上了
2）介粘、子級選擇器? 選擇器1>選擇器2>...{}?所有選擇器的權重之和? 操作一定范圍(更加具體? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?)內的指定元素
第一層級的父級>第一層級的子級{}
5；選擇器的名稱? ?選擇器的格式? ? ? ? ?選擇器的權重? ? ? ? ? ? ?作用
1）并集選擇器? 選擇器1,選擇器2...? ?每一個選擇器都是獨立的權重? 給不同的元素添加
p,.box1,a{}相同的樣式
2）交集選擇器? 選擇器1選擇器2? ? ? ?所有選擇器權重之和? ? ? ? ?增加權重
標簽.類名/標簽#id名
p.box1{}
p#box{}
.box1.box2{}?p.s：ie6版本瀏覽器不支持
組成交集選擇器的所有選擇器都必須作用于同一元素
6晚树；選擇器的名稱? ?選擇器的格式? ? ? ? ? ? ? 選擇器的權重? ? ? ? 作用
1）姻采、類型選擇器? 選擇器[type=value]{}? ? ?10-11之間? ? ? ? ? 通過標簽的type屬? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 性值區(qū)分元素
2）、偽類選擇器? 選擇器:偽類{}? ? ? ? ? ? 跟選擇器基本一致? ? ? 可以給元素
添加一種狀態(tài)
text-decorration:none?a標簽的下劃線去掉
添加偽元素
偽元素：html中標簽就是元素爵憎，那么偽元素的意思是通過css向html中添加一個原本不存在的元素
偽類一般只兼容到ie8版本以上
偽元素：
選擇器:before：
選擇器:after
before和after都會在這個元素內慨亲，before在所有html內容之前婚瓜，after在所有html內容之后
div:after,div:before{}
::before
內容
::after
最后一個選擇器：
通配符選擇器：
格式:? *{}? *全部的意思?從html這個標簽開始全部標簽都會被選擇上
權重小于1? ?這個選擇器在項目中一般不用，因為這個選擇器會過濾所有的標簽
*****組合選擇器的查找方式是從右向左查找巡雨，所以緊挨著{}的這個選擇器盡量是類選擇器
*****組合選擇器一般作用的對象是緊挨著{}的這個選擇器
.box1?ul?li{}? li才是最終要操作的元素? .box1?ul?只是用來劃定范圍
*****id名義上權重是100?但是其他選擇器的權重之和大于100?也不能覆蓋掉id內的屬性
********選擇器的格式? ?選擇器的權重怎樣計算? 選擇器的作用
4闰渔；盒子模型；
Box?Formatting?Context
盒子?布局?規(guī)格? ?上下文
盒子模型的組成
盒子與盒子之間的距離叫做外邊距? ? ? ? ? ? ? ? css屬性：margin[外邊距]
盒子周圍的邊框（盒子外邊緣距離盒子內邊緣的距離）?css屬性：border[邊框]
盒子內容距離邊框內邊緣的距離叫做內邊距? ? ? ? ?css屬性：padding[內邊距]
盒子的內容?content? ? ? ? ? ? ? ? ? ? ? ? css屬性：width[寬度]?/?height[高度]
盒子在頁面上所占的位置大小
x軸=寬度（width）+左右內邊距（padding-left+padding-right）+左右邊框（border-left+border-right）
+左右外邊距（margin-left+margi-right）
y軸=寬度（height）+上下內邊距（padding-top+padding-bottom）+上下邊框（border-top
+border-bottom）+上下外邊距（margin-top+margi-bottom）
margin
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
margin:10px;-->四個方向的值相等
margin:10px?20px;-->上下?10px? 左右?20px
margin:10px?15px?20px;-->上?10px?左右?15px?下20px
margin:10px?15px?20px?25px;?上?右?下?左
padding
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
padding:10px;-->四個方向的值相等
padding:10px?20px;-->上下?10px? 左右?20px
padding:10px?15px?20px;-->上?10px?左右?15px?下20px
padding:10px?15px?20px?25px;?上?右?下?左
5铐望；margin屬性的兼容性問題：
1冈涧、同級元素，并且是上下排布正蛙，第一個元素有margin-bottom值督弓，第二個元素有margin-top值的時候，
兩個值取最大值保留乒验，兩個值相同留一個
2愚隧、父子級元素，子級元素有margin-top值锻全，父級元素不存在padding和border值的時候狂塘，
margin-top值會發(fā)生傳遞，傳遞給父級元素
overflow:?hidden;這個屬性解決這個問題
3鳄厌、h標簽?ul?dl?p等標簽都天生自帶margin或者padding值荞胡，這些值影響我們的盒子模型計算，
所以我能要將這些值先進行重置
4了嚎、浮動元素margin值加倍?ie6瀏覽器出現(xiàn)
寫一個hake
div{margin-left:10px;_margin-left:5px;}
ie6瀏覽?20px
_margin-left:5px;?其他瀏覽器取值為10px泪漂，ie6取值5
css屬性分為可繼承屬性和不可繼承屬性
可繼承屬性? 和文字相關的屬性都是可繼承屬性
6；溢出隱藏
overflow:?auto;?自動識別? 縱向滾動條
overflow:?scroll?自動識別?橫向滾動條
7歪泳；邊框
border-width:?10px;--四個方向的寬度都是10
8萝勤；border邊框寫三角形
border-width:?5px;
border-style:solid;
border-color:red?transparent?transparent?transparent?;
width:?0
9；ps的使用
在ps中打開一個文件
【文件】--【打開】--【選中文件】--【打開】
直接將文件拖拽到ps操作界面呐伞，鼠標釋放
文件原大小展示
ctrl+1
文件展示的時候縮小或放大
ctrl+"-"?縮小
ctrl+"+"?放大
局部方法和縮小
點擊Z鍵或者是點擊工具欄中的縮放工具? 用鼠標進行拖拽
圖層工具欄
【窗口】--【圖層】?f7
移動工具?可以移動圖層
V
選框工具? 可以用他來測量
M
抓手工具? 點擊鼠標左鍵?移動鼠標就可以進行文件的移動
H? ?按住空格鍵臨時切換到抓手工具
修改ps中的單位
【編輯】--【首選項】--【單位與標尺】--像素/點
查看測量結果
【窗口】--【信息】
查看文字信息
1敌卓、可以用文字工具“T”選中文字進行查看
2、打開【窗口】--【字符】伶氢，再用移動工具點擊這個文字就可以查看
移動工具設置成自動選擇【圖層】
查看顏色
工具欄中有一個面板是前景色假哎，還有一個背景色
ps中設置輔助線
ctrl+R? 顯示標尺
點擊標尺位置，拖拽后會出現(xiàn)一條輔助線鞍历，到達指定位置釋放鼠標即可
調整輔助線的位置或者刪除廢棄的輔助線
用移動工具
刪除?移動工具選中輔助線向窗口外拖拽釋放
隱藏/顯示輔助線?ctrl?+?“;”/ctrl+H
切片工具? 默認是裁剪工具?我們需要選擇第三個
C
鼠標從頭開始不釋放一直拖拽到指定位置釋放
選中切片?右鍵【編輯切片選項】可以改變切片的大小
移動切片?鍵盤的上下所有鍵?每按一次?移動1像素
切片選擇工具，可以直接移動切片
切片選擇工具?裁剪工具的第四項
切片的導出：
【文件】--【儲存為web所用格式】
alt+shift+ctrl+S
文件的格式：
jpeg（品質在60-100之間）? .jpg/.jpeg
png? png24? 用在背景為透明的圖片上? .png
gif? ? ? ? ?用在背景為透明的圖片上/動態(tài)圖
10肪虎；img的默認屬性
img受到對齊方式的影響會有底部空白劣砍，我們需要將這個空白去掉，改變對齊方式即可
vertical-align:?top/middle/bottom;都可以
11扇救；margin:?0?auto;
可以使有寬度的塊級盒子刑枝，自動在其父級盒子內水平居中
必須要設置寬度才能讓盒子居中
12香嗓；
浮動元素的特點：
1、按照一定方向装畅，按照html的書寫順序靠娱，從這個方向開始依次向另一個方向排布
2、浮動元素掠兄，都可以直接設置盒子模型的屬性
3像云、浮動元素脫離文檔流，文檔流內的元素識別不到浮動元素********
4蚂夕、任何內聯(lián)元素和行內塊級元素（html的書寫順序）挨著浮動元素的時候都會圍繞著浮動元素進行排布（也就是說他們都是平級的時候）
5迅诬、文字會圍繞著浮動元素進行排布
6、浮動元素進行排布的時候婿牍，他會優(yōu)先識別他緊挨著的上一個元素
float:left;? 左浮動
float:inherit;?繼承浮動屬性的屬性值
float:right;? 右浮動
float:none;去掉浮動屬性
clear:both;? 清除掉浮動元素對浮動元素“下方”元素的影響
清除浮動侈贷，不是將元素的浮動屬性去掉，而是清除掉浮動元素對其他元素（html順序寫在浮動元素后面的那些元素）影響等脂，所以我們清除浮動的屬性寫在**最后一個浮動元素的后面**
清除浮動的方式：
1俏蛮、在最后一個浮動元素的后面用塊級元素引入clear:both;這個css屬性****
2、給浮動元素的父級盒子添加高度? ***
3上遥、給浮動元素的父級盒子添加overflow:?hidden;這個屬性?***
4搏屑、給浮動盒子的父級盒子添加float這個屬性?*
最常用的方式：利用偽類來進行浮動的清除
格式
.clear{zoom:1;}
.clear:after{
display:block;
content:"";
clear:both;
}
13；十六進制
色值：顏色
十六進制色值--所有瀏覽器都支持
介于0-f（黑-白）之間
格式:?#XXXXXX
#ff0000--#f00--red
#fff000--#fff000
#000000--黑色
#ffffff--白色
RGB--紅綠藍
0-255之間
還支持百分數(shù)?0%-100%之間
rgb(207,70,70)
RGBA--紅綠藍透明度? 支持ie8以上瀏覽器
0-255之間
還支持百分數(shù)?0%-100%之間
Alpha支持的數(shù)值?0-1?0是完全透明?1是完全不透明
單位：
絕對單位
px? 像素
cm? 厘米
m? ?米
km? 千米
s? ? 秒
ms? ?毫秒
14露该；
定位：是在基本文檔流之上的睬棚，也是脫離文檔流，我們要的效果就是壓在其他元素上
定位的元素要在其他元素之上解幼，這里的其他元素指的是任何元素（包括文檔流內元素抑党，浮動元素，定位元素）
通過上?下?左?右四個方向來進行位置的定義
top?bottom?left?right?前提是這個元素是定位元素
1撵摆、相對定位：? ? ? ? ? ? position:?relative;
特點：
a底靠、參照物是本身
b、沒有脫離文檔流特铝，所以其他元素還可以識別相對定位的元素暑中，其他元素識別的是相對元素原來的位置而不是改變的位置
c、相對定位的元素鲫剿，還是在文檔流內元素的上方
d鳄逾、相對定位的元素可以通過z-index屬性改變他們的層級關系
e、相對定位的元素灵莲，原display屬性不發(fā)生改變
2雕凹、絕對定位? ? ? ? ? ? position:?absolute;
特點:
a、脫離文檔流
b、絕對定位元素默認參照物是第一次識別的body的位置
c枚抵、只要具有定位屬性的元素（上級元素）都是絕對定位元素的參照物
（一般設置參照物的時候线欲，我們給參照物相對定位這個屬性）
d、絕對定位的元素汽摹，display屬性改變
e李丰、絕對定位的元素可以通過z-index屬性改變層級關系
f、當絕對定位元素的上級元素都有定位屬性的時候逼泣，它的參照物最近的父級元素
以誰作為參照物趴泌，就給他設置一個?position:?relative;
3、固定定位? ie6不兼容? ? ? ? ? ? position:?fixed;
a圾旨、脫離文檔流
b踱讨、參照物永遠是瀏覽器的可視窗口
c、固定定位的元素砍的，display屬性改變
d痹筛、固定定位的元素可以通過z-index屬性改變層級關系
15；background的屬性
1）?background-color:?red;背景顏色?鋪滿整個盒子
2）?background-image:?url("圖片路徑");?背景圖片?默認鋪滿整個盒子
3）?background-repeat:?no-repeat;?背景平鋪
no-repeat?不平鋪?repeat-x?x軸平鋪?repeat-y?y軸平鋪
4）background-size:?控制背景圖片的寬高? 第一個值是寬度?第二個值是高度
ize中如果是百分數(shù)?它指的是盒子的寬高的百分之多少
如果是絕對單位廓鞠，例如px?給多少值?背景圖片就是多大
16帚稠；?表單元素的標題【表單元素的描述】
用戶名
當label標簽中for的值和表單元素中id的值相同的時候，點擊label中的文字床佳，自動跳轉到相關的表單元素
input?標簽
type? 類型
placeholder?提示信息?【h5的新增屬性】{瀏覽器兼容?html文件的文檔聲明需要是h5的聲明}
value?值
id? ?id
name?名稱
文本框text：文本框
密碼框?password：密碼框
郵箱? ? email：郵箱
單選框radio：單選框
多選框checkbox：多選框
單選框和多選框?有默認選中狀態(tài)?checked="checked"/【checked】
單選的時候我們只需要一個選項?那么我們可以通過name值一致的這種做法?達到這個目的
?file：上傳文件
image：圖片
reset：重置按鈕
submit：提交按鈕
button：普通按鈕
-webkit-user-select:?none;?把鼠標點擊的陰影取消
