css
文章平均质量分 94
zzh1918
向上生长
展开
-
CSS布局十八般武艺都在这里了
布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单列布局、多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小伙伴带来一些帮助。目录常用居中方法水平居中垂直居中单列布局二列&三列布局float+marginposition+margin圣杯布转载 2017-03-24 12:54:56 · 294 阅读 · 0 评论 -
纯css实现鼠标移动方向遮罩效果
在codepen上看到一款css效果,很不错 根据鼠标进入框的方向的不同,遮罩进入的方向也不同。原创 2018-08-07 20:18:51 · 2627 阅读 · 0 评论 -
关于网页中的动画
发原创 2018-07-14 20:57:26 · 1233 阅读 · 0 评论 -
css模块化
自己在用react时,css全局作用一直困扰着我。网上看到一篇关于css的文章很不错 简单易懂的CSS Modules转载 2018-07-19 14:53:09 · 606 阅读 · 0 评论 -
移动web开发之视口viewport
21321转载 2018-06-14 12:07:50 · 158 阅读 · 0 评论 -
CSS3的transform属性(二)
前面介绍了基本的变形方式(旋转,移动,缩放,倾斜)。现在来介绍和这些变形方式相关联的属性。transform-origin每个元素都有一个形变中心点。元素的旋转缩放等形边都是基于形变中心点变化的。形变中心点的坐标是以元素的左上角为坐标原点的。 上图backface-visibilitybackface-visibility此属性定义元素旋转到背面是否可见。 默认值为visi...原创 2018-03-10 12:19:39 · 328 阅读 · 0 评论 -
CSS3的transform属性
CSS3不仅提供了过渡和动画的效果,还提供了元素的一些变形方式。如旋转缩放倾斜移动等。 transform只能作用于块级元素,对于行内元素不起作用 图弄小一点旋转rotatetransform: rotate(30deg); //绕Z轴旋转30度transform: rotateX(30deg); //绕X轴旋转30度(3D旋转)transform: rotate...原创 2018-03-10 11:28:30 · 707 阅读 · 0 评论 -
CSS3的过渡和动画
过渡CSS3提供了一个过渡属性,让元素样式的改变有了动画的效果 transition属性有4个子属性transition-property: 需要过渡的属性(默认值为all)transition-duration: 过渡持续时间(默认值为0s)transition-timing-function: 过渡函数(默认值为ease函数)transition-delay: 过渡延迟时间(默认值为0s原创 2017-12-05 14:40:22 · 587 阅读 · 0 评论 -
伪类和伪元素的区别
伪类和伪元素的区别伪类有 :active、:focus 、:hover、:link、 :visited、:first-child 、:lang 伪元素有 :first-letter、:first-line、:before、:after存在的意义: 伪类和伪元素存在的意义是为了能找到那些不能被常规CSS选择器获取到的信息和不存在于DOM树中的节点。伪类:伪类一开始单单只是用来表示一些元原创 2017-07-01 15:22:17 · 342 阅读 · 0 评论 -
CSS中的重点
CSS中的重点一、CSS三大特性1.1 继承性给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性。 并不是所有的属性都可以继承,以color/font-/text-/line/list-开头的属性可以继承。(text-decoration不可继承)继承性中的特殊性 - a标签的文字颜色是不能继承的 - h标签的文字大小是不能继承的合理使用继承可以减少冗余的CSS代码 1.2原创 2017-06-30 14:39:01 · 523 阅读 · 0 评论 -
css清除浮动
CSS清除浮动当我们需要水平布局时,首先定义一个父框,然后在父框中子元素浮动进行水平布局。浮动带来的影响: 1.若父框不设置高度,浮动元素是不会撑起父框的。 2.浮动元素会影响后面正常流布局的元素。后面的元素在布局时会假装浮动元素不存在一样。所以正常布局的框会跑到浮动元素的位置上,然后会被浮动元素遮挡。 所以要清除浮动带来的影响直接给包含浮动元素的父框设置高度,这原创 2017-06-30 22:13:17 · 301 阅读 · 0 评论 -
应不应该使用inline-block代替float ?
CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗?浮动通常表现正常,但有时候搞起来会很纠结。特别是处理内部容器中的浮动,比如对一排图片使用浮动后对齐出现问题。Inline-block是我们的另一种选择。使用这种属性可以模拟部分浮动的特征,而不需要处理一些浮动带来的问题。Inline-blo转载 2017-06-30 15:02:39 · 910 阅读 · 1 评论 -
如何用纯css使div保存等比例缩放
当一个div盒子的宽度为百分比时,如何使盒子按等比例缩放?我开始的想法是获取盒子宽度,然后将盒子宽度按比例计算得到高度,这样盒子就可以等比例缩放了。但是遇到一个问题,盒子宽度为百分比,我们不能直接获取到盒子宽度,如果用js去获取盒子宽度又太麻烦,最后发现了css的padding属性。padding属性的百分比都是基于父元素的width值。/* 基于父元素的width */padding...原创 2019-05-27 11:49:53 · 9627 阅读 · 0 评论