随笔分类 - CSS
摘要：转载于： iconfont 在原有的图标中，增加新的图标 版权声明：本文为CSDN博主「紧握手中沙」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/DreamITEffort/article/details/84
阅读全文
摘要：如果父元素是flex布局，想让其中一个子元素居右显示，可用css设置样式实现。方式一： margin-left: auto; 方式二： flex: 1; text-align: right; 参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/m
阅读全文
摘要：网络上讲圣杯布局（双飞翼布局）的文章一搜一堆，比如以下： css布局之圣杯布局和双飞翼布局 但是讲原理的没几个。 我自己一开始没想通为什么为浮动元素设置 margin-left: -100% 后移动到了上一行。 直到我看到了下面的文章： 浅谈margin负值 但是我想记录下来的是为什么要这么复杂的去
阅读全文
摘要：转自： 如何制作图标字体（如何将svg转换为css可用的图标字体） 具体描述 在项目开发当中，我们常常遇到需要将获取到的svg转换为，css可用的图标字体，那么具体该如何进行操作呢 具体操作 登录icomoon 点击右上角登录旁边的icoMoon App 3. 点击左上角的import Icon导入
阅读全文
摘要：转载自：网页屏幕缩小到出现水平滚动条后，背景不能100%填充 不知大家遇到过这种问题没，一个层宽度设为100%，并设置背景图片，在浏览器中浏览，缩小窗口到滚动条出现，然后拖动滚动条到右侧，右侧的区域变成空白，再拖大窗口，又能占满窗口了，这到底是怎么回事，又该如何解决这个问题呢？ 下面用实例来分析，代
阅读全文
摘要：转载自： 无障碍设计标准中的对比度 一、什么是无障碍设计 WCAG 2.0（Web Content Accessibility Guideline，Web内容无障碍指南）定义了如何使残疾人士更方便地使用Web内容的方法，遵循这些方法，Web内容更易为广大残疾人士所接受，也可让普通用户更容易访问您的W
阅读全文
摘要：在webstorm配置的SASS，插入中文注释报错： cmd.exe /D /C call D:\ProgramFiles\Ruby24-x64\bin\sass.bat --no-cache --update love.scss:D:\2018Learning\MaterialLibrary\CS
阅读全文
摘要：转载自：CSS实现水平垂直居中的1010种方式 划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了 要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个github仓库，欢迎大家star
阅读全文
摘要：转载自：css3 calc()的用法 说明：calc（四则运算）；任何长度值都可以使用calc()函数进行计算；和平时的加减乘除优先顺序一样一样的； 特别注意：calc（）里面的运算符必须前后都留一个空格，不然浏览器识别不了，比如：calc(100% - 5px); 兼容性： HTML: <div
阅读全文
摘要：转载自：http://yunkus.com/difference-between-scss-sass/ 要想了解Scss 与 Sass 是什么以及他们的区别又在哪里，我们不过不先从他们各自的定义说起。 Sass是什么 Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着
阅读全文
摘要：转载自：父元素如何围住浮动子元素 当元素使用float属性，将脱离文档流，因此父元素便不会包围它。 1 <section> 2 <div class="左栏"> 3 我是左栏 4 我是左栏 5 我是左栏 6 我是左栏 7 </div> 8 <div class="右栏"> 9 我是右栏 10 </d
阅读全文
摘要：转载自： 阮一峰的网络日志 »SASS用法指南 学过CSS的人都知道，它不是一种编程语言。 你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。 很
阅读全文
摘要：参考：https://stackoverflow.com/questions/14943074/html5-input-colors-default-color?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich
阅读全文
摘要：转载自：http://www.5imoban.net/jiaocheng/CSS3_HTML5/2016/0714/1735.html html5之前，只要稍微特殊点的字体，都必须做成图片，以免客户端无法显示。而对于正文或者需要后台调用大量文字的地方，则无能为力。但是，html5推出了 @font-
阅读全文
摘要：转载自： http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单
阅读全文
摘要：转载自：http://www.zhangxinxu.com/wordpress/?p=3794 一、绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。 兼容性不错的主流用法是： .element { width: 600px; height: 400px;
阅读全文
摘要：转载自：https://www.w3cplus.com/css/elements-horizontally-center-with-css.html 居中效果在CSS中很是普通的效果，平时大家所看到的居中效果主要分为三大类：水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。
阅读全文
摘要：Flexbox，更优雅的布局 Flex 布局教程：语法篇 Flex 布局教程：实例篇 2009年，W3C提出了一种新的方案 Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
阅读全文
摘要：转载自：http://www.ruanyifeng.com/blog/2008/07/best_webpage_width_and_realization.html 1. 设计网页的时候，确定宽度是一件很苦恼的事。 以minifun.cn为例，根据Google Analytics的统计，半年多以来，
阅读全文
