1.塊元素&內(nèi)聯(lián)元素
塊級(jí)元素 （例如div 默認(rèn)屬性為display：block? 會(huì)獨(dú)占一行 可以加邊框看效果? ）高度是由div中內(nèi)容決定
####文檔流：文檔內(nèi)元素的流動(dòng)方向敏沉，內(nèi)聯(lián)元素是從左往右甘磨，塊級(jí)元素是從上往下（因?yàn)槟J(rèn)每個(gè)塊都是一行的寬度）####
內(nèi)聯(lián)元素? 高度是由其中文字高度決定的翰萨，內(nèi)聯(lián)元素設(shè)置width和height是無(wú)效的紫岩，上下的margin和padding也無(wú)效，要將它們?cè)O(shè)為display:inline-block才有效。
------------
盡量不寫height和width，這兩個(gè)屬性會(huì)引出很多bug铣焊，要寬高的時(shí)候可以用padding，另外span元素設(shè)置padding的時(shí)候要將它設(shè)為display:inline-block罕伯，因?yàn)閮?nèi)聯(lián)元素不能設(shè)置寬高曲伊，
#####? inline-block具有inline的同行特性，也具有block的高度特性追他。使用了?inline-block? ?還要使用vertical-align: top; 來(lái)清除 一個(gè)下邊距的bug######
對(duì)于display:inline(內(nèi)聯(lián)元素)的元素坟募，設(shè)置width/height/上下margin和padding都是無(wú)效的
------------
2. float（浮動(dòng)）
布局過(guò)程經(jīng)常！邑狸！用到浮動(dòng)
例如：float:left;? 元素靠左浮動(dòng)
塊元素加上浮動(dòng)會(huì)內(nèi)縮? 下面的div寬度只有4個(gè)字的寬度? 用了浮動(dòng)后后面的div會(huì)跟著飄上來(lái)Ｐ概础！单雾！ 所以需要在加了浮動(dòng)的div的父級(jí)元素加上 clearfix 來(lái)解決bug?
? ? ? ? ? ?<div style="clearfix">??
例如：<div style="float:left">我變瘦了 </div>
? ? ? ? ? ?<div>我在哪</div>
? ? ? ? ? ?</div>
----------------
.clearfix::after{
? content: "";
? display: block;
? clear: both;
}
---------------
3.讓一個(gè)背景圖居中赚哗，并且讓它自適應(yīng)屏幕
background: url("whhhhhh.jpg") no-repeat center center ;
background-size: cover;
4.讓一個(gè)div水平居中
margin-left:auto;
margin-right:auto;
5.postion??
讓一個(gè)div在父級(jí)元素中絕對(duì)居中? 父DIV要使用position:relative;
兒子要使用?position: absolute;
6. 脫離文檔流
相對(duì)于窗口定位：
position:fixed
相對(duì)于父級(jí)元素定位：
在父級(jí)元素加上：position:relative
給自己加上：position:absolute（絕對(duì)定位后元素會(huì)變成display:block）
7.使用::before和::after時(shí)
要加上這兩行的代碼，才會(huì)顯示內(nèi)容
content: "";
display:block;? ? //如果是絕對(duì)定位就不用加铁坎，因?yàn)榻^對(duì)定位后元素會(huì)變成display:block;
#####################################################################
1.左右布局
創(chuàng)建一個(gè)父及div 這個(gè)div有倆兒子 父級(jí)div 要用下clearfix樣式來(lái)清除兒子使用了float后帶來(lái)的bug 在單獨(dú)寫個(gè)樣式讓自己在瀏覽器中左右居中 margin:0 auto; 這樣好看點(diǎn) 兩個(gè)兒子添加float:left 蜂奸； 在設(shè)置下寬度?
在div中沒(méi)有內(nèi)容的情況下給div加個(gè)邊框容易辨識(shí)
2.左中右布局
同上 只要三個(gè)兒子寬度加起來(lái)不超過(guò)父親就OK
3.水平居中
使用 margin:0 auto;? 想居中就別再加float了吆
4.垂直居中?
文字的話可以用line-height: ;? ?##當(dāng)自己太大時(shí)不準(zhǔn)##
還可以使用position 這里又要講到父親跟兒子? 父親必須添加position:relative
兒子要用position:absolute? 這就是傳說(shuō)的絕對(duì)定位 根據(jù)他老子定位? 然后設(shè)定padding? margin top調(diào)節(jié)位置
-------------------------------------------------------------------------------------------
