文章分类 - CSS
摘要：display:inline-block，block，inline的区别与用法 一、首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。
阅读全文
摘要：CSS选择器用于选择你想要的元素的样式的模式。 "CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。 选择器示例示例说明CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素
阅读全文
摘要：兼容性 它是CSS3的新属性，兼容IE9+，Firefox 4+、Chrome、Safari 5+ 以及 Opera浏览器，对于一些较低版本的浏览器，我们可以添加相应的浏览器前缀来兼容。 div { width: 500px; height: 300px; border: 1px solid bla
阅读全文
摘要：每一门技术的出现都是为了解决现存的问题，同样的，Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官方文档 中对 Less 的使用有详细的介绍，总结一下为：Less = 变量 + 混合 + 函数。如果你对 js 和 css 有所了解，那么就可以很快的掌握并在你的项目中使用 Less。
阅读全文
摘要：CSS的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上，CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是伪元素。 如果你一直关注我们的教程，你一定听说过这个概念。 事实上，确实有一些CSS选择器被归类为伪元素，例如：:first-l
阅读全文
摘要：在布置文档时，浏览器的渲染引擎根据标准CSS基本框模型将每个元素表示为矩形框。CSS确定这些框的大小，位置和属性（颜色，背景，边框大小等）。 每个框由四个部分（或区域）组成，由它们各自的边界定义：内容边缘，填充边缘，边界边缘和边缘边缘。 由内容边缘限定的内容区域包含元素的“真实”内容，例如文本，图像
阅读全文
摘要：box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。 在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制
阅读全文
摘要：感谢阮一峰老师的教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 本示例将教程上所有的布局都简单的实现了一遍，并保存GitHub上面 https://github.com/JailBreakC/flex-box-demo http:
阅读全文
摘要：网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式
阅读全文
摘要：在最近的web开发中是不是就会用到一些选择器，发现很多尤其是CSS3新增的不太熟悉，在此总结一下。优先级不同级别1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。2.作为style属性写在元素内的样式3.id选择器4.类选择器5.标签选择器6.通配符选择器7.浏览器自定义同一级别同一级别中后写的会覆盖先写的样式基础选择器选择器含义*通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）#idid选择器，匹配特定id的元素.class类选择器，匹配class包含(不是等于)特定类的元素element标签选择器* { /*页面...
阅读全文
