摘要：border-radius可以便捷的制作圆角效果，不需要通过增加圆角图片来达到效果，便于维护。 语法：border-radius:none | 1-4 length | % / 1-4 length|% 按顺序设置圆角四个方向的值，和设置border的顺序一样。 ' / '前后的值都存在，那么' / 阅读全文

摘要：:before和:after这两个伪元素在真正的页面元素之前和之后插入一个额外的的元素，等效于下面的代码： <p> <span>:before</span> HTML中真正的内容 <span>:after</span> </p> 在HTML的源代码里面是找不到伪元素的内容的。 用法 :before和 阅读全文

摘要：浮动： 浮动的框可以左右移动，直到它的边缘碰到包含框或另一个浮动框的边框为止。文档的普通流中的块框会当浮动框不存在一样。但会影响内联框（通常是文本）的排列。 属性值有：left,right,none; 当浮动元素的父元素没有其他元素内容的时候，父元素会出现“勾搭塌陷”的情况，浮动元素脱离了父元素。为 阅读全文

摘要：position属性有四个值： static（静态定位）：是默认值，不会被特殊的定位，遵循正常的文档流对象，对象占用文档空间，该方式下，top、right、bottom、left、z-index等属性无效。 relative(相对定位)：不添加额外属性的情况下，和static表现一样，当使用top、 阅读全文

摘要：颜色： 16进制的色彩值为六位数，如果每两位的值相同，可以缩写一半。 如：#000000=#000； #223344=#234； 盒子的尺寸： 如margin:value; 一个值表示所有边，两个值表示上下，左右，三个值表示上，左右，下，四个表示上右下左。 border的width,style,co 阅读全文

摘要：写css关于id,class等的命名，文件的结构，共同模块的提取，代码的复用性，可读性，扩展性，维护性都要考虑，不然后期可以会需要花大力气去进行维护修改。考虑写出足够科学的css，需要考虑下面几个方面。（参考博客园 灵感的小窝） 首先分析需求，根据需要分出头部、导航、侧边栏、banner区，主要内容 阅读全文

摘要：css3弹性盒子是一种布局方式，在适应不同的屏幕大小的时候，能够确保元素拥有更恰当的排布行为。它只是视觉呈现上的，即显示顺序适应显示空间，与源代码无关，源代码顺序不受影响。 定义一个弹性盒子： 在css中，设置display： display：flex；/-webkit-flex; 或者 displ 阅读全文

摘要：sass的混合器是对大段的样式代码进行命名，定义为混合器，以便被多次引用。混合器的格式为：“@mixin 样式名称{样式代码}”；调用混合器的格式为：“@include 样式名称”。例：@minin rounded-corners{-moz-border-radius:5px;-webkit-bor 阅读全文

摘要：sass可以使用变量，采用 $ 来进行变量声明，格式为： $highlight-color:#f90;(声明方式和css属性声明类似。使用的变量名可以更加语义化) 与js分为全局变量和局部变量类似，sass定义在规则块之外的变量，该变量均可被使用。而定义在规则块之内的变量只能在规则块内部使用，此时， 阅读全文

摘要：sass是一种“css预处理器”，同类的还有less等，方法类似。css预处理器的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的css文件。 使用sass需要先暗转RUBY，再暗转sass。方法为安装ruby后，在命令行输入：gem install sass，然后就可以使用了 阅读全文