随笔分类 -  CSS

摘要：1 *{ 2 margin:0; 3 padding:0; 4 } 5 html,body{ 6 height:100%; 7 } 8 .wrap{ 9 display:-webkit-box; 10 display:-webkit-flex; 11 display:-ms-flexbox; 12 display:flex; 13 -webkit-box-orient:vertical; 14 - 阅读全文

摘要：利用padding撑开盒子大小，padding-bottom撑开子元素的高度，子元素宽度与高度成比例，这样就可以自适应了 阅读全文

摘要：1 加载动画... 2 3 4 5 加载动画... 6 7 8 87 88 89 90 阅读全文

摘要：项目中遇到下图这种样式，刚开始想切图解决 后来想到更好的解决办法，代码如下： HTML: css: 最外层容器使用相对定位，子元素使用绝对定位，再调整四个角的小div的位置，就达到上面的图例的效果了。 阅读全文

摘要：CSS 小技巧 总结的网络上的资源，以备自己后续参考。。。 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等 阅读全文

摘要：1、复杂选择器2、内容生成3、多列4、CSS Hack(浏览器兼容性) 1、复杂选择器 1、兄弟选择器 1、特点： 1、通过位置关系来匹配元素(平级) 2、只能向后找，不能向前找 2、兄弟选择器-相邻兄弟选择器 1、什么是相邻兄弟 紧紧挨在一起的元素，称之为相邻兄弟 <div id="d1"></d 阅读全文

摘要：用CSS绘制三角形箭头。使用纯CSS，你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头！ CSS代码: 绘制这些三角形的关键在于，你要让箭头所指方向的两个侧边有很粗的边框。而背向箭头方向的一边也是同样粗的边框，而这条边的颜色就是你的三角形的颜色。边框越粗，三角形越大。用这种方法你可以绘制出 阅读全文