css
Stackll
爱技术,爱生活。
展开
-
magin,padding百分比。定位top,left百分比总结
1、margin-top,bottom,left,right 百分比,都是相对的是父元素的宽度。假设父元素的宽1000px,给子元素设置margin-top: 10%, 就是 1000px * 10% = 100px。当然padding四个值也是相对于父元素的宽度进行计算的。2、定位的元素,边偏移百分比left,right百分比相对于的是带有定位的父级元素的宽度。top,bottom百分...原创 2018-10-11 09:21:11 · 834 阅读 · 1 评论 -
css3实现加载小动画
HTML:<div class="box"></div>CSS:body { background-color: #59488b; } .box { position: relative; margin-top: 100px; margi...原创 2018-11-01 17:37:09 · 550 阅读 · 0 评论 -
文字垂直居中
1、单行文字水平垂直居中,text-align:center,line-height=height。如果没有高,父元素设置上下padding。2、多行文字垂直居中,父元素有高度:设置父元素display: table,子元素display: table-cell,vertical-align: middle。父元素没高度,同上,设置上下padding。...原创 2018-11-09 10:51:41 · 118 阅读 · 0 评论 -
box-shadow妙用
1、模拟多边框值得注意的是,阴影并不占有实际位置,所以显示如图,但是可以通过margin达到想要的效果原创 2018-11-09 14:04:51 · 116 阅读 · 0 评论 -
box-shadow实现云雨图
还是老规矩,先上效果图。猜猜用了几个div,其实只写了一个。样式: <style> body { background-color: #333; } .cloud { position: relative; width: 100px; ...原创 2018-11-09 14:33:03 · 1328 阅读 · 0 评论 -
filter:drop-shadow实际运用
参考了张鑫旭大神的博客,然后自己写了demo。直接上效果图:filter: drop-shadow:box-shadow:细微差别就是,box-shadow算阴影的时候,并没有将伪元素生成的三角算在元素内,而filter:drop-shadow是将伪元素囊括在内的。下面是代码:结构:&lt;div class="box"&gt;drop-shadow&lt;/div&gt;原创 2018-11-09 16:16:32 · 1530 阅读 · 0 评论 -
清除浮动4种方法
为什么要清除浮动?浮动的特性是使元素拖标,不能撑开父盒子,会对页面布局产生影响,我们所说的清除浮动,并非真的把float去掉,而是清除浮动的元素给页面带来的影响,当父元素有了高度,后面的布局就不会出错。1、overflow: hidden此方法固然可以清除浮动,但是有一个缺陷,就是oveflow: hidden原意是溢出隐藏,所以,溢出的元素是看不见的。2、额外标签法.clear { cl...原创 2018-11-12 17:19:22 · 239 阅读 · 0 评论 -
nth-child()与nth-of-type()区别
首先需要注意的是,css中根本没有 nth-of-child()的写法,本人有时会写成这种形式,导致效果出不来。其次,不管是nth-child(n),还是nth-of-type(n),两者()中的n都是从数字1开始计算的,切记!下面说说区别: nth在英文中是 ‘第几’ 的意思,nth-child就是父元素的第几个孩子,这里边有两层含义,一:父元素的孩子是谁(也就是你想找谁,是div,还是h3...原创 2018-12-07 10:17:15 · 320 阅读 · 0 评论