標籤:between 利用 span 彈性 flex master item 不同的 文章
使用CSS複位
CSS複位可以在不同的瀏覽器上保持一致的樣式風格。您可以使用CSS reset 庫Normalize等,也可以使用一個更簡化的複位方法:·
* { box-sizing: border-box; margin: 0; padding: 0;}
現在元素的 margin 和 padding 已為0,box-sizing
可以管理您的CSS盒模型布局。
繼承
box-sizing
從 html
元素繼承 box-sizing
:
html { box-sizing: border-box;}*, *:before, *:after { box-sizing: inherit;}
為
body
元素添加行高
不必為每一個 <p>
,<h*>
元素逐一添加 line-height
,直接添加到 body
元素:·
body { line-height: 1.5;}
水平垂直置中任何元素
利用彈性盒子來實現
html, body { height: 100%; margin: 0;}body { display: -webkit-flex; display: flex; justify-content: center;/*水平置中*/ -webkit-align-items: center; /*垂直置中相容*/ align-items: center;/*垂直置中*/}
利用 Flexbox 去除多餘的外邊距
.list { display: flex; justify-content: space-between;}.list .person { flex-basis: 23%;}
本文來自:https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN#table-of-contents
推薦文章
- 20個很有用的CSS技巧
- CSS粘住固定底部的5種方法
- 移動端CSS平分等分布局延伸
CSS進階技巧