随笔分类 - css
摘要：> 在 retina 屏中，设备像素比为 2(iPhone6/7/8) 或 3(iPhone6Plus/7Plus/8Plus)，1px 的边框看起来比真的 1px 更宽。 ## 1. 使用伪类加transform的方式 元素本身不定义边框，伪元素定义 1px 边框，并且根据根据设备像素比值设置缩放
阅读全文
摘要：在前端开发写CSS时，往往不能很好的把握格式和属性顺序，阅读起来不友好。CSScomb帮助我们解决了这个问题！ CSScomb(CSS梳理)是一个可以用来格式化和排序CSS属性的插件，官网地址http://csscomb.com/。 一、安装CSScomb 要使用CSScomb，需要先安装CSSco
阅读全文
摘要：在某些场景下，我们需要根据兄弟元素的总数来为它们设置样式。最常见的场景就是，当一个列表不断延长时，通过隐藏控件或压缩控件等方式来节省屏幕空间，以此提升用户体验。 为保证一屏内容能展示更多的内容，需要将多余的列表项隐藏。 二级导航菜单：当菜单项为 1 项时，宽度为 100%；当菜单项为 2 项时，每项
阅读全文
摘要：最近在工作中遇到了一些不常用的布局，很多使用 CSS table 属性，并结合 ::before，::after 伪元素完成了，使得 HTML 的结构相对更简单，更具有语义性。当 HTML 结构越清晰，越有规律时，便于阅读，循环套数据时也可以少很多的判断。 一、有下面这样一个设计，上面是标题，中间是
阅读全文
摘要：通过 CSS 来插入换行的需求在越来越多的场景中运用到，例如我们使用定义列表来呈现一行行的名值对，例如下面一段代码： 我期望达到下面的效果： 我依次做了下面的尝试： 1. 在每一个 <dd> 后面添加了一个 <br> ，让他们换行，可效果却是这样的： 查找资料我明白了，<dd> 本来是块级元素，并且
阅读全文
摘要：对复选框自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。 如果直接对复选框设置样式，那么这个伪类并不实用，因为没有多少样式能够对复选框起作用。不过，倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式。 很多时候，无论是为了表单元素统一，还是为
阅读全文
摘要：[attribute |= value] 与 [attribute ^= value] 的联系与区别： 一、联系： 1. 两个选择器的 attribute 属性值等于 value 时都可以匹配 2. 两个选择器的 attribute 属性值以 value 开头且后面都跟上"-"时都可以匹配 它们的结
阅读全文
摘要：15年自学了 less ，可是一直没用，就忘记了。后来抱着提高 css 开发速度的目的，又去学习了 less ，学完马上用，效果立竿见影，记得也牢了。刚开始学习前，我们总会问自己一个问题，学习它有什么用。就拿这个 less 来说，学习它有什么用，分明就有了 css 用来编写样式，我还要花时间来研究
阅读全文
摘要：这几天在面试，面试的题型繁多，问到的很多问题自己都不会。将面试中被问到频率较高的且容易忽视的问题总结一下： 1. 图片的格式 这个问题被问成图片的类型，我回答图片和背景图片。 图片的格式在前端一般会用到 gif, png, jpg。 gif 用于动态图 png 用于具有透明、阴影的图片 jpg 用于
阅读全文
摘要：css3的属性 transform(转换) 用途很广泛，功能也很强大，为了熟悉它的各种转换方式(平移 translate，旋转 rotate，扭曲 skew，放缩 scale)，我做了一些平常常用的一些简单的图标。 这些图标很多是通过三角形来拼贴起来的，所以我们需要知道怎么样画三角形。 1. 我们要
阅读全文
摘要：css的属性很多，每一个属性的值也很多，组合起来便有成千上万种。不同属性之间的相互组合也可以产生不同的样式，css真是一种优美的样式设计语言。下面对工作中常见的易混淆的属性和值进行总结： 1. line-height(行高) 带单位与不带单位的区别： 我们知道行高是可以继承的。当父元素的行高值没有带
阅读全文
摘要：CSS3 可以将文本内容设计成像报纸一样的多列布局。像下面这样： 这样的布局称为“多列布局”。 对多列属性分别进行学习： 对于 column 的所有属性，ie10+ 支持，firefox 不支持 column-span。除 firefox 外，所有浏览器都不支持 column-fill 属性。 1.
阅读全文
摘要：网站中的回到顶部功能有益于增强用户体验，当一个页面很长很长时，回到顶部是必不可少的。 回到顶部按钮，可以使用图片，背景图，矢量字体图标，也可以使用代码 css 生成。这里使用 css 生成的方法。 使用 css 代码生成的回到顶部按钮如下： 对于回到顶部的多种方法总结如下： 1. 锚标记 # 包含了
阅读全文
摘要：很多时候，我们需要让元素居中显示：1. 一段文本的水平居中，2. 一张图片的水平居中，3. 一个块级元素的水平居中；4. 单行文本的竖直居中，5. 不确定高度的一段文本竖直居中，6. 确定高度的块级元素竖直居中等等。现在分别对其进行总结下(这篇文章也在 imooc 里发表过手记，可是因为板式的原因不
阅读全文
摘要：对于表单，input[type="radio"] 的样式总是不那么友好，在不同的浏览器中表现不一。 2017年11月28日更新 对单选按钮自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。 如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式
阅读全文
摘要：input[type="file"]的样式在各个浏览器中的表现不尽相同： 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外，当我们规定 input[type="file"] 的高度，并把它的行高设置成与其高度相等后，chrome中难看的样式出现了
阅读全文