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等,也可以使用一个更简化的复位方法: * ...
随机推荐
- .net 自动摘要等算法 HanLP.net
参考资料: http://www.hankcs.com/nlp/call-hanlp-in-csharp.html 目前自动摘要算法似乎没有.net 版本,而以java,python 居多 自动摘要算 ...
- CSS预编译与PostCSS以及Webpack构建CSS综合方案
CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...
- select默认选中项颜色为灰色,选择后变为黑色(js实现)
<script> var unSelected = "#999"; var selected = "#333"; $(function () { $ ...
- Reverse bits - 按位反转一个int型数字
Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represented in ...
- Android - 电池状态
为了解决电池图标的问题,顺带看了看电池信息的获取方法 :自己写了一个小栗子,来验证一下效果 电池的信息,一般都在BatteryManager里面,信息是用广播发出的.我们更新信息需要一个广播接收器 注 ...
- ES6正则表达式扩展
前面的话 正则表达式是javascript操作字符串的一个重要组成部分,但在以往的版本中并未有太多改变.然而,在ES6中,随着字符串操作的变更, ES6也对正则表达式进行了一些更新.本文将详细介绍ES ...
- linux执行sh报错:$’\r’: 未找到命令的解决
背景 执行.sh脚本时出现$'\r': 未找到命令, 原因 是因为命令直接从windows 复制过来导致的 解决 yum install dos2unix dos2unix **.sh 进行转换 再次 ...
- href设置action绝对路径和相对路径
绝对路径: 示例: <a href="<%=basePath %>account/list.action"></a> 注意:这里${basePa ...
- tensorflow bias_add应用
import tensorflow as tf a=tf.constant([[1,1],[2,2],[3,3]],dtype=tf.float32) b=tf.constant([1,-1],dty ...
- NLP —— 图模型(零):EM算法简述及简单示例(三硬币模型)
最近接触了pLSA模型,该模型需要使用期望最大化(Expectation Maximization)算法求解. 本文简述了以下内容: 为什么需要EM算法 EM算法的推导与流程 EM算法的收敛性定理 使 ...