CSS高级技巧
使用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高级技巧的更多相关文章
- CSS 高级技巧汇总
在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...
- 12 个 CSS 高级技巧汇总
下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使 ...
- 20 个 CSS 高级技巧汇总
原文:https://segmentfault.com/a/1190000003936841 使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. ...
- 好程序员web前端分享12个CSS高级技巧汇总
好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...
- 006:CSS高级技巧
目录 前言 理论 CSS高级技巧 一:元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow. 他们的主要目的 ...
- 定位方式 及CSS高级技巧
定位 background-position 背景位置 浮动,在一个浮字上面,我们的定位,在一个位上.CSS离不开定位,特别是后面的JS特效,天天和定位打交道. 为什么要使用定位? 元素的定位属性 元 ...
- 12 个CSS 高级技巧汇总[转载]
使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 ma ...
- 12个CSS高级技巧汇总
1.使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px ...
- 12个css高级技巧.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【css技能提升】css高级技巧
本文是一个帮你提升 CSS 技巧的收藏集. 使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格.您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法: * ...
随机推荐
- “玲珑杯”ACM比赛 Round #12 (D) 【矩阵快速幂的时间优化】
//首先,感谢Q巨 题目链接 定义状态向量b[6] b[0]:三面临红色的蓝色三角形个数 b[1]:两面临红色且一面临空的蓝色三角形个数 b[2]:一面临红色且两面临空的蓝色三角形个数 b[3]:三面 ...
- 51nod_1181:质数中的质数
题目链接 #include<bits/stdc++.h> using namespace std; typedef long long LL; const LL N=1e6; //vect ...
- 安卓平台使用pocketSphinx离线语音识别
版权声明:本文为elecdog原创文章,可以转载,但必须在明确位置注明出处!谢谢合作. 关于语音识别,国内已经有比较好的公司推出相关的服务了,比如百度免费的离在线融合语音识别以及讯飞收费的在线和离线语 ...
- 【SqlServer系列】集合运算
1 概述 已发布[SqlServer系列]文章如下: [SqlServer系列]SQLSERVER安装教程 [SqlServer系列]数据库三大范式 [SqlServer系列]表单查询 [SqlS ...
- 浅谈js中如何动态添加表头/表列/表格内容
我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...
- 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 ...
- java大数判断相等
java大数判断相等: 1.equals()方法2.compareTo()方法区别:2.00与2.0 equals()方法判断不等,compareTo()方法判断相等,科学的说法可以看java api ...
- POJ-1182 食物链(并查集)
食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 75814 Accepted: 22528 Description ...
- sshpass做秘钥分发,ansible做自动化运维工具
最近公司机器的增多,顺便还要上报表系统,考虑到服务器越来越多,手工的管理显得越来的越吃力,所以打算推进公司自动化运维工具的使用. 推进的过程中,一步一个坑踩过来的.由于公司之前未运用过自动化运维工具, ...
- 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 ...