Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码： 复制代码代码如下:<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />或者这样的形式： 复制代码代码如下: <style type="text/css" med...
CSS引入方式按照CSS样式书写的位置（或引入方式），CSS样式表可分为三大类行内样式表行内样式是在元素标签内部的style属性设定CSS样式，适合修改简单样式<div style="color:red; "></div>【注意】style其实就是标签的属性在双引号中间，写法要符合CSS规范可以控制当前的标签设置样式书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用内部样式表内部样式表是写到html页面内部，是将所有的CSS代码抽取出来，单独放...
CSS Ul（列表样式）CSS列表属性作用如下：设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像一、列表在HTML中，有两种类型的列表：无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）有序列表 - 列表项的标记有数字或字母使用CSS，可以列出进一步的样式，并可用图像作列表项标记。二、不同的列表项标记list-style-type属性指定列表项标记的类型是：ul.a {list-style-type: circle;} /*无序，...
一：盒模型盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。CSS盒子模型：W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在）w3schools上对于盒子模型的图示如下CSS盒子模型的属性：内容属性：宽=width 高=height内填充属性（内容与边框之间的距离）：padding外边距属性：margin（使用该属性的时候注意浏览器的兼容性）内填充与边界的规则：如果有四个参数...
1、id选择器拥有最高的权重，可以覆盖之前的一些定义，比如 1<html> 2<head> 3<style type="text/css"> 4#color { 5 color: red; 6} 7p { 8 color: blue; 9}10</style>11</head>12<body>13<p id="color">test</p>14</body>15</html>“test”的字体颜色是红色。2、默认情况下，父元素的高度会根据子元素的内容自动调整，但是如果子元素设置为浮动，父元素的高度就会变为0，这就是为什么有时候明明设置了父元素的背景色却发现父...
css3 box-sizing属性box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。content-box，border和padding不计算入width和height之内，浏览器默认也是这样padding-box，padding计算入width内border-box，border和padding计算入width之内，其实就是怪异模式了~ ie8+浏览器支持content-box和border-box；ff则支持全部三个值。 案例 #a1{width:500px;padding: 10px;border:1px solid #ee240f;}问...
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字体尺寸,多理解父级设定font-size的尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=6...
1，什么是BFC BFC（Block Formatting Context）块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局。它是W3C CSS2.1规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且这个区域与外部毫不想干，2，生成BFC 下面的方法可以创建一个新的BFC （1）浮动元素，float: left | right （...
CSS文件结构CSS文件的书写可以用一定的结构来组织，来达到复用代码的目的。一般编写CSS样式规则，需要一些基础的模块，比如reset.css，它主要负责去减小浏览器的初始差异化规则。这个模块开源的比较广泛应用的有Yahoo的reset.css,还有normalize.css。这些现有资源拿来使用即可，但是使用之前应该认真地阅读一遍源码，看他们都做了哪些事情，还有一个比较基础的模块便是base.css,可以认为它负责一些高频次需要公共使用的样式规则，并...
CSS列表：属性描述list-style简写属性。用于把所有用于列表的属性设置于一个声明中。list-style-image将图象设置为列表项标志。list-style-position设置列表中列表项标志的位置。list-style-type设置列表项标志的类型。marker-offset 1. 列表类型：list-style-type属性（1）作用：修改用于列表项的标志类型；（2）可能的值：值描述none无标记。disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数...
nternet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 以及更早的版本不支持多列属性。column-count 属性规定元素应该被分隔的列数：column-gap 属性规定列之间的间隔：div { -moz-column-rule:3px outset #ff0000; /* Firefox */ -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */ column-rule:3px outset #ff0000; }column-coun...
CSS代码如下：/* Custom Stylesheet */ body, html {margin: 0;-webkit-font-smoothing: antialiased;background: #68ABAD;text-align: center;}/* DEMO 1 */.loader1 {margin: 0 auto;height: 20px;width: 20px;position:relative;-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;}.loader1 i{height: 20px;width: 20px;border-radius: 25px;display: block;position:absolute;}.loader1 ...
在没遇到calc之前我一直在想如果width/height能过写表达式得多好 例如100%-30px然后写上width:100%-30px;～ 无效、郁闷啊！有时我们可以用box-sizing: border-box;来解决一些问题，但还是有些情况无效今天在看css手册的时候发现了一段demo令我眼前一亮 copy下来测试一把，其中就是width:calc(100% - 30px);注意运算符左右空格哦 demo就不上了 在公司机器上有 有空补上原文：http://tianxing.blog.51cto.com/1515290/1579339
@mixin df {display: -webkit-flex;display: -moz-flex;display: flex; }@mixin df-ai {-webkit-align-items: center;-moz-align-items: center;align-items: center; }@mixin df-ai-fs {-webkit-align-items: flex-start;-moz-align-items: flex-start;align-items: flex-start; }@mixin df-ai-fe {-webkit-align-items: flex-end;-moz-align-items: flex-end;align-items: flex-end; }@mixin df-jc {-webkit-justify-content: ce...
在CSS中，与媒体相关的样式定义是从CSS2.1开始的。CSS2.1中定义了各种媒体类型，包括显示器、便携设备、电视机，等等。 CSS3中加入了Media Queries模块，该模块中允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式。换句话说，允许我们在不改变内容的情况下在样式中选择一种页面的布局以精确地适应不同的设备，从而改善用户体验。 我们知道，在不同的设备中，浏览器的窗口尺寸可能是不...