精华内容
下载资源
问答
  • CSS流体布局
    千次阅读
    2018-09-07 16:44:14

    流体特性

    图片宽度一直width:100%,依次点击3个按钮,结果随着margin, padding, border的出现,其可用宽度自动跟着减小,形成了自适应效果。就像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性。实例:flow.html

    流体布局

    稍微做一个调整,div距离容器左侧margin 150像素,里面的图片同样100%自适应内容区域。实例:flow-left.html
    图片右下角有两道斜杠,我们可以resize拉伸(现代浏览器,且非移动访问),会发现,左侧永远150像素留白,而图片随着容器宽度变化而自适应变化了。
    此时,我们需要好好利用左侧150像素的留白间距,岂不是就可以实现两栏自适应效果!
    实例效果:flow-left1.html
    当然,你可以左侧有多个浮动,或者左浮动+右浮动。于是,我们不仅可以实现两栏自适应效果,多栏自适应效果也不在话下。然而,利用块状元素流体特性实现的自适应布局有个不足,就是,我们需要知道浮动或绝对定位内容的尺寸。然后,流体内容才能有对应的margin或padding或border值进行位置修正。于是,问题来了,我们没法单纯使用一个公用的类名,类似.clearfix这样,整站通用。因为不同自适应场景的留白距离是不一样的。

    更多相关内容
  • 针对移动端布局适配,可以采用 流体布局 、弹性盒布局、rem布局的方式,一个页面的布局可以综合运用这三种方式完成最终的布局。 1、流体布局 宽度用百分比,高度用固定值的布局方式,宽度通过百分比来适配不同宽度...

    针对移动端布局适配,可以采用 流体布局弹性盒布局rem布局的方式,一个页面的布局可以综合运用这三种方式完成最终的布局。

    1、流体布局

    宽度用百分比,高度用固定值的布局方式,宽度通过百分比来适配不同宽度的屏幕。

    优缺点
      直接将宽度写成百分比,高度写固定值,这种布局方式就比较简单,但是对于宽屏和窄屏,宽度的百分比是相同的,得到的最终宽度是不同的,而高度是固定值,这就让网页在宽屏上,感觉整个网页在横向上被拉伸的,体验不是很好,另外,用百分比的方式不能解决所有布局情况,还需要结合后面的响应式布局的技巧才行。

    1. 左右固定,中间收缩
      父元素设置:position:relative;
      子元素设置:position:absolute;
            左、右元素设置固定宽高,中间元素只设置高。
    2. 一端固定,一端收缩
      父元素设置:position:relative;
      子元素设置:position:absolute;
            一端设置固定宽高,一端只设置高。
    3. 左右设置固定粗细边框
    • 法一 box-sizing: border-box;
      将盒子设置成border-box,这个时候,width和height的尺寸就是盒子的真实尺寸, 盒子加边框和内边距都不会改变盒子尺寸。
    • 法二 width: calc(25% - 2px);
      使用calc属性,将宽度尺寸设置为动态计算后的尺寸(盒子宽度=width-边框宽度),这样就可以完成适配。



    2、弹性盒布局

    通过css3新增的一些辅助布局的样式属性(包括弹性盒模型容器属性和弹性盒模型子元素属性)来制作布局的方式。

    优缺点
      弹性盒模型布局比较适合有多个有相似布局特性的子元素的布局情况,不适合个性化的布局情况,比如类似于定位的布局效果,用弹性盒就不好实现,所以弹性盒布局一般作为页面局部的布局方式而不作为页面整体的布局方式。

    • 容器属性
      基于display:flex,包括flex-direction、flex-wrap、align-items、align-content、justify-content。
    1. display:flex;
      使盒内的子元素具有相同的宽度,并无视子元素的float(浮动)、clear(不允许浮动)、vertical-align(垂直对齐方式)设置。
      display:flex;
    2. flex-direction;  设置子元素的排列方式
      参数:row(默认)  从左往右排
         row-reverse   从右往左排
         column     从上往下排
         column-reverse 从下往上排
      如设置从左往右排:display:flex;
               flex-direction:row;
      flex-direction
    3. flex-wrap  设置子元素是否换行
      参数:nowrap(默认)  不换行
         wrap        换行
         wrap-reverse    换行,子元素从底部往上排
      如设置换行:display:flex;
            flex-wrap:wrap;
      flex-wrap
    4. align-items  设置子元素每一行在垂直方向的对齐方式,主要针对多行排列
      参数:stretch(默认)   会纵向拉伸子元素来适配容器
         flex-start       子元素不拉伸,每行从顶部向下排,行间距相同
         flex-end        子元素不拉伸,每行从底部向上排,行间距相同
         center        子元素不拉伸,每行均分整体高度,第一行顶部和最后一行底部的高度是中间的一半
         baseline        子元素不拉伸,每行子元素按照基线方式(文字底部)对齐
      如设置每行均分高度:display:flex;
                align-items:center;
      align-items
    5. align-content  设置子元素整体在垂直方向的对齐方式,主要针对多行排列
      参数:stretch       会纵向拉伸子元素来适配容器
         flex-start       子元素整体靠容器顶部对齐
         flex-end        子元素整体靠容器底部对齐
         center        子元素整体垂直居中对齐
         space-between    子元素第一行靠顶部,最后一行靠底部,中间行距均分
         space-around    每行均分行距,上下两端间距是中间间距的一半
      如设置元素整体垂直居中:display:flex;
                  align-content:center;
      align-content
    6. justify-content  设置子元素整体在水平方向的对齐方式
      参数:flex-start        缺省设置,整体靠左对齐
         flex-end         整体靠右对齐
         center         整体水平居中对齐
         space-between     左右两端靠边,中间均分
         space-around     整体水平均分排列,左右两端间距是中间间距的一半
         space-evenly      整体水平均分排列,左右两端间距和中间间距相同
      如设置元素整体水平居中:display:flex;
                  justify-content:center;
      justify-content
    • 子元素属性
      在父元素设置的基础上,使用flex-grow
    1. flex-grow;
      设置子元素的横向放大比例,取值为≥0的整数,如果父元素横向有剩余空间,子元素会横向放大。
      flex-grow
    2. flex-shrink;
      设置子元素的横向缩小比例,取值为≥0的整数,缩小比例,如果子元素个数不多,横向可以排列完,此属性不起作用,如果子元素有多个,横向需要缩放才能排列完,子元素会按照这个属性定义的整数倍数来缩小。
      flex-shrink
    3. flex-basis;
      缺省值为auto,设置子元素初始的宽度,功能和width相同,如果width和flex-basis都设置,宽度以flex-basis设置的为准。
    4. flex
      flex-grow:0;
      flex-shrink:0;
      flex-basis:auto;
      可缩写为flex:0 0 auto;



    3、rem布局

    rem是一种相对长度单位,通过这个长度单位可以实现元素宽高等比例缩放,从而完成不同宽度屏幕的适配。rem是元素相对于html标签文字的大小,所以我们改变html文字的大小,就可以改变所有用rem设置的尺寸的大小。

    <!DOCTYPE html>
    <!-- 在html标签中直接设置文字大小,然后通过js根据屏幕宽度动态改变它的大小 -->
    <html lang="en" style="font-size:20px">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <!-- 引入外部js动态改变html文字大小-->
        <script type="text/javascript" src="js/set_root.js"></script>
        <style>
            /* 使用rem一般是在html标签中设置文字大小 */
            /* html{
                font-size:14px;
            } */
            .box{
                font-size:16px;
                /* 10rem 相当于 10*20px= 200px */
                width:10rem;
                height:10rem;
                background-color: hotpink;
            }
        </style>
    </head>
    <body>
        <div class="box">1</div>
    </body>
    </html>
    
    引入的js代码为:
    ;(function(){
    	var calc = function(){
    		var docElement = document.documentElement;//访问整个节点树
    		var clientWidthValue = docElement.clientWidth;//获取所有元素的宽度
    		docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';//重新计算font-size
    	}
    	calc();
    	window.addEventListener('resize',calc);
    })();
    



    展开全文
  • 流体布局: <!-- html 内容 --> <div class="container"> <div class="left">left</div> <div class="right">right</div> <div class="middle">middle</div>...

    在这里插入图片描述
    流体布局:

    <!-- html 内容 -->
    <div class="container">
    	 <div class="left">left</div>
    	 <div class="right">right</div>
    	 <div class="middle">middle</div>
    </div>
    
    <!-- css 内容 -->
    .left{
    		width: 300px;
    		height: 100px;
    		background: yellow;
    		float: left;
    	}
    	
    .middle{
    		 margin-left: 300px;
    		 margin-right: 300px;
    		 height: 100px;
    		 background: pink;
    	}
    	
    .right{
    		 width: 300px;
    		 height: 100px;
    		 background: blue;
    		 float: right;
    	}
    

    圣杯布局:

    	<!-- html 内容 -->
    	 <div class="container">
    	    <div class="middle">middle</div>
    	    <div class="left">left</div>
    	    <div class="right">right</div>
    	 </div> 
    
    <!-- css 内容 -->
    .container {
    		    padding-left: 200px;  
    		    padding-right: 150px;  
    		    overflow: hidden;
    		  }
    		 
    .middle {
    		width: 100%;
    		height: 300px;
    		background: pink;
    		float: left;
    		position: relative;
    		}
    		 
    .left {
    		width: 200px;
    		height: 300px;
    		right: 200px;          
    		margin-left: -100%;
    		background: yellow;
    		float: left;
    		position: relative;
    		}
    		 
    .right {
    		width: 150px;
    		height: 300px;		   
    		margin-left: -150px;  
    		right: -150px;
    		background: blue;
    		float: left;
    		position: relative;
    		} 
    

    双飞翼布局:

    <!-- html 内容 -->
     <div class="center">
    	<div class="middle">middle</div>
     </div>
    <div class="left">left</div>
    <div class="right">right</div> 
    
    /* css 内容 */
    .center{
    		width: 100%;
    		height: 100px;
    		float: left;
    		background-color: pink;
    	}
    		
    .left{
    		width: 300px;
    		height: 100px;
    		float: left;
    		background-color: yellow;
    		margin-left: -100%;
    	}
    		
    .right{
    		width: 300px;
    		height: 100px;
    		float: left;
    		background-color: blue;
    		margin-left: -300px;
    	}
    		
    .middle{
    		padding: 0 300px 0 300px;
    		height: 100px;
    	} 
    
    展开全文
  • .left { float: left; width: 100px; height: 200px; background: red; } .right { float: right; width: 200px; height: 200px; background: blue; } .main { margin-left: 120px;... }
    .left {
    		float: left;
    		width: 100px;
    		height: 200px;
    		background: red;
    	}
    	.right {
    		float: right;
    		width: 200px;
    		height: 200px;
    		background: blue;
    	}
    	.main {
    		margin-left: 120px;
    		margin-right: 220px;
    		height: 200px;
    		background: green;
    	}
    
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
    
    
    展开全文
  • 一个响应式网格框架,支持自动调整大小和混合固定/流体布局。 华夫饼从根本上是基于测量单位的概念,它将每个流体和固定元素缩放到“世界空间值”。 如果测量不是通过 natre、fluid 进行的,那么它可能会缩放到这...
  • 两栏布局之流体布局两栏布局之冻结布局两栏布局之凝胶布局========================================两栏布局之流体布局主内容动态拓展,边栏浮动。边栏动态拓展,主内容浮动。====================================...
  • 流体布局

    2018-09-29 14:02:00
    什么叫流体布局? 简单的来说,就是网页缩小和放大时网页布局会随着浏览器的大小而改变!由于页面中的宽度值都是百分数,所以拉伸、缩小浏览器的大小,布局的宽度会随之变化儿不会出现横向滚动条。这种布局叫做流体...
  • 国外关于使用负边距创建这类布局的技术文档,我看到的最早是04年 Ryan Brill 发表在 A List Apart 上的 《Creating Liquid Layouts with Negative Margins》 (04年 - -!国内刚小部分人开始关注WEB标准化),本文亦可...
  • 1.流体布局: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>流体布局</title> <style type="text/css"> .left { float: left; width: 100px; ...
  • 关于web页面布局,首先简单了解一下固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)和相应的使用技巧? 固定布局(fixed layout) 固定布局,例如豆瓣网...
  • HTML流体布局

    2021-12-27 09:19:08
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div居中 在线演示 www.divcss5.com</title> <link rel="stylesheet" href="css/index....div style="text-...
  • 基于swft3.0的 水平横向排布流体布局
  • CSS流体布局详解

    千次阅读 2016-08-30 13:50:25
    占位
  • 流体布局: 什么是流体布局? 流体是采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式向水流一样,一部分一部分的加载 移动端有两种设计方式: 全屏设计,在 PC 端和 PAD 平板也...
  • 流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线无法用百分比,可以使用样式中的计算函数 calc() 来设置宽度,或者使用 box-sizing 属性将盒...
  • 流体布局
  • 当然,在使用流体布局时,不建议使用calc函数,建议使用流体布局的第二种方法: box-sizing 1、content-box 默认的盒子尺寸计算方式 2、border-box 置盒子的尺寸计算方式为从边框开始,盒子的尺寸,边框和内填充算...
  • 一、流体布局 流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值。流体布局中,元素的边线无法用百分比,可以使用样式中的计算函数 calc() 来设置宽度,或者使用 box-sizing 属性将盒子设置...
  • 之前写的两个页面都是PC端固定布局,现在进行对页面改进成移动端流体布局进行尝试。 一、首先先了解几个规范:在标签中加入 窗口设定:name="viewport" 页面大小屏幕等宽:width=device-width 初始缩放比例...
  • Srcset绝对是一个很好的方法来解决这个问题。基本上,您可以将多幅图像保存为多种尺寸,通常情况下,您希望图像的宽度尽可能与元素的宽度相同。然后,您为每个屏幕宽度设置要使用的图像。srcset="/img-2400.jpg 2400...
  • 移动端web开发布局简单介绍(二)之 流体布局 什么是流体布局? 流式布局,也就是百分比布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受 固定像素的限制,内容向两侧填充。 为了保护内容在合理的...
  • 流体布局(一)jQuery插件:jQuery.Waterfall.js, js的计算方法jQuery1.4.4,IE8.0,opera,firefox,chrome测试通过围观请点击:http://3vke.com下载地址:Waterfall on github1.使用方法:①.加载jQuery库;②.加载jQuery....
  • 运用多列布局做出的效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} ...
  • 一、流式布局(百分比布局) 使用非固定像素来定义网页内容,也就是百分比布局,(特别适合于电商网站的布局)通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。这样的...
  • 浮动和流体布局 十七、浮动和文档流 1. 默认文档流 - 流就是文档布局的自身特性,而定位机制可能就会打破原有流的特性 - 默认文档流,画格子,内联和块级 - 内联元素,从左向右排列 - 块级元素,从上向下排列 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,941
精华内容 1,976
关键字:

流体布局