流式布局笔记和源码

⑴ android怎么实现不同类型的流式布局

Android中常见的热门标签的流式布局的实现
http://blog.csdn.net/jdsjlzx/article/details/45042081?ref=myread

⑵ 什么是流式布局，救急！！！！

JAVA 中panel的默认布局就是流式布局，类就是FlowLayout.所谓流式布局意思是从左到右对该容器里面的控件进行布局，当一行不能容纳时候自动换行。
该布局是从左到右，然后从上到下。JFrame的默认布局就是BorderLayout.这个布局跟流式布局不同。分为中南西北中，五种控件位置摆放方式。
可以通过setLayout(new FlowLayout())方式把布局管理器设置为流式布局

⑶ 流式布局是什么意思

流式布局就像在学校食堂排长队打饭一样，来一个就跟在后面；
网式布局就像教室里已经排好的座位一样，一行一列地固定了你的位置；

⑷ css的固定，流式，弹性布局

都有的，可以根据项目的需求不通过产生变化。
不过与我而言更喜欢流式布局，在适应屏幕上更好，用户体验也好，像网络阿里用的大多是混合型

⑸ 静态、自适应、流式、响应式四种网页布局有什么区别

1、灵活性不同：

静态布局：毫无灵活性可言，目前已逐渐被淘汰。

自适应布局：静态布局的升级版，因其强大的灵活性，已逐渐成为高端网页的代名词。

流式布局：灵活性更高，可适用于其他三种网站布局。

响应式布局：自适应布局的升级版，响应式网站要普遍适应市面上各类屏幕，开发难度和工作量都是非常大的，开发价格自然比普通网站高。

2、设计方法不同：

静态布局：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分。

自适应布局：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。

流式布局：使用百分比定义宽度，高度大都是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。

响应式布局：媒体查询+流式布局。使用@media媒体查询和网格系统配合相对布局单位进行布局，就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

(5)流式布局笔记和源码扩展阅读：

静态、自适应、流式、响应式四种网页布局的特点概括

1、静态布局：即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。

2、流式布局：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

3、自适应布局：分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。

4、响应式布局：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。

⑹ div中的流式布局是那个属性啊

让所有的div都浮动起来,就是一个流式布局.
所有inline属性的元素都是流式布局, 浮动后的元素都是inline-block属性的,也一样...

⑺ 前端常见布局方式

常见的布局方式

常见的布局这么几种单列水平居中布局, 一列定宽一列自适应布局, 两列定宽一列自适应布局, 两侧定宽中间自适应三列布局。

一列定宽一列自适应

定位布局

左边的宽度写死，右边盒子使用定位拉伸法实现，left等于左边盒子的宽度，right等于0

.left-box{ width:200px;   }

.right-box{  position:absolute; left:200px; right:0; }

或者左边的定位写死宽度，右边的写padding-left等于左边的宽度（常用一点）

.left-box{ width:200px;  position: fixed; height:100%; }

.right-box{  padding-left:200px;}

浮动布局

左边的宽度写死并且浮动，右边盒子写overflow:hidden;利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响

.left-box {

        width: 200px;

        height: 150px;

        float: left;

        background: #f22;

}

.right-box {

        height: 200px;

        overflow: hidden;

        background: #cff;

 }

两列定宽一列自适应上面的布局方式同样适用

常见的三列布局一般使用圣杯布局和双飞翼布局。

圣杯布局和双飞翼布局

两者都属于三列布局，是一种很常见的页面布局方式，

三列一般分别是子列、主列和附加列，其中子列一般是居左的导航，且宽度固定；主列是居中的主要内容，宽度自适应；附加列一般是广告等额外信息，居右且宽度固定。

圣杯布局

<div class="container"> 

    <div class="main"></div> 

    <div class="sub"></div> 

    <div class="extra"></div> 

</div>

.container { 

    padding-left: 210px;

    padding-right: 190px;

}

.main { 

    float: left; 

    width: 100%;

    height: 300px;

}

.sub { 

    position: relative; 

    left: -210px;

    float: left; 

    width: 200px;

    height: 300px;

    margin-left: -100%;

}

.extra { 

    position: relative; 

    right: -190px;

    float: left; 

    width: 180px;

    height: 300px;

    margin-left: -180px;

}

双飞翼布局

<div class="main-wrapper"> 

    <div class="main"></div> 

</div>

<div class="sub"></div> 

<div class="extra"></div> 

.main-wrapper { 

    float: left; 

    width: 100%;

}

.main { 

    height: 300px;

    margin-left: 210px;

    margin-right: 190px;

    background-color: rgba(255, 0, 0, .5); 

}

.sub { 

    float: left; 

    width: 200px;

    height: 300px;

    margin-left: -100%;

    background-color: rgba(0, 255, 0, .5); 

}

.extra { 

    float: left; 

    width: 180px;

    height: 300px;

    margin-left: -180px;

    background-color: rgba(0, 0, 255, .5); 

}

俩种布局方式都是把主列放在文档流最前面，使主列优先加载。

两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。

两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左、右外边距定位。

其他的话还有

flex布局

Flexbox又叫弹性盒模型。它可以简单使用一个元素居中（包括水平垂直居中），可以让扩大和收缩元素来填充容器的可利用空间，可以改变源码顺序独立布局，以及还有其他的一些功能。

Flex布局是我最喜欢的布局，合理使用它能够大大减少布局方面的工作, 例如以上列举的三列布局也可以使用flex轻松实现。此外在移动端使用flex也比较常见。

响应式布局

网页可以自动识别设备屏幕宽度，根据不同的宽度采用不同的CSS的样式，从而达到兼容各种设备的效果。

响应式布局使用媒体查询(CSS3 Media Queries), 根据不同屏幕分辨率采用不同CSS规则

流式布局

流式布常见的就是bootstrap了它提供了一套响应式，移动优先的流式栅格系统(grid system)，将屏幕分成12列来实现响应式的。它的实现原理非常简单，Media Query加上float布局