随笔分类 - CSS
摘要：<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-e
阅读全文
摘要：1、postcss相关网站 https://www.postcss.com.cn/ https://www.ibm.com/developerworks/cn/web/1604-postcss-css/ 2、介绍 PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaS
阅读全文
摘要：转自：http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/ 1、zoom的缩放是相对于左上角的；而scale默认是居中缩放； 2、zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面
阅读全文
摘要：原理：浮动+margin负边距 示例代码： 效果： 鼠标悬浮效果：
阅读全文
摘要：1、概述 文字列表大多使用在新闻资讯板块中，为了适应屏幕宽度，可以使用百分比布局和固定尺寸布局配合。新闻左侧的分类标签和右侧的发布时间是固定的，新闻标题部分是不固定宽度的。 如下图所示： 2、代码示例： 说明：新闻列表（包括分类标签、新闻标题和发布时间）需要在本行垂直居中，需要使用绝对定位进行控制，
阅读全文
摘要：1、flex兼容性 根据caniuse（http://caniuse.com/#search=flex），flex布局在IE6-9不支持。 因此，flex布局主要应用在移动端。 2、基础测试代码 效果： 说明： 将父元素设置为flex布局后，子元素也默认成了弹性元素，子元素并会自动沿主轴方向横向排列
阅读全文
摘要：良好的代码结构，HTML和css元素之间的关系，对于项目交付是很重要的！ BEM解释： (1).block 是BEM的区块(B)，包含内容和风格。如bootstrap框架的.container。 (2).block-element 代表自子容器(E)。如bootstrap框架的轮播图，.carous
阅读全文
摘要：1、无障碍阅读使用场景 无障碍阅读一般在政府类网站使用比较多，如： 天津海事局（http://www.tjmsa.gov.cn/），其中天津海事局的页面放大和页面缩小在firefox浏览器下存在bug，不起作用。 中国海事局（http://www.msa.gov.cn/）： 无障碍阅读一般包括以下功
阅读全文
摘要：1、calc是什么？ calc是英文单词calculate(计算)的缩写，用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算； + 和 - 运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式：一个百分比后跟一个负数长度
阅读全文
摘要：1、[attribute|=value] [attribute|=value]选择器说明：http://www.w3school.com.cn/cssref/selector_attribute_value_start.asp 选择 lang 属性值以 "val" 开头的元素 该值必须是整个单词，比
阅读全文
摘要：1、css选择器 css（包括css1、css2和css3）有哪些选择器？ http://www.w3school.com.cn/cssref/css_selectors.asp 2、CSS3选择器 因为CSS1和CSS2选择器浏览器兼容性很好，因此本文主要讲解CSS3选择器，CSS3选择器一共有2
阅读全文
摘要：1、line-height定义 line-height表示行高，即两行文字基线间的距离。 以下是图示说明： 行高是2条红线之间的距离，即：1+2+3+4 在实际测量中，基线不好找，可测量顶线到顶线的距离来代替行高。 2、行间距 line-height 与 font-size 的计算值之差（在 CSS
阅读全文
摘要：1、说明 ":before" 伪元素可以在元素的内容前面插入新内容。 ":after" 伪元素可以在元素的内容之后插入新内容。 伪元素默认展示为inline， 即 必须写content属性，不然伪类不起作用！ 2、兼容性 伪元素有2种写法，单冒号和双冒号，单冒号和双冒号作用是一样的。 兼容性查看：h
阅读全文
摘要：1、box-sizing属性功能 官方说明文档为：http://www.w3school.com.cn/cssref/pr_box-sizing.asp box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 通俗来说就是：定义盒模型尺寸。 2、本文主要讲解：border-box值
阅读全文
摘要：无序列表前小黑点图片替换方法： 直接上代码： 小黑点的替换图片为： 显示效果为：
阅读全文
摘要：1、定位 核心代码实现请看示例代码中的注释： 效果： 2、table-cell布局 核心代码实现请看示例代码中的注释： 效果同上。 3、flex布局 核心代码实现请看示例代码中的注释： 效果同上，注意浏览器兼容性问题。 4、translate+relative定位 核心代码实现请看示例代码中的注释：
阅读全文
摘要：以下示例主要讲解nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type使用。 示例代码： 总结： 除了first-child选择器兼容IE7+以上外，其他选择器均需要IE9以上浏览器才能兼容。
阅读全文
摘要：1、表单输入框自适应 示例代码： 效果： 2、导航栏自适应布局 （1）、display：table 实现 示例代码： 效果： （2）flex布局 示例代码： 效果同上。 3、网格布局（inline-block+justify） 示例代码： 效果： 4、使用媒体查询
阅读全文
摘要：一、面向对象CSS（OOCSSS） OOCSS规则一：结构和皮肤分离 如.btn ， .btn-info ，.btn-warning OOCSS规则二：容器和内容分离（不推荐） 二、单一职责原则 （1）、尽可能拆分成可独立复用的组件 （2）、通过组合方式使用多个组件 实现：可以像面向对象CSS那样实
阅读全文
摘要：本文主要讲解如何检测页面中多余无用的css。 1、chrome浏览器 F12审查元素的Audits 说明：使用Audits，会检测出页面中没有用到的css，需要手动删除多余的css；同时需要说明的是检测出多余无用的css块，而不是某一行css。 2、CSS usage插件 （1）安装Firefox浏
阅读全文