10年码农

2020年6月6日

摘要：以前前端IE6时代做按钮，图标背景图用gif, png，后来主流png, 现在各种流体结构，高分屏的需求， svg大行其道，无论是体积还是灵活性还是品质都远胜png。之前自己也总结了一下使用svg的各种方法吧： 1.直接使用<img> + .svg 文件，这种跟使用png没区别，不能改变阅读全文

posted @ 2020-06-06 14:58 10年码农阅读(706) 评论(0) 推荐(0) 编辑

加深理解BFC

摘要： 1、相关定义 1.1 Formatting context Formatting context是W3C CSS2.1规定中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素如何定位，以及和其他元素的关系和相互作用。最常见的Formatting context有Block f 阅读全文

posted @ 2020-06-06 13:11 10年码农阅读(113) 评论(0) 推荐(0) 编辑

前端学习资源

摘要：【掘金日报】第四期使用Sublime？怎么能不知道这些 Sublime 插件合集！掘金日报主打分享优质深度技术内容，技术内容分：前端、后端、Android、iOS、产品设计、工具资源和一些有趣的东西。前端深度剖析：如何实现一个 Virtual DOM 算法本文会在教你怎么用 300~400 阅读全文

posted @ 2020-06-06 11:57 10年码农阅读(134) 评论(0) 推荐(0) 编辑

2020年6月5日

搞定css三栏布局（六种方法）

摘要：谈到布局，首先就要想到定位，当别人问我，css的position定位有哪些取值，分别表示什么意思？呃.....抓头.gif，是时候回归本质，看定义了。 1. 定位 1.1 position position有六个属性值：static、relative、absolute、fixed、sticky和in 阅读全文

posted @ 2020-06-05 20:45 10年码农阅读(298) 评论(0) 推荐(0) 编辑

CSS—总结常用垂直居中方法

摘要： CSS—总结常用垂直居中方法 1、text-align与line-hight方法实现居中这是比较常用的方法。通过line-hight来设置行间距是实现垂直居中的关键 .wrap{ width: 500px; heidth: 200px; line-height:200px; background: 阅读全文

posted @ 2020-06-05 20:04 10年码农阅读(455) 评论(0) 推荐(0) 编辑

三种方式实现圣杯布局

摘要：圣杯布局的三种实现圣杯布局是一种很常见的css布局。他要求：上部和下部各自占领屏幕所有宽度。上下部之间的部分是一个三栏布局。三栏布局两侧宽度不变，中间部分自动填充整个区域。中间部分的高度是三栏中最高的区域的高度。本文会用三种方法来实现圣杯布局，分别是浮动，flexbox以及css gri 阅读全文

posted @ 2020-06-05 19:06 10年码农阅读(914) 评论(0) 推荐(0) 编辑

BOOSTRAP 3.0 网格(GRID)工作原理

摘要： BOOTSTRAP CSS 网格是实现响应式页面设计的利器，但至于它的工作原理，大多数时候对开发人员应该是一个黑盒。很少有人想知道它背后是如何工作的。直到你自已设计的页面无法满足一个复杂的需求，或者设计出来的页面显示怎么也达不到你的预期。你真的会像丈二和尚摸不着头脑。直到我看到了一篇国外开发人员写的阅读全文

posted @ 2020-06-05 18:17 10年码农阅读(279) 评论(0) 推荐(0) 编辑

好的 CSS 命名规范可以节约 Debug 时间

摘要：简评：Debug CSS 是一种很耗时的操作，如果有良好的命名规范可以节约很多的 Debug 时间。使用连字符（'-'）分隔字符串你可能习惯了在 Javascript 中使用小驼峰的命名方式： var redBox = document.getElementById（'...'）但是在 CSS 阅读全文

posted @ 2020-06-05 17:32 10年码农阅读(147) 评论(0) 推荐(0) 编辑

CSS文本省略显示

摘要：当页面上有过多文字的时候，往往需要省略显示，CSS可以很方便的做到这点。单行文本省略显示 width: 68%; // 需要固定一个宽度 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行文本省略显示(适用于WebK 阅读全文

posted @ 2020-06-05 16:53 10年码农阅读(419) 评论(0) 推荐(0) 编辑

20180224-css选择器的权重

摘要： css选择器的权重 1第一种情况：样式表中只有单一样式：即内联>id>class>元素 #id{} .class{} p{} 2第二种情况：组合选择器从左往右逐个比较，按a,b,c,d 进行比较越大权重越高。权限值生成方法按权重由高到低书写,不按选择器的顺序写 eg: /*bbc * 阅读全文

posted @ 2020-06-05 15:58 10年码农阅读(95) 评论(0) 推荐(0) 编辑

公告