随笔分类 -  CSS

css 巧用 margin/padding 的百分比值实现高度自适应（多用于占位，避免闪烁）
摘要：一个基础却又容易混淆的 css 知识点 本文依赖于一个基础却又容易混淆的 css 知识点：当 margin/padding 取形式为百分比的值时，无论是 left/right，还是top/bottom，都是以父元素的width为参照物的！ 高度自适应占位 假设有这么个场景： 如上图所示，有这么一种用 阅读全文
posted @ 2016-10-03 15:58 小车厂 阅读(1333) 评论(0) 推荐(1)
css BFC
摘要：一、BFC是什么？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的 阅读全文
posted @ 2016-09-03 15:48 小车厂 阅读(203) 评论(0) 推荐(0)
css 清除浮动
摘要：虽然我几乎不用 float 布局，但是还是要了解的，工作了很有可能就会用到，所以，今天又看了一遍 “张鑫旭” 写得关于 float 布局的文章，记录一下清除浮动的几种方法，以后随时在此补充。 IE下清除浮动比较简单，使元素 haslayout就可以。如宽度值，高度值，绝对定位，zoom，浮动本身，都 阅读全文
posted @ 2016-09-02 17:16 小车厂 阅读(144) 评论(0) 推荐(0)
css hasLayout——IE浏览器css bug的一大罪恶根源
摘要：什么是hasLayout？hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子 阅读全文
posted @ 2016-08-30 17:32 小车厂 阅读(137) 评论(0) 推荐(0)
css hack
摘要：什么是CSS hack 由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。 常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。 CSS 阅读全文
posted @ 2016-08-30 17:29 小车厂 阅读(277) 评论(0) 推荐(0)
css 画三角形
摘要：CSS三角形绘制方法 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid r 阅读全文
posted @ 2016-08-22 09:51 小车厂 阅读(144) 评论(0) 推荐(0)
flex布局中 align-items 和 align-content的区别
摘要：【转载】flex布局中align-items 和align-content的区别 阅读全文
posted @ 2016-08-13 10:52 小车厂 阅读(792) 评论(0) 推荐(0)
css3动画
摘要：【转载】css3动画由浅入深总结 阅读全文
posted @ 2016-08-09 17:09 小车厂 阅读(89) 评论(0) 推荐(0)