基于浮动的布局：

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】下载远程内容到本地

    来源:http://www.jb51.net/article/42630.htm urllib模块 urlretrieve方法 urllib.urlretrieve(url[, filename[, ...

  2. ACdream 1224 Robbers (贪心)

    一道贪心题,很久前做的,代码是我以前写的. 题意:有n个抢劫者抢劫了m块金子,然后第i个人平分xi/y块金子,但是会有除不尽的情况而金子不可再分,那么每个人都有一个不满意度fabs(xi / y - ...

  3. VS2010编译Qt4.8.2的64版本库

    安装qt-win-opensource-4.8.2-vs2010.exe(从http://download.qt.io/archive/qt/4.8/4.8.2/下 载),这个是32位的,里面有编译好 ...

  4. log4j介绍以及使用教程

    一.介绍 Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接 口服务 器.NT的事件记录器.UNIX Syslog ...

  5. supersr--九宫格公式(根据多少行多少列排版)

    - (void)layoutSubviews{ [super layoutSubviews]; NSUInteger count = self.subviews.count; NSInteger ma ...

  6. SQLServer自定义函数简单演示

    CREATE FUNCTION [ schema_name. ] function_name ( [ { @parameter_name [ AS ][ type_schema_name. ] par ...

  7. solrconfig.xml和schema.xml说明

    1.   solrconfig.xml solrconfig.xml配置文件主要定义了SOLR的一些处理规则,包括索引数据的存放位置,更新,删除,查询的一些规则配置. 1.1.  datadir节点 ...

  8. Mysql之日志恢复

    对于Mysql,每一步操作都会有相应记录,如insert,update,delete ,drop ,alter等相关DDL或DML操作.有时难免会出错,但在出错时如何恢复以复原数据. 例如,现在有这些 ...

  9. C#中的变量及命名规则

    变量: 1.作用 :可以让我们在计算机中存储数据 2.语法:变量类型    变量名=赋值: 3.常用的数据类型:  int   整数类型  取值范围:最大2147483647;最小-214748364 ...

  10. android中点击空白处隐藏软键盘

    InputMethodManager manager manager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERV ...