基于浮动的布局：

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） ”） ”

}

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

  1. css013 构建基于浮动的布局

    css013 构建基于浮动的布局 基于浮动的布局时利用float属性是网页上的元素并排,并创建列 float有三个值:left .right .none 1.假设要把一张图片浮动到网页的左侧 .flo ...

  2. 什么是响应式web设计

    什么是响应式web设计 现在开发一个产品,基本上都会需要兼顾 PC端和 移动端. 一般有两种思路: 1.为每个终端做一个特定的版本,并给2级域名,根据终端环境调用不同的版本代码. 2.一个网站能够兼容 ...

  3. 响应式web布局设计实战总结教程

    响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media ...

  4. 如何通过CSS3 实现响应式Web设计

    如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...

  5. 让IE支持CSS3 Media Query实现响应式Web设计

    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况 ...

  6. HTML5、CSS3与响应式Web设计入门(1)

    HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野.HTML5本身就是一个很 ...

  7. HTML5、CSS3与响应式Web设计入门(2)

    HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...

  8. [转]响应式web设计之CSS3 Media Queries

    开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  9. 【01】《响应式Web设计：HTML5和CSS3实战》

    [01]   (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(全).pdf 共246页.   2013年1月出版.   读后感:适合入门的书籍,对于响应式布局, ...

随机推荐

  1. python if __name__ == '__main__'解析

    废话不多说,正题: python中所有的模块都有一个内置属性 __name__,一个模块的 __name__ 的值取决于如何应用模块.如果 import 一个模块,那么模块__name__ 的值通常为 ...

  2. struts2封装客户端数据到Action

    1.在Action中定义简单数据类型的属性 给Action定义简单类型的属性,封装客户端请求的数据 简单类型:String,基本类型和对应的引用类型 只要保证客户端请求的参数名称和Action的属性名 ...

  3. java web统计当前访问用户数量

    1.使用SessionListener监听器,监听创建与销毁session的操作,利用计数方式记录当前session的数量

  4. Jquery.Datatables 导出excel

    按钮(Buttons) BUttons v1.1.2 下载地址:http://pan.baidu.com/s/1c0Jhckg JSZip v2.5.0-21-g4fd4fc1 下载地址:http:/ ...

  5. LeetCode之Binary Tree Level Order Traversal 层序遍历二叉树

    Binary Tree Level Order Traversal 题目描述: Given a binary tree, return the level order traversal of its ...

  6. poj 2001:Shortest Prefixes（字典树，经典题，求最短唯一前缀）

    Shortest Prefixes Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 12731   Accepted: 544 ...

  7. 攻城狮在路上（壹） Hibernate（十一）--- 映射实体关联关系

    本文以Customer和Address类的关系为例说明一对一关联映射:以Category和Item类的关系说明多对多关联关系.一.映射一对一关联: 分两种情况:按照外键映射和按照主键映射.这两种方式的 ...

  8. oracle删除用户下所有的表

    需要创建这些删除语句,通过oracle的数据字典找到该用户下的所有表.视图等对象,拼接成语句.如下select 'drop table '||table_name|| ' cascade constr ...

  9. go-martini 简单分析之一

    env.go 环境变量 const ( Dev string = "development" Prod string = "production" Test s ...

  10. [Tips] JavaScript 使用hash 对象传参

    转自Web 前端开发修炼之道. 在JavaScript 中funciton 包含多个参数的时候,我们想要实现可选参数的功能,传很多个null 其实是个很讨厌的事情,这个时候就可以使用这个技巧. 具体见 ...