CSS3-基于浮动的布局，响应式WEB设计，定位网页上的元素，设计打印页面的css技术

基于浮动的布局：

1、除非图片设置了宽度，否则始终应该要对浮动的图片设置一个宽度，这样可以让浏览器给其他内容腾出环绕的空间

2、当侧边栏的高度与主内容区的高度不一致的时候，可以用个margin进行调整

3、在一个非浮动元素<div>中存在一个浮动元素，当浮动元素高于元素本身的时候，内容就会溢出<div>中，解决方案如下：

A：在</div>介绍之前添加一个换行，并且添加一个类<br class=”clear”/>,之后创建一个样式br.class{clear:both;}

B:让非浮动元素也进行浮动，但是选择这种方法的时候，一定要在浮动容器后面的任何元素中添加一个clear属性，确保浮动元素落到容器的下方

C：在外围快的样式中添加overflow：hidden，他会强制外围快扩大到包含浮动元素，不过，如果容器中含有绝对定位的元素，有可能会显示不出来

D：.clear:after{

content: " ";

display: table;

clear: both;

}

.clear{

zoom:;

}

/*这两个样式是为了使IE6以及IE7能够拥有布局*/

/*在样式表中添加了这些样式之后，只要在包含浮动元素的<div>中添加类名就可以，

eg：<article class="clear">*/

.clearfix:after{content:"/200B";display: block;height:0;clear:both;overflow: hidden;}

.clearfix{*zoom:1;}

4、元素划分为几列：

Column-count：2；设置列的数量

Column-gap：1em；设置列之间的间隔

Column-rule：1px dotted black；列之间绘制一条直线

IE9及其之前是不支持的，像chrome等等的还需要添加前缀，opera可直接支持

5、用box-sizing防止浮动下落：

content-box：padding+border+content

padding-box：padding+content

border-box:已经包含了padding，border，以及width

*{

-moz-box-sizing:border-box;   //火狐浏览器

box-sizing:border-box;

}

在IE7以及其之前的版本不支持box-sizing属性

6、当三栏布局的时候，如果将右浮动的一栏放置在main之后，会导致浮动不到右侧，所以应该将它放置在左浮动的下面---这是针对主内容栏没有进行浮动

单三栏都进行浮动了，则就没有必要对顺序进行调整

7、clear属性会迫使一个元素落到浮动元素的下方

响应式WEB设计：

1、指示浏览器如何显示网页内容：放置在title标签的上方

<meta name=”viewport” content=”widt=divice-width”>

Viewport指浏览器的屏幕，content属性将浏览器的宽度设为手机的屏幕宽度，这句话告诉手机浏览器不需要缩小，而是使屏幕的宽度与手机的实际显示屏幕相匹配

2、除了1中所说的方法，还有一种方法是在样式表的最上方添加样式：

@viewport{

width: device-width;

}

3、<link href=”css/small.css” rel=”stylesheet” media=” (min-width:480px) and (max-width:768px)”>

4、IE8以及之前的版本是不支持媒体查询的，在<head>中添加一些JavaScript使版本支持，下载response.js文件并且放到网站中，也就说IE8以及之前的版本支持媒体查询只能通过JavaScript的这种方法

<!--[if lte IE8]>

<script src="response.min.js"></script>

<![end if]-->

5、在样式表中添加媒体查询

A：@import url（css/small.css） (max-width:320px);  -----ie8以及之前的版本不会加载，并且要放在样式表的开头处

B:在样式表中嵌入媒体查询：

@media（max-width：480px）{

Body{

}

.style{

}

}

6、 将像素转化为百分比的时候，后面的小数不需要进行四舍五入

7、将图片设为流式：

第一：在样式表中添加样式 img{max-width：100%}

第二：删除网页中<img>属性的heigh以及width

8、在导航元素上面使用inline-block可以让链接并排，同时保留padding以及margin

9、在响应式布局中，清除浮动后，设置display为inline-block是让导航按钮居中的唯一方法

定位网页上的元素：

1、不要在一个样式中同时设定float属性以及任何一种定位

2、绝对定位：网页上的元素不知道绝对定位元素的存在

如果只是设置一个元素为绝对定位，没有提供上下左右四个位置，那么浏览器会让该元素在网页上保持原地不动，不过会堆叠在其他内容之上

绝对定位的元素实际上是被相对的放在离他最近的定位祖先元素的边界上

A：如果一个标签的位置是绝对定位，并且他又不在其他任何设定了absolute，relative或fixed定位的标签里面，则它就是相对于浏览器的窗口进行定位

B：如果一个标签处在另一个设定了absolute，relative或fixed定位的标签里面，那它就是相对于另一个元素的边沿进行定位

3、相对定位：相对于它在html流中的当前位置，其他网页元素不会占据相对元素原来在HTML中所处的位置，相对定位的最大好处不是 移动元素，而是给他内部的绝对定位元素设定一个先的参照点

4、固定定位，与background-attachement：fixed作用相同，当访问者滚动页面的时候，固定元素会在屏幕上保持不动

5、在定位中堆叠：z-index：3；值越大，元素就会越接近堆叠顶部的地方，也就是说值越大的图片会出现在其他图片之上

z-index的值还可以为负数，可以将一个元素定位在其父元素或者任意一个祖先元素之下（但在IE7之前还是不支持的），例如一个标题的一部分被徽章给遮着了，我们可以将徽章的z-index的值设为负数，即将绝对定位的元素放在了其父元素的后面

6、绝对定位的时候常常使用的一个css属性visibility，它能让你掩藏部分网页，hidden以及visible

visibility：hidden以及display：none的区别：display：none确实不留痕迹的从网页上面消失，但visibility：hidden只是阻止浏览器显示元素的内容，并在该元素原来所处的位置上留下一个窟窿

另一个掩藏元素的方法：opacity为1表示显示，为0表示掩藏，但需要通过一个transition模拟这种效果

7、将说明文字置于图片之上，要使用绝对定位

8、在HTML中：

<figure class="hat">

<img src="hat.jpg" width="100" height="100">

<figcaption> A piction of a hat</figcaption>

</figure>

在CSS中：

.hat figcaption{

display: none;

position: absolute;

bottom: 0;

left: 0;

right: 0;

background-color: white;

}

.hat:hover figcaption{

display: block;

}

/*说明文字在访问者的鼠标经过图片的时候变成可见

带有HAT类的元素里面所有<figcation>标签，只有在鼠标经过该元素的时候才起作用*/

9、可以利用定位使某个元素超出另一个元素的边界，即使用负值

10、固定定位中，如果侧边栏是固定的并且还高于可滚动的主内容宽，因为侧边栏是不会滚动的，所以将看不到超出的那部分

11、与绝对定位不同，固定定位总是相对于浏览器的窗口而言

设计打印页面的css技术：

1、css支持10种不同的媒体类型：all，braille（盲人用的阅读器），embossed，handheld，print，projection，screen，speech，tty，tv

all----适用于每一种设备

screen-----适用于显示器

print----适用于打印网页

2、<link rel=”stylesheet”  media=”print” href=”print.css”/>

3、在创建和测试打印样式表的时候，要删除media=“print”属性，并且关闭所有只针对屏幕的样式表，例如，将media=“screen”改成media=“speech”，这种方法允许你在web浏览器上浏览页面，但它显示的是打印机设定的格式，如果感觉不错，就可以将媒体类型改成相应的

4、在样式表中直接定义：

@media print{

h1{}

P{}

}

5、 page-break-before：always使某些标题元素始终显示在网页的顶部，属性对于大幅的图片来说也很有用，即可以将图片打印在一页纸上面

Page-break-after：always使某一个元素显示在打印页面对的最后

6、在每个链接的末端添加url

a:after{

content：“ （“ attr（href） ”） ”

}