CSS高級技巧
阿新 • • 發佈:2017-08-29
external bsp ext flex 添加 clas per 樣式 ble 繼承
為
使用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高級技巧