摘要：
在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过ID属性可以将不同DIV元素进行区分。CSS2中引入了一些属性选择器，这些选择器可基于元素的属性匹配元素，而CSS3在CSS2的基础上扩展了这些属性选择器，支持基于模式匹配定位元素。 属性选择器 E[attr] 选择匹配具有属性 阅读全文
摘要：
伪元素 :first-letter :first-letter用来选择文本块的第一个字母。常用于给文本添加排版细节，例如首字母下沉。 p:first-letter { color:#ff0000; font-size:xx-large; } :first-line :first-lin用来匹配元素的 阅读全文
摘要：
前言 通常我们在设置链接的一些伪类（link，visited，hover，active）样式时，要让不同的状态显示正确的样式，我们需要按一定的顺序设置这些伪类的样式。这里我就按CSS2规范中推荐的顺序进行介绍，即 link-visited-hover-active，可记为 LoVe-HAte 。 要 阅读全文
摘要：
问题的产生 retina屏会以2个（乃至3个）物理像素来显示一个CSS像素（1px），所以在CSS中指定1px的边框实际占据的却是2个以上物理像素，在retina屏用户体验较差。 几种解决方案（考虑1px=2dip） 使用0.5px 问题：只在Firefox and Safari 8+支持，安卓不支 阅读全文
摘要：
基本框 CSS假定每个元素都会生成一个或者多个矩形框，这称为元素框。各元素框中心还有一个内容区（content area）。这个内容区周围有可选的内边距、边框和外边距。这些项都是可选的，因为它们的宽度可以设置为0。 包含块 每个元素都相对于其包含快摆放；可以这么说，包含快就是一个元素的"布局上下文" 阅读全文
摘要：
自适应内部元素 我们希望 width 可以像 height 一样， 可以自动适应内容的宽度。假如有如下结构： <p>Lorem ipsum dolor ...</p> <figure> <img src="./image/flower.jpg"> <figcaption>Lorem ipsum do 阅读全文
摘要：
基础知识 块级元素与块元素 块级元素 块级元素是那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。例例如：display属性为block, list-item, table, flex, grid。 块元素 块元素是 display 属性值为 block 的元素，它应该是 块级元 阅读全文
摘要：
原文链接：https://github.com/hangyangws... 为什么需要校验 CSS 规则 对于编程语言进行「语法、书写」校验，能有效「归并」不同开发者的「不同风格」，还能检验出一些语法错误。 比如 eslint 就能校验 JS 代码的「鸡肋糟粕」。 对于 CSS 而言，不能算是严格意 阅读全文
摘要：
这个属性的官方文档语法：示例代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 10px; } .a{ float: left; height: 300px;width 阅读全文
摘要：
最近公司的设计人员想要把网站上面的小图标都改为iconfont，我也做了一篇PPT分享给大家，如果现在不记下来，可能过几个月就忘得一干二净了 一· 现代设计的趋势 我们知道，传统设计的思路是拟物化，就是在电子设备中，模拟真实的世界。比如我们用的按钮，会有一些阴影的设计，让他看起来更像我们生活中用到的 阅读全文
摘要：
7.结构和布局 自适应内部元素: min-content（容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元 素） <figure> <img src="adamcatlace.jpg" /> <figcaption> The great Sir Adam Catlace wa 阅读全文
摘要：
FlexBox 语法指引 容器属性 display : flex | inline-flex CSS的columns在伸缩容器上没有效果。 float、clear和vertical-align在伸缩项目上没有效果 flex-direction: row | row-reverse | column 阅读全文
摘要：
解决的问题 圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 圣杯布局 圣杯布局dom结构： <section class="layout grail"> <h1>圣杯布局</h1> <article class="left-cente 阅读全文
摘要：
HTML隐藏 display:none; 表单 type=”hidden” 宽高设为0 height:0;width:0; 祖先元素隐藏或在页面外 margin Visibility:hidden; Opacity:0; box-shadow box-shadow: 0 2px 5px 0 rgba 阅读全文
摘要：
浏览 Animate.css官网 的时候发现Animate.css这几个字母的颜色会慢慢变化，个人觉得还是很有意思，本以为是利用animate 改变color,结果F12后发现好多奇怪的css属性。 先来看看我的实现方法 简易实现方法 h2{ height: 60px; color: #f35626 阅读全文
摘要：
CSS 的全称是 Cascading Style Sheets，即层叠样式表， 是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）元素所呈现的样式。 “层叠”即表示允许以多种方式来描述样式，一个 HTML 元素可以被渲染呈现出多种样式。 下面就让 阅读全文
摘要：
SASS介绍 css预处理器。其实还有用的很多的less，stylus。SASS支持所有css语法基础的文件命名方法以_开头 准备工具 SASS编译工具?官方下载地址，下载对应版本 用法： 将项目中的css文件夹拖入Koala 创建sass文件 后缀demo.sass (Koala会自动编译成dem 阅读全文
摘要：
原文链接 Sticky Footer 经典的上-中-下布局。 当页面内容高度小于可视区域高度时，footer 吸附在底部；当页面内容高度大于可视区域高度时，footer 被撑开排在 content 下方 demo link <body> <header>HEADER</header> <articl 阅读全文
摘要：
使用css+svg实现支付宝小鸡吃米 效果图： 实现一部分场景与动画，剩下得有时间继续完善 svg方面 主要使用svg画不规则物体，连体山脉与草丛背景都是使用svg一笔画出，路径画法参考SVG矢量绘图 path路径详解（贝塞尔曲线, 曲线, 平滑直线及弧形） css3 剩下大部分都是由div+css 阅读全文
摘要：
border-radius是向元素添加圆角边框。 使用方法： border-radius:10px;/* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px;/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 实心上半圆： 方法：把高 阅读全文