css3学习
关注
分享
扫一扫
漫游者码农
实测有用干货，拒接浪费时间精力
展开
-
带你彻底了解display:inline-block和box-sizing:border-box
本文写作的目标是对css的盒模型进行科普性阐述，也是自己学习css这么长时间的关于盒模型的一个积累。当然，这篇文章还会涉及到讨论盒模型时最经常遇到的两个问题。最后将会给出一些关于css3中的box-sizing属性的说明和用法。重要的事情说三遍：developer.mozilla.org是一个学习的好网站，一定要重视最基础的东西developer.mozilla.org是一个学习的好网...原创 2019-11-24 22:55:16 · 1054 阅读 · 0 评论 -
预加载动画效果实现，css3总结，整理，附上svg用法及stroke-dasharray和stroke-dashoffset理解（9）
需要用到animation知识，参考博主之前博文还有svg基础知识，参考后文<div class="preloader"> <svg> <!-- <circle> SVG 元素是一个SVG的基本形状，x，y轴坐标，半径，。--> <circle class="path" cx="50" cy="50...原创 2019-08-15 13:10:33 · 1639 阅读 · 0 评论 -
关于登录页面的css样式总结，包括文字，输入框样式的一些基础美化（8）
有图有真相功能介绍：第一：具有相当的适应性，平板，移动端，pc端第二：背景加格子，还算漂亮，第三：登录，滑入时呈现动画效果总结：第一：输入框，一般去掉border:none;原装相当丑，尤其是给予圆角，看到更加明显，其次针对需要设置outline:none；选中时的状态，适当的padding和margin,看起来舒适第二：针对文字，调整间距，大小，粗细，位置，...原创 2019-08-14 13:10:44 · 5147 阅读 · 0 评论 -
仿某僵的高大上的一个产品幻灯片效果css3综合练习，总结（3）
还是要多学习，多借鉴，孰能生巧，有图为证主要用到css知识：:after和:before,transition和transform实践出真知，研究后收获不少，比如布局和样式分开，容器负责定位，布局，将内容放在其中，样式再单独定义，另外针对相同需求的元素，单独抽离一个类，js逗号链接 形成语句块，可读性增强<!DOCTYPE html><htm...原创 2019-07-28 17:07:49 · 254 阅读 · 0 评论 -
transform-origin用法归纳，总结（7）
单值语法： 该值必须是一个<length>，一个<percentage>，或关键字之一left，center，right，top，和bottom。 双值语法： 一个值必须是一个<length>，一个<percentage>，或关键字之一left，center和right。 其他值必须是一个<length>，一个<...原创 2019-08-01 17:39:09 · 1116 阅读 · 0 评论 -
垂直对齐：您需要知道的所有内容css3(6)
这是转载，先保留着，遇到一个非常奇怪的问题， <a style="display: block;width: 300px;height: 100px;background: #1B6D85;"> <div style="width:50px;height:50px;display: inline-block;backgroun...原创 2019-08-01 16:02:39 · 325 阅读 · 0 评论 -
css3动画animation最权威，最快速的上手总结（5）
最近接到一个任务，开发新的后台管理页面，搜索一些模板，研究布局，样式，写法，无可避免涉及到animation,有图为证一开始认为是圆点扩散提示效果，是用脚本，或是插件来完成的，其实仅仅样式就可以了，这就引出今天的主题，animation最简单写法：html:<div class='div1'></div>.div1{width:100px;heigh...原创 2019-08-01 11:50:58 · 473 阅读 · 0 评论 -
css3学习：opacity会形成隐式堆叠，什么意思？z-index无效，为什么？堆叠上下文（2）
问题抛出：遇到过父元素给opacity：.1，然后子元素似乎也继承了这个透明度为.1,然而给子元素opacity:1十分抱歉，没有任何效果，到底是为什么？另外一个问题是明明有元素z-index值是小于某元素z-index，但是仍然不在最上层，发生问题的根源在于，我们对透明度，和z-index原理，理解的并不深刻，或是太片面理解。关于z-index理解找出沿Z轴的堆叠元素的渲染顺序的简单...原创 2019-07-25 17:50:04 · 588 阅读 · 0 评论 -
各大网站字体样式设置解读，css（4）
关于字体设置，之前一直没有认真学习过，最近查看各大官网的字体设置，开始学习，以某僵为例，font-family: "Open Sans","PingFang SC","Microsoft YaHei","Helvetica Neue","Hiragino Sans GB","WenQuanYi Micro Hei",Arial,sans-serif;是不是一脸懵逼的感觉呢？那么看了...转载 2019-07-30 10:19:37 · 3868 阅读 · 0 评论 -
css3中一些样式，最标准最权威最专业的兼容通用写法，总结积累（0）
背景：一直以来写样式，都比较随意，在小项目，自然没有问题，但在严格条件下呢？扪心自问，不敢拍着胸脯保证，就像万丈高楼，一旦项目大，复杂，多少都担心出问题，因此还是得有个尽可能标准的权威，专业写法，防范这些风险，尽可能让自己，让他人信服。第一部分：字体样式设置写法 body{ -webkit-font-smoothing: antialiased; font-fam...原创 2019-07-19 17:30:49 · 748 阅读 · 0 评论 -
css3弹性布局中的精髓flex属性深入理解，知识积累总结（1）
前言：近日在浩如烟海的海量百度信息中，看了很多难以找到出处的人的各种各样文章，一些靠谱权威的专业性网站，或是一些大佬的文章，但是呢，要么专业性，权威性很强，具有很强的说服力，不过理解起来相当费力，一些通俗易懂的呢，专业性，权威性又得不到保障，很难分辨孰优孰劣，但如此模棱两可，八面玲珑的话，啥也不干，只写写文章还可以，但是要编写真正的代码，可不行，你总得需要一个不是标准的标准，来指导自己的编码规范吧...原创 2019-07-23 17:05:41 · 2094 阅读 · 0 评论 -
css3渐变用法（全网最全最好用的知识总结）
背景:深感自己做的页面，就是不太好看，看到太多网站做到非常漂亮，都用到过渡，等css3的知识，还有布局也用到flex弹性分配布局方式，即好看又考虑移动端， 除此之外，还有一个真正重要的理由，css样式里面完成各种，以前需要借助脚本，图片完成效果，减少对服务器的请求次数，总之，css3越来越像一门真正的语言，已经有类似变量的东西，感觉真到了非认真学不可的地步。第一部分：线性渐变线性...原创 2019-07-11 18:40:41 · 1591 阅读 · 0 评论