通常在html有塊級元素和行級元素,主要的塊級元素有css
div,p,h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有好記的辦法,div,p,顯示標題的,列表,表格,定義列表相關的html
行內元素,也稱行級元素,主要有a,span,em,i,strong,input,img,label,select,textarea等
通常塊級元素會獨佔一行,而行內元素不會,行內元素會擠在一行,直到一行排滿,針對行內元素和會級元素,主要在後面佈局用到的是,能夠將一些行內元素的display屬性變成block,display:block;,也可使用dispaly:inline-block屬性,segmentfault
在這裏順便提一下block,inline-block,inline,的區別。對設置了display:block;的標籤,你能夠設置width,height,margin,padding,這些都會起做用,而對於display:inline;的標籤,你在css裏設置的width,height,margin-top,margin-bottom,padding-top,padding-bottom是沒有用的(margin-left,margin-right,padding-left,padding-right是有效的),這裏有一個疑問??padding的全部屬性都在起做用,margin的top和bottom確實不起做用,代碼是這樣的:瀏覽器
<!DOCTYPE html>
<html lang="en">
<head>佈局
<meta charset="UTF-8"> <title>test</title> <style type="text/css"> .p{width: 200px; height:100px; background-color: #233; margin: 10px; padding:10px; } .s {width:50px; background-color: #c2c; height:50px; margin: 10px; padding:10px;} </style>
</head>
<body>學習
<div class="p"><span class="s">son</span></div>
</body>
</html>
flex
經常使用的與定位相關的有float,static,relative,absolute,fixed,記得剛開始學習的時候一直搞不清楚relative和absolute,以前一直在濫用float,如今狀況少一些,static是默認的,一個一個說吧。ui
relative,當把position設定爲position:relative時,咱們通常還會用到left,top,right,bottom這幾個屬性,仍是用上邊那個列子。這裏父級div相對於本身原來的位置向左,向下移動10px,座標軸以左上角爲原點,向右爲x軸,向下爲y軸,你還能夠設置left,top的值爲負值,relative是相對於自身而言,不會脫離文檔流,通常要定位先要將父級設置爲relative。spa
<!DOCTYPE html>
<html lang="en">
<head>code
<meta charset="UTF-8"> <title>test</title> <style type="text/css"> .p{width: 200px; height:100px; background-color: #ccc; position: relative; left: 10px; top:10px;} .s {width:50px; background-color: #dedede; height:50px; margin: 10px; padding:10px;} </style>
</head>
<body>
<div class="p"><span class="s">son</span></div>
</body>
</html>
absolute,首先你得找一個父級做爲參照,並將父級設置爲relative,假如不這樣設定的話,都是以body做參照,下面仍是舉個列子。能夠看到,sibling跑到前面去了,說明position:absolute;是脫離文檔流的,與float有點相似,這裏你可能會有疑問,爲何sibling的有些部分會被覆蓋,這是由於son設置爲position:absolute,(他的z-index有默認屬性吧!)我的猜想,要想將sibling放到son上面,你能夠給sibling設置也爲position:absolute,z-index:[number],number比son的大便可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> .p{width: 200px; height:100px; background-color: #ccc; position: relative; } .s {width:50px; background-color: #dedede; height:50px; position: absolute; top:10px; left:20px; } .si {width: 50px; height:50px; background-color: #f00; } </style> </head> <body> <div class="p"> <div class="s">son</div> <div class="si">sibling</div> </div> </body> </html>
3.fixed,以瀏覽器窗口爲參照,固定位置不動,具體本身能夠動手操做試試。
4.至於說float,float:left,float:right,float屬性是脫離文檔流的,這個估計也是咱們剛開始用得最多的,最方便的一個,同時也會給咱們帶來許多問題,
<body> <div class="p"> <div class="s">son</div> <div class="si">sibling</div> </div> </body> <style type="text/css"> .p{width: 200px; height:100px; background-color: #ccc; } .s {width:50px; background-color: #dedede; height:50px; float: left; } .si {width: 100px; height:50px; background-color: #f00; } </style>
這一次你會發現與前面的position:absolute,有相同的地方,都是.son覆蓋sibling,不一樣的是,float裏文字被擠出來,這也是以前主要是用來作文字環繞效果有關。關於定位的內容還有不少,這裏不一一細說。
初學階段,咱們必定會遇到清除浮動的問題,這是在寫頁面裏必定會碰到的問題,關於清除浮動的問題,網上也是一搜一大把,下面我本身先概括一下吧!仍是先來一個列子。
<body> <div class="p"> <div class="s1">son1</div> <div class="s2">son2</div> </div> </body> <style type="text/css"> .p {border:2px solid #f00;} .s1 {float: left; width:50px; height:100px; background-color: #a11; } .s2 {float: left; width:50px; height:150px; background-color: #ccc; margin-left:20px; } </style>
首先咱們會碰到,不能將父元素進行撐開,怎樣才能解決呢?有好幾種解決方法。下面我列舉幾種常見的解決辦法。
方法一:使用空標籤<div class="clearfix"></div> .clearfix{clear:both;},在包裹的元素裏添加這個空標籤。
<body> <div class="p"> <div class="s1">son1</div> <div class="s2">son2</div> <div class="clearfix"></div> </div> </body>
優勢:簡單,代碼少,瀏覽器兼容性好。缺點:須要添加大量無語義的html元素,代碼不夠優雅,後期不容易維護。
方法二:使用CSS的overflow屬性,這個的原理主要是運用BFC(塊級格式化上下文),今天剛看到,BFC(浮動、絕對定位元素(position 爲 absolute 或 fixed)、行內塊元素 display:inline-block、表格單元格 display:table-cell、表格標題 display:table-caption 以及 overflow 屬性值不爲 visible 的元素(除了該值被傳播到視點 viewport 的狀況)將建立一個新的塊級格式化上下文。)咱們對父元素使用overflow:hidden;也能夠達到效果。效果和以前的如出一轍。
方法三:多是使用的最廣,最高大上的一種方法,使用:after僞類,實現原理應該就是在clearfix後面的僞類添加內容, 設置了clear:both樣式。爲了IE6-7兼容性,還要添加一條樣式,來觸發haslayout()事件,寫法:
.clearfix:after {clear: both; content: ".";height:0; visibility: hidden; display: block;} .clearfix { zoom: 1; /*觸發 haslayout*/ }
這三種方法基本能幫咱們解決這一類問題,其中第三種用得最普遍。
1.水平居中: 在父元素添加樣式,要注意的是要給父元素一個寬度 {margin:0 auto;}
2.垂直居中: 這有一個比較詳細的博客詳解垂直居中,專業講解各類居中
3.水平和垂直居中,不定寬高和定寬高兩種方式,寬高固定這一種比較簡單,直接上代碼
①:{width: 200px; height: 200px; position: absolute; top:50%; left: 50%; margin-top:-100px;/*-height/2*/ margin-left:-100px;/*-width/2*/ } ②:{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} ③:{display: flex; justify-content: center; align-items: center; border: 2px solid #f22;}
暫時就總結這一些。。。