随笔分类 -  CSS相关

display:flex;多行多列布局学习
摘要：从以前的table布局到现在的div布局，再到未来的flex布局，CSS重构方面对展示行和适应性的要求越来越高； 首先来比较一下布局方式的更新意义： table布局： 优点：1、兼容性好，ie6、ie7或者什么稀奇古怪的浏览器，table布局可以用最小的代价兼容这些稀奇古怪的浏览器； 2、自适应性， 阅读全文
posted @ 2017-04-25 09:10 milo_蓝色大飞机 阅读(41616) 评论(0) 推荐(0)
关于多子级元素充满父级元素高度的布局方式
摘要：关于多子级元素充满父级元素高度的布局方式，听着有些绕口，上个图应该就能很清楚的理解这标题的意思了； 如图：左右分栏的情况下，有顶部和底部导航，且在屏幕高度不定的时候（移动端，多设备适配），如何不适用js来让内容区自适应扩展，填满父级剩下的高度呢？ 首先分两种情况： 一、顶部和底部导航为固定高度时，这 阅读全文
posted @ 2017-04-23 18:25 milo_蓝色大飞机 阅读(4454) 评论(0) 推荐(1)
checkbox与文字对齐方式（同样可用于radio单选框）
摘要：checkbox 在chrome 和 firefox中 间距是由margin撑开， IE中则是由padding，并且无法设置边框； 主要参考大神的博客，http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%8D%E9%80%89%E6%A1%86%E6 阅读全文
posted @ 2017-04-05 09:50 milo_蓝色大飞机 阅读(11457) 评论(0) 推荐(0)
使用CSS实现自定义input[checkbox]样式
摘要：思路：使用label上的for熟悉，与checkbox上的id相对应来达到点击选中效果，在使用伪元素，或者其他元素，定位至checkbox上方，替代checkbox，并且隐藏checkbox，使用CSS3选择器：checked + 毗邻选择器，选中后给伪元素，或者其他元素添加选中样式； 兼容： ：a 阅读全文
posted @ 2017-04-05 09:44 milo_蓝色大飞机 阅读(10060) 评论(0) 推荐(0)
CSS部分属性的深入学习
摘要：先上个张鑫旭大神的政治课，来个一棒打醒(手动滑稽)； 说说CSS学习中的瓶颈； 虽然自己水平不高，但是对于重构这方面工作一直不怎么喜欢，可能觉得比较没有新意，但是看了大神文章突然有点一棍打醒的感觉，突然觉得自己的CSS水平好烂。。。。 一、vertical-align ①、触发元素：行元素、设置有d 阅读全文
posted @ 2017-02-14 11:43 milo_蓝色大飞机 阅读(278) 评论(0) 推荐(0)
transform使用导致元素内字体出现模糊的坑~~~
摘要：项目中遇到的，关于居中弹出层的字体模糊问题。 先来个对比图： 清晰版： 模糊版： 这个是一个不定宽高的弹出框，居中的方式如下代码： 使用了固定定位 和 transform: translate来居中，但是由于居中的时候显示的弹框视觉效果上会有点偏下，所以调整了Y轴上的移动数字，-65%，也就是因为这 阅读全文
posted @ 2017-02-04 10:20 milo_蓝色大飞机 阅读(29089) 评论(0) 推荐(5)