2017年总结的前端文章——CSS高级技巧汇总
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高级技巧汇总的更多相关文章
- 2017年总结的前端文章——CSS盒模型详解
CSS的盒模型是CSS的基础,同时也是难点,这个问题经常在面试中会被问到,属于经典问题了.很多博客里讲得也很模糊不清,于是,我在这里重新整理一下. 可以认为每个html标签都是一个方块,然后这个方块又 ...
- CSS 高级技巧汇总
在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...
- 好程序员web前端分享12个CSS高级技巧汇总
好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...
- 12 个 CSS 高级技巧汇总
下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使 ...
- 20 个 CSS 高级技巧汇总
原文:https://segmentfault.com/a/1190000003936841 使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. ...
- 2017年总结的前端文章——一劳永逸的搞定 flex 布局
flex 基本概念 使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: ce ...
- 2017年总结的前端文章——border属性的多方位应用和实现自适应三角形
border属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标等 ...
- 12 个CSS 高级技巧汇总[转载]
使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 ma ...
- 12个CSS高级技巧汇总
1.使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px ...
随机推荐
- Free Pascal初次体验(有亮点哦)
感觉上Pascal语言写的非常有条理,和英语很像,应该是比较容易学,但是写起来真的是麻烦的要死,平时一行代码用C/C++可能就是几秒钟,用Pascal就要几分钟,Free Pascal感觉也不是很好用 ...
- 【Java学习笔记之二】java标识符命名规范
什么是标识符 就是程序员在定义java程序时,自定义的一些名字.标识符可以应用在类名.变量.函数名.包名上. 标识符必须遵循以下规则 标识符由26个英文字符大小写(a~zA~Z).数字(0~9).下划 ...
- 学习Spring必学的Java基础知识(1)----反射
引述要学习Spring框架的技术内幕,必须事先掌握一些基本的Java知识,正所谓"登高必自卑,涉远必自迩".以下几项Java知识和Spring框架息息相关,不可不学(我将通过一个系 ...
- c语言基础学习03
=============================================================================涉及到的知识点有:编码风格.c语言的数据类型. ...
- node.js和express创建服务器
创建web服务器 一. 使用node.js创建服务器. 使用express创建http服务. 监控服务器的变化. 二. 初始化配置文件:npm init -y 使用typescript编写,导入nod ...
- 配置web.xml文件用于配置tomcat
<Context path = "/myweb" docBase = "E:\workspace1\myweb\WebRoot" reloadable = ...
- 向ajaxform和ajaxgrid中添加数据
--ajaxform function add(){ $.request({ action:"add", success:onaddcomplete }); } function ...
- HDU 1233 还是畅通工程(模板——克鲁斯卡尔算法)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1233 题意描述: 输入n个城镇以及n*(n-1)/2条道路信息 计算并输出将所有城镇连通或者间接连通 ...
- IntelliJ IDEA 2017.3下载与安装
大约在2017年暑假的时候知道了IntelliJ IDEA,但是那个时候一心认为有Eclipse就足够用了,然而今天在网上冲浪的时候发现,IntelliJ IDEA是java语言开发的集成环境,这款开 ...
- python 模块中的 __init__.py __main__.py
python中文件夹想作为一个模块被引用,则在文件夹内必须要包含 __init__.py 文件,即使此文件为空. 如果此模块想要运行则必须要包含 __main__.py 文件.接下来说下两个文件起到的 ...