摘要:等高列布局兩列結構兩邊都加上跟相等的負值,可以實現邊框效果等同兩列流體布局多列值要夠大結構三列固定寬度結構三列自適應布局實用結構多列布局現代瀏覽器結構水平垂直
等高列布局 兩列/marginLeft
html結構:.wrap>.container>.sidebar+.main
marginLeft,marginRight兩邊都加上跟borderWidth相等的負值,可以實現邊框效果
/*1: 等同*/ .container { border-left-width: 200px;/*1*/ } .sidebar { float: left; width: 200px;/*1*/ margin-left: -200px;/*1*/ margin-right: -1px; border-right: 1px solid #888; } .main { float: left; margin-left: -1px; border-left: 1px solid #888; }
http://codepen.io/zplus/pen/N...
兩列/流體布局-border.main { width: 100%; border-right: 220px solid #f00; margin-right: -220px; } .sidebar { width: 220px; background: #f00; }
http://codepen.io/zplus/pen/X...
多列/(+padding)+(-margin)=0padding,margin值要夠大
html結構:.container>.left+.main+.right
.container { overflow: hidden; } .column { margin-bottom: -99999px; padding-bottom: 99999px; }
http://codepen.io/zplus/pen/w...
三列固定寬度/borderhtml結構:.wrap>.container>.main+.left+.right
.container { width: 520px; border-left: 220px solid #0f0; /*==leftWidth*/ border-right: 220px solid #f00;/*==rightWidth*/ } .left { float: left; width: 220px; margin-left: -220px; } .main { float: left; width: 520px; margin-right: -520px; } .right { float: right; width: 220px; margin-right: -220px; }
http://codepen.io/zplus/pen/J...
三列自適應布局(實用)html結構:.container>.main+.left+.right
.container { width: 100%; float: left; border-left: 220px solid #0f0; border-right: 220px solid #f00; display: inline; /*IE*/ } .main { float: left; width: 100%; margin-right: -100%; } .left { float: left; width: 220px; margin-left: -220px; } .right { float: right; width: 220px; margin-right: -220px; }
http://codepen.io/zplus/pen/b...
多列布局/table(現代瀏覽器)html結構:.table>.table-row>.table-cell+.table-cell+.table-cell
.table { display: table; &-row { display: table-row; } &-cell { display: table-cell; width: 33%; } }
http://codepen.io/zplus/pen/b...
水平垂直居中 flexbox方式body { display: flex; align-items: center; justify-content: center; width: 100%;/*firefox下需要*/ }
http://codepen.io/zplus/pen/m...
transform與絕對定位方式img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
https://codepen.io/zplus/pen/...
偽元素方式運用inline-block配合空標簽,這里使用偽元素替代
body { text-align: center; &:after { content: ""; display: inline-block; vertical-align: middle; height: 100%; width: 0; } }
https://codepen.io/zplus/pen/...
固定頁腳 模擬表格方式html結構:.wrap>.container+.footer
.wrap { display: table; table-layout: fixed; > div { display: table-row; height: 1px; } .container { height: auto; } }
http://codepen.io/zplus/pen/o...
負marginBottom方式html結構:.wrap>.container+.footer
html, body { height: 100%; } #{$root-selector} { min-height: 100%; height: auto !important; height: 100%; margin-bottom: -$footer-height; &:after {/*可用空標簽替代*/ content: ""; display: block; height: $footer-height; } } #{$footer-selector} { height: $footer-height; }
http://codepen.io/zplus/pen/q...
padding+position方式html結構:.wrap>.container+.footer
.wrap { position: relative; } .container { padding-bottom: 60px; /*==footerHeight*/ } .footer { position: absolute; /*基于wrap的定位*/ bottom: 0; height: 60px; /*footerHeight*/ }
http://codepen.io/zplus/pen/X...
負marginTop方式html結構:.wrap>.container^+.footer
html, body { height: 100%; } .wrap { min-height: 100%; height: auto !important; height: 100%; } .container { padding-bottom: 60px; /*==footerHeight*/ } .footer { margin-top: -60px; /*==footerHeight*/ height: 60px; }
http://codepen.io/zplus/pen/x...
借助javascripthttp://codepen.io/zplus/pen/O...
垂直居中 inline-block+偽元素在垂直居中的元素上添加偽元素,設置偽元素的高==父級容器的高,然后為文本添加vertical-align:middle
.ghost-center { position: relative; &::before { content: ""; display: inline-block; height: 100%; width: 1%; vertical-align: middle; } p { display: inline-block; vertical-align: middle; } }
http://codepen.io/zplus/pen/M...
Sass mixin方法@mixin center($width: null, $height: null) { position: absolute; top: 50%; left: 50%; @if not $width and not $height { transform: translate(-50%, -50%); } @else if $width and $height { width: $width; height: $height; margin: -($width/2) #{0 0} -($height/2); } @else if not $height { width: $width; margin-left: -($width/2); transform: translateY(-50%); } @else { height: $height; margin-top: -($height/2); transform: translateX(-50%); } } /*flexbox方法*/ @mixin center-children { display: flex; justify-content: center; align-items: center; }
http://codepen.io/zplus/pen/p...
再談等高列布局、水平垂直居中與置頂頁腳
八種創建等高列布局
CSS居中完整指南
使用Sass制作居中效果
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115482.html
摘要:布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內塊級元素水平居中的第一種方法該方法需作用在父子結構中為父級設置屬性為子級設置屬性注意的問題屬性是設置文本內容對齊方式的 布局 描述 表示對頁面中的顯示效果進行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內塊級元素(text-a...
摘要:布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內塊級元素水平居中的第一種方法該方法需作用在父子結構中為父級設置屬性為子級設置屬性注意的問題屬性是設置文本內容對齊方式的 布局 描述 表示對頁面中的顯示效果進行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內塊級元素(text-a...
CSS-Layout 旨在打造詳盡的前端布局代碼學習庫(自從用了框架開發,CSS生疏了不少,所以開這個庫練練手)SF不能正確解析含有中文的網址,所以某些預覽鏈接無法跳轉,請訪問我的博客閱讀此文 常見定位方法 水平居中 子元素為行內元素還是塊狀元素,寬度一定還是寬度未定,采取的布局方案不同。 方案選擇基本思路:子元素為 行內元素:對父元素設置text-align:center; 定寬塊狀元素: 設...
閱讀 1460·2021-11-22 14:44
閱讀 2842·2021-11-16 11:44
閱讀 3205·2021-10-13 09:40
閱讀 1979·2021-10-08 10:04
閱讀 2363·2021-09-24 10:28
閱讀 2909·2021-09-06 15:02
閱讀 2956·2019-08-30 15:52
閱讀 2392·2019-08-30 13:20