随笔分类 -  CSS

css3动画与js动画的区别
摘要：css与 js动画 优缺点比较 我们经常面临一个抉择：到底使用JavaScript还是CSS动画，下面做一下对比 JS动画 缺点：(1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成 阅读全文
posted @ 2021-06-28 11:11 python界泥石流 阅读(107) 评论(0) 推荐(0)
三栏布局，中间自适应
摘要：1.浮动 <div class="left "></div><div class="right "></div><div class="center"></div> .left{ float: left; width: 300px; background: red; height: 100px; } 阅读全文
posted @ 2021-06-23 16:20 python界泥石流 阅读(61) 评论(0) 推荐(0)
flex 弹性盒子(灵活布局)详解
摘要：传统布局——基于盒子模型，依赖 display 属性、position属性、float属性。 它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 并且，传统布局代码冗长，出错率高，要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。 但是，Flex布局就就 阅读全文
posted @ 2021-06-22 18:21 python界泥石流 阅读(728) 评论(0) 推荐(0)
清除浮动的几种方式，各自的优缺点
摘要：问：清除浮动的几种方式，各自的优缺点 1.使用空标签清除浮动clear:both。 原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 优点：通俗易懂，容易掌握 缺点：会添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦 建议：不推荐使 阅读全文
posted @ 2021-06-21 14:44 python界泥石流 阅读(762) 评论(0) 推荐(0)
三栏布局技巧
摘要：映入眼帘的就是一个常见的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？比如我打开某东的首页： 下面围绕的这样的目的，即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终 阅读全文
posted @ 2021-05-20 13:59 python界泥石流 阅读(198) 评论(0) 推荐(0)
CSS子元素在父元素中水平垂直居中的几种方法
摘要：1. 水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效。 #div1{ width: 300px; height: 300px; border: 1px solid red; } #div1 p { width: 10 阅读全文
posted @ 2021-05-18 17:13 python界泥石流 阅读(995) 评论(0) 推荐(0)