(子容器%父容器)*100

png透明
ie6中
filter:progid:DXImageTransfornm.Microsoft.AlphaImageLoader(

src='路径',sizingMethod='crop');
)
behavior:url(iepngfix.htc)
让一个div水平、垂直居中

一、流式布局两个要点:
1,在link中加入media
<link src="global.css" />
<link src="ipad.css " media="(max-width:980px) and (min-width:600px)" />
<link src="mobile.css " media="(max-width:599px)" />

2,把精确的像素改为百分比,并使用box-sizing:border-box。
盒模型以border为准。
解决流式布局中两个水平盒子各分50%的宽度

二、在页面布局中小的点
在上面要点基础上也有一些小的点用来精细的设置页面

甚至padding也可以使用百分比。

border-radius

-webkit-linear-graient();

用js检测用户使用设备

使用device.js检测浏览器

device.ipad()
device.mobile()
device.iphone()
device.android()
device.tablet()
device.portait()
device.landscape()

http://qianduanblog.com/post/css-learning-16-css3-flex-responsive-design.html
http://qianduanblog.com/post/css-learning-18-css3-flex-responsive-design-example.html

http://www.kancloud.cn/zhongzhong/webtop/106237
http://www.kancloud.cn/zhongzhong/webtop/106238
http://www.ithao123.cn/content-1752271.html

css流式和弹性布局(未完)的更多相关文章

  1. ch8 固定宽度、流式、弹性布局

    假设浏览器窗口设置为1250px:wrapper的宽度为960px:content的宽度为920px:确保了wrapper居中时两边有20px的间距:  secondary的宽度为230px:  pr ...

  2. css流式布局

    elem{ width:1160px;/*流式布局的总宽度*/ column-width:375px; -moz-column-width: 375px; /*每列宽度*/ -webkit-colum ...

  3. parquet列式文件实战(未完,待续)

    parquet列式文件实战 parquet code demo http://www.programcreek.com/java-api-examples/index.php?source_dir=h ...

  4. 16.libgdx根据配置文件生成布局(未完)

    思路: screen分为普通和复杂两种,普通的功能大部分是页面跳转以及简单的crud数据,复杂的单独弄出来 跳转普通的screen,直接根据配置文件调整设置 <layouts> <l ...

  5. 流式处理框架storm浅析(上篇)

    本文来自网易云社区 作者:汪建伟 前言 前一段时间参与哨兵流式监控功能设计,调研了两个可以做流式计算的框架:storm和spark streaming,我负责storm的调研工作.断断续续花了一周的时 ...

  6. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  7. 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

    静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

  8. 浅谈静态布局、流式布局,rem布局,弹性布局、响应式布局

    静态布局: 特点:没有兼容性问题 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分:移动设备:另外建立移动网站,单独 ...

  9. webapp,liveapp: 流式布局和rem布局

    liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...

随机推荐

  1. Linux GRUB 2及修改默认启动项

    The GRUB 2 boot loader makes sure that you can boot Linux. GRUB 2 is installed in the boot sector of ...

  2. C#操作Excel(NPOI)

    这两天需要读取Excel文件,网上找了找,发现NPOI用的是最多的,于是研究了一下.这里大概介绍一下. 首先,在NPOI中一个Excel文件对应了一个IWorkbook对象,Excel中的一个工作表对 ...

  3. [Linux]三种方案在Windows系统下安装ubuntu双系统(转)

    在学习linux的过程中,ubuntu无疑是初学者的最佳选择. 下面来列举给Windows系统安装ubuntu双系统的三种方法. 一.虚拟机安装(不推荐) 使用工具:Vmware 如果不是因为迫不得已 ...

  4. Namespace declaration statement has to be the very first

    Namespace declaration statement has to be the very first statement in the script 我新建了一个Homea模块,并把Hom ...

  5. zepto源码研究 - ajax.js(请求过程中的各个事件分析)

    简要:ajax请求具有能够触发各类事件的功能,包括:触发全局事件,请求发送前事件,请求开始事件,请求结束事件等等,贯穿整个ajax请求过程,这是非常有用的,我们可以利用这些事件来做一些非常有意思的事情 ...

  6. JavaWeb学习笔记之JSP(二)

    1.1.  JSP的指令: 1.   什么是JSP 指令? JSP 指令: JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出, 而只是告诉引擎如何处理JSP页面中的 ...

  7. C/C++默认浮点型

    代码: #include <iostream> #include <cstdio> using namespace std; void test(int a){ cout< ...

  8. Jq 遍历 全选 全不选 反选

    //全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked') ...

  9. Memcached 分布式缓存系统部署与调试

    Memcache 分布式缓存系统部署与调试 工作机制:通过在内存中开辟一块区域来维持一个大的hash表来加快页面访问速度,和数据库是独立的;目前主要用来缓存数据库的数据;存放在内存的数据通过LRU算法 ...

  10. DeDe缩略图路径的修改

    今天在使用dedecms的时候,遇到的一点小问题,移站的时候缩略图不显示.然后就去百度搜了一下,出来的都是千篇一律. 因为一个网站里面缩略图太多,手动比较慢而已费时间,  俗话说的好“时间就是生命” ...