Css学习总结
一杯甜酒
金融科技领域技术 & 云基础设施 & 云原生微服务 & 云原生时代标准交付 & PAAS 技术研发 & Kubernetes & 项目与技术管理
展开
-
Css学习总结(1)——20个很有用的CSS技巧
1. 黑白图像这段代码会让你的彩色照片显示为黑白照片,是不是很酷?img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter原创 2016-05-25 14:29:23 · 1998 阅读 · 0 评论 -
Css学习总结(2)——60个有用CSS代码片段
1、垂直对齐如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:.verticalcenter{position: relative;top: 50%;-webkit-transform: translateY(-50%);-o-transform: translateY(-50%);transform: tra原创 2016-08-19 09:18:45 · 2653 阅读 · 0 评论 -
Css学习总结(3)——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局
居中布局水平居中子元素于父元素水平居中且其(子元素与父元素)宽度均可变。inline-block + text-alignDemo.child {display: inline-block;}.parent {text-align: center;}原创 2016-11-21 09:55:46 · 1432 阅读 · 0 评论 -
Css学习总结(4)——CSS选择器总结
1:通用选择器* { margin:0; padding:0; }*选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法。*选择器也可以应用到子选择器中,例如下面的代码:#container * { border:1px solid black; }这样ID为container 的原创 2017-01-20 09:33:57 · 669 阅读 · 0 评论 -
Css学习总结(5)——CSS常见布局方式
一、使用BFC隐藏属性在对需要自适应的元素BFC化,可以实现两栏或三栏布局 使用BFC实现三栏布局时需要注意的是DOM的书写顺序问题。如果将aside2与article交换位置,那么aside2元素会被挤到article元素之下,无法实现三栏自适应布局。缺点:宽度小于aside宽度时,由于宽度不足的原因,三栏布局时会使元素出现掉下去的现象。二、float +原创 2017-10-07 22:06:09 · 1039 阅读 · 0 评论