1. 页面顶部阴影

body:before{
content: "";
position: fixed;
top:-10px;
left:;
width: 100%;
height: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index:;
}

2. 给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:

    body {

      line-height:;

    }

line-height:1; 的意思是 根据该元素本身的字体大小 设置行高 比如该元素字体是15px line-height:1; 的行高就是15px;

3. 所有一切都垂直居中

    html, body {

      height: 100%;

      margin:;

    }

    body {

      -webkit-align-items: center;  

      -ms-flex-align: center;  

      align-items: center;

      display: -webkit-flex;

      display: flex;

    }

看情况而定,不是很实用;

2017年总结的前端文章——CSS高级技巧汇总的更多相关文章

  1. 2017年总结的前端文章——CSS盒模型详解

    CSS的盒模型是CSS的基础,同时也是难点,这个问题经常在面试中会被问到,属于经典问题了.很多博客里讲得也很模糊不清,于是,我在这里重新整理一下. 可以认为每个html标签都是一个方块,然后这个方块又 ...

  2. CSS 高级技巧汇总

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

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

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

  4. 12 个 CSS 高级技巧汇总

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

  5. 20 个 CSS 高级技巧汇总

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

  6. 2017年总结的前端文章——一劳永逸的搞定 flex 布局

    flex 基本概念 使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: ce ...

  7. 2017年总结的前端文章——border属性的多方位应用和实现自适应三角形

    border属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标等 ...

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

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

  9. 12个CSS高级技巧汇总

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

随机推荐

  1. Codeforces 754A Lesha and array splitting(简单贪心)

    A. Lesha and array splitting time limit per test:2 seconds memory limit per test:256 megabytes input ...

  2. HDU5131-Song Jiang's rank list HDU5135-Little Zu Chongzhi's Triangles(大佬写的)

    Song Jiang's rank list Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/512000 K (Java ...

  3. c++(基数排序)

    基数排序是另外一种比较有特色的排序方式,它是怎么排序的呢?我们可以按照下面的一组数字做出说明:12. 104. 13. 7. 9 (1)按个位数排序是12.13.104.7.9 (2)再根据十位排序1 ...

  4. [国嵌攻略][071][Coredump故障分析]

    Core Dump定义 Core Dump又叫核心转存.当程序在运行过程中发生异常,Linux系统可以把程序出错时的内存内容存储在一个core文件中,这个过程叫Core Dump. Core Dump ...

  5. UE4 多线程(一)

    UE4中使用多线程的有两种方式,一种方式就是使用FRunnable和FRunnableThread,另一种方式是Task Graph System.Task Graph System有时会占用游戏线程 ...

  6. Python3 的函数(2)

    1.形参和实参 def MyFun(x): return x ** 3 y = 3 print(MyFun(y)) x为形参,y为实参. 2.函数文档 在函数内用单引号引起来的一段文字,在调用函数时不 ...

  7. Python 爬取美女图片,分目录多级存储

    最近有个需求:下载https://mm.meiji2.com/网站的图片. 所以简单研究了一下爬虫. 在此整理一下结果,一为自己记录,二给后人一些方向. 爬取结果如图:   整体研究周期 2-3 天, ...

  8. action之间传参为中文;type='redirect'和 type='redirectAction'主要区别

    摘录自:http://blog.csdn.net/lhi705/article/details/7446156 Struts2中action之间传参中文乱码的问题 解决方法一(已经验证,可以): 两个 ...

  9. eclipse导入包之后中文乱码

    windows ->preferences  ->workspace -> default ->GBK

  10. 或许你不知道的10条SQL技巧

    一.一些常见的SQL实践 (1)负向条件查询不能使用索引 select * from order where status!=0 and stauts!=1 not in/not exists都不是好 ...