随笔分类 - css
摘要：inline, inline-block元素在同行元素的排版布局中非常有用，但是时常会出现一些莫名奇妙的问题。要解决这些问题，深刻理解inline,inline-block元素的特征有非常重要的意义。 下面这篇英文文章解释的非常清晰，我视图把他翻译一下，同时也好好学习梳理一下。 http://chr
阅读全文
摘要：//margin 形式语法： [ | | auto ]{1,4}//合法实例：margin: style /*单值语法 */ 举例： margin: 1em; margin: vertical horizontal /*二值语法 */ 举例： ...
阅读全文
摘要：在现代web开发中，往往我们会借助类似sass,less之类的预处理器来加快开发进度，但是随着项目的增大，你可能无法清楚明确地知道一个css rule到底是从哪个less/scss文件中编译出来的，这反而会大大降低工作效率。 幸运的是google chrome的开发人员借助传统c/c++语言开发经验
阅读全文
摘要：cite 表示引用到某一本书籍名称，默认样式为斜体，q 表示直接引用到里面的话，大块的引用使用block默认样式将增加“双引号” ，关键的词用默认为粗体；一些技术术语则用来表示，为斜体ol标签为有序列表，在出现类似排行榜这样的信息块时，比较适合使用。可以通过来指定ol列表自增symbol第一个ol的...
阅读全文
摘要：现在的网站必须要考虑mobile上访问的友好性，bootstrap作为mobile first的前端框架得到很多应用，它通过默认就使用.col-xs-xx定义的width，同时加上@media(min-width: 768px)等定义的.col-sm-xx来实现当viewport size大于等于s...
阅读全文
摘要：outline属性在一个html element的周围画出一条线来，位于边框的外围，起到突出元素的作用。轮廓线不占据任何布局空间，也不一定非要是矩形。p { outline:#00FF00 dotted thick; }
阅读全文
摘要：css display属性在对css做layout设计时非常重要，它的值有以下几种：ValueDescriptionPlay itinlineDefault value. Displays an element as an inline element (like )Play it »blockDi...
阅读全文
摘要：如何style line-through？ 虽然css3中定义了p { text-decoration: underline; -moz-text-decoration-color: red; /* Code for Firefox */ text-decoration-color: red;} 剪
阅读全文
摘要：media query是css3规范中引入的，它提供了一种responsive design的基础机制：浏览器在不同size的设备中将以不同样式展现网页，这就给一个网页能够适应不同device一种可能。在实际使用中，我常常碰到以下问题：为什么media query的rule不起作用？很有可能和你的m
阅读全文
摘要：less guards/argument matching: .setbackground(@number) when (@number>0){ .setbackground( @number - 1 ); .class@{number} { background-image: ~"url(back
阅读全文
摘要：less的嵌套规则对于有效组织你的css代码有较好的作用。其中使用mixin或者class都可以作为被嵌套的实体，但是二者还是有区别的：mixin必须由.name+(){}的pattern来定义，而class则只需.name{}来定义（注意：class依然可以通过.name直接在less源文件中引入...
阅读全文
摘要：曾几何时，一直梦想能够有超酷的前端开发环境，加快工作进度，减轻工作强度，看了这张图有些震撼了，慢慢研究他们是怎么玩的。。。 注意：browsersync的file watch功能只对绝对地址的文件有效，不能使用relative path的格式，否则files section无效！ 如何使用brows
阅读全文
摘要：https://medium.com/@andersonorui_/bem-sass-and-bootstrap-9f89dc07d20fBootstrap是一个“HTML,CSS和Javascript的框架，用于开发responsive,mobile first project";SASS是一个c...
阅读全文
摘要：推荐查看以下文章： https://segmentfault.com/a/1190000000704006 关于BEM,SMACSS,OOCSS的通俗易懂的介绍 http://philipwalton.com/articles/css-architecture/ http://ux.mailchim
阅读全文
摘要：http://www.w3.org/TR/CSS21/cascade.html#inheritancehttp://www.w3.org/TR/CSS21/cascade.html#cascadehttp://www.w3.org/TR/CSS21/cascade.html#specificit...
阅读全文
摘要：利用HTML5、css的一些动画功能，可以设计出非常炫酷的动画，但是由于并不是所有的浏览器都支持，所以可能需要prefix,这个过程是比较烦的。一个比较好用的线上工具：http://matthewlein.com/ceaser/
阅读全文
摘要：/** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in...
阅读全文
摘要：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors在css3规范中，定义了以下几种类型的selector:Basic selectortype selector: elementnameclass selector...
阅读全文
