1、阴影：box-shadow:0 5px 20px rgba(0,0,0,.1);


2、css实现滚动进度条效果：

body {

            position: relative;

            padding: 50px;

            font-size: 24px;

            line-height: 30px;

            background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);

            background-size: 100% calc(100% - 100vh + 5px);

            background-repeat: no-repeat;

            z-index:;

        }

        body::after {

            content: "";

            position: fixed;

            top: 5px;

            left:;

            bottom:;

            right:;

            background: #fff;

            z-index: -1;

        }

3、//转换（伸缩）

transform：scale（1.08）；

//过渡效果

transtion：all .3s ease；

4、三角形气泡弹窗

 <div class="send">

  <div class="arrow"></div>

 </div>

.send {

position: relative;

width: 150px;

height: 35px;

background: #000000;

border-radius: 5px;

/* 圆角 */

margin: 30px auto 0;

}

.send .arrow {

position: absolute;

top: 8px;

left: -16px;

/* 圆角的位置需要细心调试哦 */

width:;

height:;

font-size:;

border: solid 8px;

border-color: transparent #000000 transparent transparent;

}




5、几种实现div水平垂直居中的方法：




html:

<body>

        <div class="wp">

            <div class="box size">123123</div>

        </div>

    </body>

css:

/* 公共代码 */

  .wp {border: 1px solid red; width: 300px; height: 300px; }

  .box { background: green; }

  .box.size { width: 100px;height: 100px;}

/* 公共代码 */


/* 1、定位代码 */
     .wp {position: relative;}
     .box { position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }




/* 2、定位代码 */ .wp { position: relative; } .box { position: absolute;; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }




缺点:需要确定子元素宽高




/*3、 定位代码 */ .wp {position: relative;}.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}


flex 不需要确定子元素宽高


/*4、 定位代码 */






<div class="wp">

    <div class="box">123123</div>

</div>


.wp {

    display: flex;

    justify-content: center;

    align-items: center;

}






 


												


											
41、css总结的更多相关文章
	

    
						
  1. day 41 css固定位置 以及小米商城项目
		
    .如何让一个绝对定位的盒子居中 left:%; margin-left:- 宽度的一半 .固定定位 position: fixed; ()脱标 参考点:浏览器的左上角 作用:固定导航栏 返回顶部 小广 ...
    
		
    2. 
						
  2. 详解纯css实现瀑布流（multi-column多列及flex布局）
		
    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
    
		
    3. 
						
  3. js和css兼容问题
		
    (一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]>  <script type="text/javascript" s ...
    
		
    4. 
						
  4. 【转】Web前端浏览器兼容初探
		
    原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...
    
		
    5. 
						
  5. Web前端浏览器兼容初探
		
    浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...
    
		
    6. 
						
  6. iOS模拟器分辨率的问题(转载)
		
    转载地址:http://justsee.iteye.com/blog/2123545   不积跬步 无以至千里 不积小流 无以成江海   博客 微博 相册 收藏 留言 关于我     ios8/sdk ...
    
		
    7. 
						
  7. web前端-html学习笔记
		
    学习html最重要的是坚持.细心.多动手.慕课网<HTML+CSS基础课程>的笔记. 1.<h1>网站标题</h1> 如:<h1>腾讯网</h1& ...
    
		
    8. 
						
  8. 最新java学习路线：含阶段性java视频教程完整版
		
    最新java学习路线:带阶段性java视频教程版本 第一阶段:Java基础 学习目标: 掌握基本语法.面向对象.常用类.正则.集合.Io流.多线程.Nio.网络编程.JDK新特性.函数式编程 知识点细 ...
    
		
    9. 
						
  9. Sass进阶之路,之一(基础篇)
		
    Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通 ...
    
		
    10. 
						
  10. [转]Web前端浏览器兼容
		
    转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Python 文件读写操作实例详解
			
    Python提供了必要的函数和方法进行默认情况下的文件基本操作.你可以用file对象做大部分的文件操作 一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前 ...
    
			
    2. 
						
  2. （转）Qt中文手册 之 QApplication
			
    QApplication管理GUI程序的控制流和主要设置. QApplication包含由窗口系统和其他来源处理过和发送过的主事件循环.它也处理应用程序的初始化和收尾工作,并提供对话管理.QAppli ...
    
			
    3. 
						
  3. 回溯法 | 旅行商问题（TSP问题）
			
    学习链接: 回溯法解旅行商问题(TSP).贪心算法:旅行商问题(TSP) 今天早上做了无数个梦,然后被紧紧地吸附在床上.挣扎一番后爬起来,已经是9点了.然后我开始研究旅行商问题. 在一个无向图中找到一 ...
    
			
    4. 
						
  4. matplotlib折线图
			
    绘制折线图:参考https://baijiahao.baidu.com/s?id=1608586625622704613           (3)近10年GDP变化的曲线图,及三次产业GDP变化的曲 ...
    
			
    5. 
						
  5. 第02组 Alpha冲刺（3/6）
			
    队名:無駄無駄 组长博客 作业博客 组员情况 张越洋 过去两天完成了哪些任务 摸鱼 提交记录(全组共用) 接下来的计划 沟通前后端成员,监督.提醒他们尽快完成各自的进度 学习如何评估代码质量 准备Al ...
    
			
    6. 
						
  6. 如何保证redis数据都是热点数据
			
    mySQL里有2000w数据,redis中只存20w的数据,如何保证redis中的数据都是热点数据? 1.限定 Redis 占用的内存,Redis 会根据自身数据淘汰策略,加载热数据到内存.所以,计算 ...
    
			
    7. 
						
  7. Java编程思想之十四 类型信息
			
    第十四章 类型信息 运行时类型信息使得你可以在程序运行时发现和使用类型信息 14.1 为什么需要RTTI 面向对象编程中基本的目的是:让代码只操作对基类的引用. 多态: import java.uti ...
    
			
    8. 
						
  8. 微信网页授权+获取用户基本信息+强制关注+JSSDK分享参数
			
    网页授权+获取用户基本信息+强制关注+JSSDK分享参数 //支付宝红包口令列表 public function view(){ $openid = ""; Vendor('Wei ...
    
			
    9. 
						
  9. awk简单应用
			
    偷懒之人,必定会想方设法的走捷径.如果你想结束多个ID进程,有的人可能会说pkill 和killall.但是有时候不知道为啥 不生效啊 = =! 知道的可以告诉我.刚好最近在学awk 下面命令调用系统 ...
    
			
    10. 
						
  10. pom.xml文件引入tools.jar
			
    最近做hbase开发时,引入相关jar包后,出现了以下错误 Missing artifact jdk.tools:jdk.tools:jar:1.8 绝对地址引用 <dependency> ...
    
			
    11.