使用CSS复位

CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法:·

* {
box-sizing: border-box;
margin: ;
padding: ;
}

现在元素的 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: %;
margin: ;
} 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: %;
}

本文来自:https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN#table-of-contents

推荐文章

CSS高级技巧的更多相关文章

  1. CSS 高级技巧汇总

    在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...

  2. 12 个 CSS 高级技巧汇总

    下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使 ...

  3. 20 个 CSS 高级技巧汇总

    原文:https://segmentfault.com/a/1190000003936841 使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. ...

  4. 好程序员web前端分享12个CSS高级技巧汇总

    好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...

  5. 006:CSS高级技巧

    目录 前言 理论 CSS高级技巧 一:元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow. 他们的主要目的 ...

  6. 定位方式 及CSS高级技巧

    定位 background-position 背景位置 浮动,在一个浮字上面,我们的定位,在一个位上.CSS离不开定位,特别是后面的JS特效,天天和定位打交道. 为什么要使用定位? 元素的定位属性 元 ...

  7. 12 个CSS 高级技巧汇总[转载]

    使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 ma ...

  8. 12个CSS高级技巧汇总

    1.使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px ...

  9. 12个css高级技巧.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 【css技能提升】css高级技巧

    本文是一个帮你提升 CSS 技巧的收藏集. 使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格.您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法: * ...

随机推荐

  1. “玲珑杯”ACM比赛 Round #12 (D) 【矩阵快速幂的时间优化】

    //首先,感谢Q巨 题目链接 定义状态向量b[6] b[0]:三面临红色的蓝色三角形个数 b[1]:两面临红色且一面临空的蓝色三角形个数 b[2]:一面临红色且两面临空的蓝色三角形个数 b[3]:三面 ...

  2. 51nod_1181:质数中的质数

    题目链接 #include<bits/stdc++.h> using namespace std; typedef long long LL; const LL N=1e6; //vect ...

  3. 安卓平台使用pocketSphinx离线语音识别

    版权声明:本文为elecdog原创文章,可以转载,但必须在明确位置注明出处!谢谢合作. 关于语音识别,国内已经有比较好的公司推出相关的服务了,比如百度免费的离在线融合语音识别以及讯飞收费的在线和离线语 ...

  4. 【SqlServer系列】集合运算

    1   概述 已发布[SqlServer系列]文章如下: [SqlServer系列]SQLSERVER安装教程 [SqlServer系列]数据库三大范式 [SqlServer系列]表单查询 [SqlS ...

  5. 浅谈js中如何动态添加表头/表列/表格内容

    我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...

  6. NYOJ--927--dfs--The partial sum problem

    /* Name: NYOJ--927--The partial sum problem Author: shen_渊 Date: 15/04/17 19:41 Description: DFS,和 N ...

  7. java大数判断相等

    java大数判断相等: 1.equals()方法2.compareTo()方法区别:2.00与2.0 equals()方法判断不等,compareTo()方法判断相等,科学的说法可以看java api ...

  8. POJ-1182 食物链(并查集)

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 75814   Accepted: 22528 Description ...

  9. sshpass做秘钥分发,ansible做自动化运维工具

    最近公司机器的增多,顺便还要上报表系统,考虑到服务器越来越多,手工的管理显得越来的越吃力,所以打算推进公司自动化运维工具的使用. 推进的过程中,一步一个坑踩过来的.由于公司之前未运用过自动化运维工具, ...

  10. Ubuntu 14.04.4 下 scp 远程拷贝提示:Permission denied, please try again. 的解决办法

    我在 s0 主机上远程拷贝 /etc/hosts 文件到 s1 主机上,出现下面的错误提示: qiao@s0:~$ scp /etc/hosts root@s2:/etc/root@s2's pass ...