CSS3知识点2

1.布局相关样式
（1）多列布局columns
多列布局模块（CSS Multi Column Layout Module）

columns：<column-width> || <column-count>

多列布局columns属性参数主要就两个属性参数：列宽和列数。
参数: 参数说明
<column-width> 主要用来定义多列中每列的宽度
<column-count> 主要用来定义多列中的列数
举例：要显示2栏显示，每栏宽度为200px，代码为：

columns: 200px 2;

（2）列宽度column-width
column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示 ；

column-width: auto | <length>

取值说明
属性值 说明
auto: 如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。
length:使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。
(3)列数量column-count
column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则：

column-count：auto | <integer>

取值说明：
属性值 属性值说明
auto :此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。
integer: 此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。
(4)列间距column-gap
column-gap主要用来设置列与列之间的间距，其语法规则如下：

column-gap: normal || <length>

取值说明
属性值 属性值说明
normal :默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。
length: 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。
（5)列表边框column-rule
column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。
语法规则：

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

取值说明：
属性值 属性值说明
column-rule-width :类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。
column-rule-style :类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none(无）、hidden（隐藏）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（双线颜色深浅）、ridge（双线颜色浅深）、inset（颜色深）、outset（颜色浅）。
column-rule-color :类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色)
（6）跨列column-span
column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。

column-span: none | all

取值说明
属性值 属性值说明
none :此值为column-span的默认值，表示不跨越任何列。
all :这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。

2.盒子模型
（1）W3C标准盒模型
外盒尺寸计算（元素空间尺寸）
element空间高度/宽度＝内容高度/宽度＋内距＋边框＋外距
内盒尺寸计算（元素大小）
element高度/宽度＝内容高度/宽度＋内距＋边框（height为内容高度）
（2）IE传统下盒模型
外盒尺寸计算（元素空间尺寸）
element空间高度/宽度＝内容高度/宽度＋外距（height/width包含了元素内容高度/宽度、边框、内距）
内盒尺寸计算（元素大小）
element高度/宽度＝内容高度/宽度（height/width包含了元素内容高度/宽度、边框、内距）
(3)box-sizing
事先定义盒模型的尺寸解析方式
box-sizing: content-box | border-box | inherit
取值说明
属性值 属性值说明
content-box :默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height
border-box :重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。
inherit :使元素继承父元素的盒模型模式
（4）伸缩布局盒模型Flexbox
Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。
Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox布局功能主要具有以下几点：
第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
第五，可以控制元素在页面上的布局方向；
第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
Flexbox规范版本众多，浏览器对此语法支持度也各有不同，接下来的内容以最新语法版本为例向大家展示：
1.创建一个flex容器
任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit，

.flexcontainer{ display: -webkit-flex; display: flex; }

2.Flex项目显示
Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。

3.Flex项目列显示
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }

4.Flex项目移动到顶部
如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。
.flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

5.Flex项目移到左边
flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }

6.Flex项目移动右边
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }

7.水平垂直居中
在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

8.Flex项目实现自动伸缩
您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。
.bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }

3.Media Queries
Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式.
（1）媒体类型Media Type
通过媒体类型对不同的设备指定不同的样式。
值 :设备类型
All :所有设备
Braille :盲人用点字法触觉回馈设备
Embossed :盲文打印机
Handheld :便携设备
Print :打印用纸或打印预览视图
Projection: 各种投影设备
Screen :电脑显示器
Speech :语音或音频合成器
Tv :电视机类型设备
Tty :使用固定密度字母栅格的媒介，比如电传打字机和终端
（2）引用方法：
1》link

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

2>@import

@importurl(reset.css) screen;   

或

<head>
<style type="text/css">
    @importurl(style.css) all;
</style>
</head>

3》media媒体查询
（1）在样式文件中引用媒体类型：

@media screen {
   选择器{/*你的样式代码写在这里…*/}
}

（2）使用@media引入媒体类型的方式是在标签中的

<head>
<style type="text/css">
    @media screen{
    选择器{/*你的样式代码写在这里…*/}
}
</style>
</head>

（3）使用方法
@media 媒体类型 and (媒体特性) {你的样式}
1.》 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

2.》最小宽度min-width
媒体类型大于或等于指定宽度时，样式生效。
3.》多个媒体特性使用

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4.》设备屏幕的输出宽度Device Width

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。
5.》not
对后面的表达式执行取反操作

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
6》only
only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
支持媒体特性的设备，正常调用样式，此时就当only不存在；
不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；
不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用；

4.响应式设计Responsive设计
是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。
（1）
1.流体网格
流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。
2.弹性图片
弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情。
img {max-width:100%;}
为每一个断点提供不同的图片，这是一个比较头痛的事情，因为Media Queries并不能改变图片“src”的属性值，那有没有办分法可以解决呢？可以参考一下下面的解决方法。使用background-image给元素使用背景图片，显示/隐藏父元素，给父元素使用不同的图片，然后通过Media Queries来控制这些图片显示或隐藏。
来看一个断点解决图片自适应的例子。
<
img src=”image.jpg” data-src-600px=”image-600px.jpg” data-src-800px=”image-800px.jpg” alt=””
>
对应的CSS代码：

@media (min-device-width:600px){
img[data-src-600px]{
  content: attr(data-src-600px,url);
  }
}
@media (min-device-width:800px){
  img[data-src-800px] {
  content:attr(data-src-800px,url);
  }
}

3.媒体查询
媒体查询在CSS3中得到了强大的扩展。使用这个属性可以让你的设计根据用户终端设备适配对应的样式。这也是响应式设计中最为关键的。可以说Responsive设计离开了Medial Queries就失去了他生存的意义。简单的说媒体查询可以根据设备的尺寸，查询出适配的样式。Responsive设计最关注的就是：根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。
4.屏幕分辨率
屏幕分辨简单点说就是用户显示器的分辨率，深一点说，屏幕分辨率指的是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率，比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。因此屏幕分辨率在Responsive设计中是一个很重要的东西，因为只有知道Web页面要在哪种分辨率下显示何种效果，才能调用对应的样式。
5.主要断点
主要断点，在Web开发中是一个新词，但对于Responsive设计中是一个很重要的一部分。简单的描述就是，设备宽度的临界点。在Media Queries中，其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说，就是使用主要断点和次要断点，创建媒体查询的条件。而每个断点会对应调用一个样式文件（或者样式代码），如下图所示：

上图的style.css样式文件运用在Web页面中，但这个样式文件包括了所有风格的样式代码，也就是说所有设备下显示的风格都通过这个样式文件下载下来。当然，在实际中还可以使用另一种方法，也就是在不同的断点加载不同的样式文件，如下图所示。

上图主要显示的是主要断点，主要断点加载的不同样式文件直接将影响Web的效果。除了主要断点之外，为了满足更多效果时，还可以在这个基础上添次要断点。不过主要断点和次要断点增加之后，需要维护的样式也相应的增加，成本也相对应的增加。因此在实际使用中，需要根据自身产品需求，决定断点。
综合下来，设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于1024的桌面断点。
（2）布局技巧
在Responsive布局中，可以毫无保留的丢弃：
第一， 尽量少用无关紧要的div；
第二，不要使用内联元素（inline）；
第三，尽量少用JS或flash；
第四，丢弃没用的绝对定位和浮动样式；
第五，摒弃任何冗余结构和不使用100%设置。
有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？
第一，使用HTML5 Doctype和相关指南；
第二，重置好你的样式（reset.css）；
第三，一个简单的有语义的核心布局；
第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。
（3）meta标签

<meta name="viewport" content=""/>

脚本下载地址：
media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)
respond.js(https://github.com/scottjehl/Respond)

<!—[if lt IE9]>
      <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
 ​<![endif]>

大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：
1.1024px显屏

@media screen and (max-width : 1024px) {                    
/* 样式写在这里 */          
}     

2.800px显屏

@media screen and (max-width : 800px) {              
/* 样式写在这里 */          
}     

3.640px显屏

@media screen and (max-width : 640px) {              
/* 样式写在这*/            
}     

4.iPad横板显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {              
/* 样式写在这 */            
}     

5.iPad竖板显屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {         
/* 样式写在这 */            
}     

6.iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {              
/* 样式写在这 */            
}     

现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：

@media (max-width: 480px) { ... }              
@media (max-width: 768px) { ... }              
@media (min-width: 768px) and (max-width: 980px) { ... }      
 @media (min-width: 1200px) { .. }

5.用户界面及其他重要属性
（1）自由缩放resize
允许用户通过拖动的方式修改元素的尺寸来改变元素的大小。

resize:none | both | horizontal | vertical | inherit

取值说明：
属性值 :取值说明
none :用户不能拖动元素修改尺寸大小。
both :用户可以拖动元素，同时修改元素的宽度和高度
horizontal :用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。
vertical :用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。
inherit :继承父元素的resize属性值。
(2)外轮廓属性outline
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。

outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

属性值 :属性值说明
outline-color :定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，可以将此参数省略，省略时此参数的默认值为黑色。
outline-style :定义轮廓线的样式，属性为CSS中定义线的样式。在实际应用中，可以将此参数省略，省略时此参数的默认值为none，省略后不对该轮廓线进行任何绘制。
outline-width :定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，可以将此参数省略，省略时此参数的默认值为medium，表示绘制中等宽度的轮廓线。
outline-offset :定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。
inherit :元素继承父元素的outline效果。
(3)CSS生成内容
通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。
content配合CSS的伪类或者伪元素，一般可以做以下四件事情：
功能 :功能说明
none :不生成任何内容
attr :插入标签属性值
url :使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
string :插入字符串

.clearfix:before,
.clearfix:after {
content:””;
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}

假设我们有一个元素：

<a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a>

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：

a:after {
content:attr(title);
color:#f00;
}

效果如下：