html結構:.wrap>.container>.sidebar+.main
marginLeft,marginRight
兩邊都加上跟borderWidth
相等的負值,能夠實現邊框效果javascript
/*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...css
.main { width: 100%; border-right: 220px solid #f00; margin-right: -220px; } .sidebar { width: 220px; background: #f00; }
http://codepen.io/zplus/pen/X...html
padding,margin
值要夠大
html結構:.container>.left+.main+.right
java
.container { overflow: hidden; } .column { margin-bottom: -99999px; padding-bottom: 99999px; }
http://codepen.io/zplus/pen/w...瀏覽器
html結構:.wrap>.container>.main+.left+.right
sass
.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...ide
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...flex
html結構:.table>.table-row>.table-cell+.table-cell+.table-cell
ui
.table { display: table; &-row { display: table-row; } &-cell { display: table-cell; width: 33%; } }
http://codepen.io/zplus/pen/b...
body { display: flex; align-items: center; justify-content: center; width: 100%;/*firefox下須要*/ }
http://codepen.io/zplus/pen/m...
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...
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...
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...
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...
http://codepen.io/zplus/pen/O...
在垂直居中的元素上添加僞元素,設置僞元素的高==父級容器的高,而後爲文本添加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...
@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...