一、元素的content(內容)、padding(內邊距)、border(邊框)、margin(外邊距)構成了CSS盒模型
二、IE盒模型和W3C盒模型
1)IE盒模型是怪異模式下的盒模型,W3C盒模型是標準模式下的盒模型;
2)IE盒模型的width/height包含了content的width/heigh+padding+border
W3C盒模型的width/height只是content的width/height
三、CSS3中的box-sizing
不一樣的人有不一樣的習慣,在css3中增長了box-sizing:content-box(遵循W3C盒模型)| border-box(遵循ie盒模型)|inherit(該屬性的值從父元素繼承)javascript
一、絕對定位實現水平垂直居中:css
position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
注意:
1>對父元素要使用 position: relative; 對子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。
2>若是隻要垂直居中,能夠不寫right: 0;left: 0;
margin: auto; 能夠換成 margin-top: auto; margin-bottom: auto;
3>若是隻須要水平居中,top: 0; bottom: 0; 能夠省略不寫
margin: auto; 能夠換成 margin-rihgt: auto; margin-left: auto; 。html
二、肯定高度的塊級元素居中:java
position:absolute; top:50%; margin-top:(自身高度的值的一半的負值)
三、對不定高的div實現垂直居中
a、利用css3的彈性佈局實現
在父元素的css樣式中加入如下代碼:css3
display:flex; justify-center:center; align-items:center;
b、利用平移實現
在子組件中加入如下代碼:chrome
position:relative: left:50%; top:50%; transform:translate(-50%,-50%); -weikit-transform: translate(-50%,-50%);
四、一段文本、一張圖片水平居中
text-content:center;
圖片是行內元素,在 ie, edge, chrome, firefox, opera 中對於 img 的默認顯示方式是: display: inline;
5)塊級元素水平居中,使用margin:auto;
6)單行文本垂直居中 ,讓height和line-height相等
注意:當box-sizing:content-box時,line-height和height相等;
當box-sizing:border-box時,line-height=height-(padding-top)-(padding-bottom)-(border-top)-(border-bottom)四個值,也就是說line-height等於content的有效高度。瀏覽器
一、是什麼浮動?
浮動的元素會脫離文檔流並向左/向右浮動,直到碰到父元素或者另外一個浮動元素。
二、爲何要清浮動?
浮動會致使父元素的高度塌陷。當父元素不設置高度,由內容撐開時,浮動元素脫離了文檔流,並不佔據文檔流的位置,父元素就不能被撐開,也就沒有了高度。因此須要經過清浮動來解決父元素高度坍塌的問題。
三、清浮動的方式:
1)clear清除浮動
在浮動元素後面添加一個空的div,設置clear屬性爲both。
clear屬性不容許被清除浮動的元素的左邊/右邊挨着浮動元素,原理在被清除浮動的元素上面或者下面添加足夠的清除空間。
2)clear清除浮動的最佳實踐:利用僞類元素來清除有浮動的標籤
IE8和非ie瀏覽器才支持:after,至關於在該元素後面添加了一個空元素,利用clear:both清除浮動。zoom可解決ie六、ie7的浮動問題。佈局
<div class="box clearfix"> <div class="red"></div> <div class="green"></div> </div> <style> .clearfix::after{ //向元素的內容以後添加新內容 display: block; content:''; clear:both; visibility:hidden; height:0 } .clearfix{ zoom:1; } </style>
3)父級div定義overflow:hidden
原理:必需要定義width或zoom:1,同時不能定義高,使用overflow:hidden時,瀏覽器會自動檢查浮動區域的高度。缺點:不能和position配合使用,由於超出的尺寸的會被隱藏。flex
聖盃佈局和雙飛翼佈局都是三欄佈局,兩邊的盒子寬度固定,中間盒子寬度自適應。
1)聖盃佈局
寫結構時優先寫中間盒子,由於中間盒子優先被渲染,設置其自適應,寬度設爲100%。中間欄放在文檔流前面以優先渲染。
第一步:設置center寬度爲100%,而後left和right設置固定寬度。而後三個div都左浮動。
第二步:設置最外層包裹box: padding-left:200px;padding-right:250px;
firefox
第三步:設置left: margin-left: -100%; 設置right:margin-left: -250px;
第四步:須要將left和right經過相對定位移動到兩側
注意:最好給body加一個最小寬度min-width
聖盃佈局有個問題,就是當面板的main部分比兩個子面板寬度小的時候,佈局就會亂掉。
<head> <meta charset="UTF-8"> <title>Title</title> <style> body{ min-width:550px; } #box{ height:700px; padding-left:200px; padding-right:250px; } .content { background: yellow; width:100%; height:600px; float:left; } .left { background: pink; width:200px; height:600px; float:left; margin-left: -100%; position: relative; left:-200px; } .right { background: yellowgreen; width:250px; height:600px; float:left; margin-left: -250px; position: relative; right:-250px; } </style> </head> <body> <div id="box"> <div class="content"></div> <div class="left"></div> <div class="right"></div> </div> </body>
2)雙飛翼佈局
<body> <div class="box"> <div class="main"> <div class="center">center</div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body> <style> *{margin:0;padding:0;} body{ min-width:500px; } .main{ width:100%; background: palevioletred; float:left; } .left{ width:150px; background: greenyellow; float:left; margin-left:-100%; } .right{ width:200px; background: yellow; float:left; margin-left:-200px; } .center{ margin:0 200px 0 150px; } </style>
https://www.zhihu.com/question/21504052/answer/50053054
聖盃佈局和雙飛翼佈局解決的問題是同樣的,就是兩邊頂寬,中間自適應的三欄佈局,中間欄要在放在文檔流前面以優先渲染。 聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的,也就是三欄所有float浮動,但左右兩欄加上負margin讓其跟中間欄div並排,以造成三欄佈局。 不一樣在於解決」中間欄div內容不被遮擋「問題的思路不同: 聖盃佈局,爲了中間div內容不被遮擋,將中間div設置了左右padding-left和padding-right後,將左右兩個div用相對佈局position: relative並分別配合right和left屬性,以便左右兩欄div移動後不遮擋中間div。 雙飛翼佈局,爲了中間div內容不被遮擋,直接在中間div內部建立子div用於放置內容,在該子div裏用margin-left和margin-right爲左右兩欄div留出位置。 多了1個div,少用大體4個css屬性(聖盃佈局中間divpadding-left和padding-right這2個屬性,加上左右兩個div用相對佈局position: relative及對應的right和left共4個屬性,一共6個;而雙飛翼佈局子div裏用margin-left和margin-right共2個屬性,6-2=4),我的感受比聖盃佈局思路更直接和簡潔一點。 簡單提及來就是」雙飛翼佈局比聖盃佈局多建立了一個div,但不用相對佈局了「。