3、inline-block text-align
<div>
<div>Demo</div>
</div>
<style>
.child {
display: inline-block;
}
.parent {
text-align: center;
}
</style>
相容性佳(甚至可以相容IE 6 和IE 7)
4、absolute margin-left
<div>
<div>Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px; /* width/2 */
}
</style>
# 寬度固定
比起使用transform ,有相容性較好
5、absolute transform
<div>
<div>Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
絕對定位脫離文件流,不會對後續元素的佈局造成影響。
transform 為CSS3 屬性,有相容性問題
6、flex justify-content
<div>
<div>Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center;
}
</style>
只要設定父節點屬性,無須設定子元素
flex有相容性問題
#垂直居中:
1、table-cell vertical-align
<div>
<div>Demo</div>
</div>
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
相容性好(IE 8以下版本需要調整頁面結構至table
#2、absolute transform
強大的absolute對於這種小問題當然也是很簡單的
<div>
<div>Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
絕對定位脫離文檔流,不會對後續元素的佈局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度。
transform 為CSS3 屬性,有相容性問題
同水平居中,這也可以用margin-top實現,原理水平居中
3、flex align-items
如果說absolute強大,那flex只是笑笑,因為,他才是最強的。。但它有相容問題
<div>
<div>Demo</div>
</div>
<style>
.parent {
display: flex;
align-items: center;
}
</style>
水平垂直居中:
1、absolute transform
<div>
<div>Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
絕對定位脫離文件流,不會對後續元素的佈局造成影響。
transform 為CSS3 屬性,有相容性問題
2、inline-block text-align table-cell vertical-align
<div>
<div>Demo</div>
</div>
<style>
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
</style>
#相容性好
3、flex justify-content align-items
<div>
<div>Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /*垂直居中*/
}
</style>
只需設定父節點屬性,無須設定子元素
蛋白的相容性問題
一列定寬,一列自適應
#1、float margin
<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>
<span style="font-family: 微软雅黑, Microsoft YaHei;">#IE 6 中會有3像素的BUG,解決方法可以在.left 加入margin-left:-3px 當然也有解決這個小bug的方案如下:</span>
<div>
<div>
<p>left</p>
</div>
<div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>
此方法不會存在IE 6 中3像素的BUG,但.left 不可選擇, 需要設定.left {position: relative} 來提高層級。注意此方法增加了不必要的 HTML 文字結構。
傲嬌的程式設計師應該放棄太低版本的瀏覽器
2、float overflow
<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right {
overflow: hidden;
}
</style>
設定overflow: hidden 會觸發BFC 模式(Block Formatting Context)區塊級格式上下文。 BFC是什麼呢。用通俗的來講就是,隨便你在BFC 裡面乾啥,外面都不會受到影響 。此方法樣式簡單但不支援 IE 6
3、table
<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell;
/*宽度为剩余宽度*/
}
</style>
table 的顯示特性為每列的儲存格寬度和一定等與表格寬度。 table-layout: fixed 可加速渲染,也是設定佈局優先。 table-cell 中不可以設定margin 但是可以透過padding 來設定間距
4、flex
<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
}
</style>
低版瀏覽器相容問題
效能問題,只適合小範圍佈局
我們在學會一列定寬,一列自適應的佈局後也可以方便的實現多列定寬,一列自適應多列不定寬加一列自適應這裡我們不一一講解,大家自行嘗試,也可以鞏固前面學習的
等分佈局:
1、float
<div>
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
</div>
<style>
.parent {
margin-left: -20px;
}
.column {
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
</style>
此方法可以完美相容於IE8 以上版本
2、flex
#<div>
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
</div>
<style>
.parent {
display: flex;
}
.column {
flex: 1;
}
.column+.column { /* 相邻兄弟选择器 */
margin-left: 20px;
}
</style>
強大簡單,有相容問題
## 3、table
<div>
<div>
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
</div>
</div>
<style>
.parent-fix {
margin-left: -20px;
}
.parent {
display: table;
width: 100%;
/*可以布局优先,也可以单元格宽度平分在没有设置的情况下*/
table-layout: fixed;
}
.column {
display: table-cell;
padding-left: 20px;
}
</style>
等高佈局
#1、table##table的特性為每列等寬,每行等高可用於解決此需求
<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell
/*宽度为剩余宽度*/
}
</style>
2、flex#<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
}
</style>
注意这里实际上使用了 align-items: stretch,flex 默认的 align-items 的值为 stretch
3、float
<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
overflow: hidden;
}
.left,
.right {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left {
float: left;
width: 100px;
margin-right: 20px;
}
.right {
overflow: hidden;
}
</style>
此方法为伪等高(只有背景显示高度相等),左右真实的高度其实不相等。 兼容性较好。
到此,我们了解常见的布局解决方案,这些只是参考,一样的布局实现方式多种多样。主要就使用position、flex 、table(从很久很久以前起,我们就抛弃了table布局页面,但display: table;是异常强大)、float等属性目前flex兼容性较差。
相关文章推荐:
常见css水平自适应布局_html/css_WEB-ITnose
DIV+CSS布局中常见的10大错误_html/css_WEB-ITnose
CSS常用布局实现方法_html/css_WEB-ITnose