弹性盒子模型使用手艺【上海时时乐走势图官网

  布局思路

    一般我们都会把一个页面分为三部分,我们把最上面的设备监控是头部

    内容部分为中间的那一大堆

    底部就是下面的三个按钮的那一些

  布局思路大概是下面的代码那个样子的,中间的部分肯定是要自适应的了,直接把剩下的高度都占满。

  

#box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header{
    height: 100px;
}
.content{
    flex-grow: 1;   // 这里的这个属性  因为之前用这个用的少,所以没有想到,这个属性是定义项目放大比例,默认是0,将他规定一下,然后就会把剩余的空间都给占掉
}
.footer{
    height: 200px;
}


<div id="box">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

 

  重点的是中间的那一部分,因为中间部分下面的表格部分超出之后要出现滚动条,所以就是表格内容的高度的父元素的高度我拿不准,最开始直接用的是rem给写死了,后来发现有很多弊端,因为是第一次写这样的页面所以讲下面的那个没有考虑到的属性。

  中间的部分分为两部分,黄色的一部分,六个框框,用的弹性盒子,把他们的宽度写成百分比平分,三个分一行,用的33.3%,

  大概代码就是下面的样子的。

  

ul{
    display: flex;
    flex-wrap: wrap;
}
ul li{
    width: 33.3%;
    height: xxx;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

  下面的那个表格要超出出现滚动条,刚才说了我第一次布局的过程中把他父元素的高度给写死了,然后在自适应的过程中出现了一些问题,可以把中间的部分也写成一个弹性盒子,然后上面的那个八个黄色框框的父元素高度给定住,然后下面的部分用到那个flex-grow属性,直接把下面的那一些东西都给占住。

  大概和最开始头部中间部分底部的布局差不多。

  上海时时乐走势图官网 1

 

  根节点指的是html标签,设置html标签的大小,其他的元素相关尺寸设置用rem,这样,所有元素都有了统一的参照标准,改变html文字的大小,就会改变所有元素用rem设置的尺寸大小。

 上海时时乐走势图官网 2上海时时乐走势图官网 3

对文档流的影响

  直接上布局的样子吧。

PC页面在手机缩放的原因:

1、iphone默认的viewport980px ,user-scalable=yes
2、那么initial-scale在320px的浏览器上就是320/980 为0.33333

为什么是供css读取的高度?

  很早之前就学过了弹性盒子,就感觉自己什么都学会了,没想到到了实际的运用过程中,其实并不是那么一回事,自己根本想不到会用到哪些属性,该怎么使用。

 

5,父级div定义 overflow:auto

  页面二

  上海时时乐走势图官网 4

 

  还是只看中间的部分吧

  中间的部分是左右划分的,所以也可以使用弹性盒子,左右的宽度用百分比规定好, 30%  70% 然后就可以横排显示,注意写好他们的高度

  右边部分又分为上下两部分

上海时时乐走势图官网 5

  这里是右边上半部分的布局,写的好多了,所以也就没有考虑其他的东西了,左右部分大概就两种写法了我

  第一种

    左边用rem固定死, 右边使用flex-grow 分配多余的剩余的空间。

  第二种

    两部分都使用百分比

   里面的小东西在使用自己的方式写就好了,右边的绿色的也可以使用弹性盒子。

参数说明:

width:宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale:初始缩放比,大于0的数字
maximum-scale:最大缩放比
minimum-scale:最小缩放比
user-scalable:用户是否可以缩放,yes或no(1或0)

<!--viewport只有移动端才能识别-->
<!--设置宽度  设置成和设备一样的宽度(width=device-width)-->
<!--设置默认的缩放比  initial-scale =1.0-->
<!--设置是否允许用户自行缩放  user-scalable   no yes-->

缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。

    页面一

  上海时时乐走势图官网 6

  比如说上面的样式,你们可能有别的更好的布局思路,可以分享一下的哈。 我就说说我猜到的坑,因为之前根本就没有这样去写过,所以有一些细节的部分根本没有考虑过,后来写过一次之后,在看到这种布局就变得容易多了。

1、全适配:流体布局 响应式布局

当元素不存在width属性或者(width:auto)的时候,负margin会增加元素的宽度,看下下面的例子

  这一次就只把我使用过程中遇到的一些坑来总结一下。

2、box-sizing

  a、content-box 默认的盒子尺寸计算方式。

  b、border-box 置盒子的尺寸计算方式为从边框开始,盒子的尺寸,边框和内填充算在盒子尺寸内

上海时时乐走势图官网 7

可以看出3个盒子都向左移动25px;

页面三

  上海时时乐走势图官网 8

  也是只介绍一下中间的部分吧。分为左右部分,然后内容超出之后也要出现滚动条。

  这一种的头部,内容部分,底部用到的还是最开始讲的那种,中间部分占掉剩余下来的空间。

  中间的部分分为左右两部分,高度的话因为使用了flex-grow这个东西,所以把黄色盒子应该还有一个父元素和他一样大,不说了,上代码吧

  这里大概模拟一下中间的代码

上海时时乐走势图官网 9

这个就是中间的所有的东西,大概就是content的高度是中间部分的实际高度, 左部分 div.left部分的东西的高度写成100%,适应到中间部分的所有高度,然后设置超出产生滚动条  overflow:scroll,里面的ul就直接那样就可以了,把ul设置成弹性盒子,然后里面的东西多的话就会超过 div.left的高度,然后就会产生滚动条了,同理 右边的大概也是这样的。

  感觉今天会加班,然后头有点疼就想写点东西,没想到直接可以下班了~~~

  坚持写完了,如果你看了我的文章学到了东西我会非常高兴的,回家咯 嘿嘿

 

2、rem指的是参照根节点的文字大小。

建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

  使用弹性盒子的情况还是需要去看布局的,这个属性使用起来非常爽,不需要考虑那么多,直接几行代码就完成了之前浮动布局要完成的情况,而且自适应页面的能力也要强出好多,不需要自己再去调整好久的样式像素。

响应式布局

  响应式布局就是使用媒体查询的方式,通过查询浏览器的宽度,不同的宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而实现响应式布局,响应式布局的页面可以适配多种终端屏幕(pc、平板、手机)。

相应布局的伪代码如下:

上海时时乐走势图官网 10

所以如果你使用负margin上移一个元素,所有跟随的元素都会被上移。

移动端页面布局

4,父级div定义 overflow:hidden

c、弹性盒模型布局

缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。

设置方法如下:

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

1、流体布局

二、Viewport视口

  视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用meta标签,name="viewport"来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。

  在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可以设置高度宽度,可以按比例放大缩小,而且能设置是否允许用户自行缩放。

建议:推荐使用,建议定义公共类,以减少CSS代码。

 cssrem安装:cssrem插件可以动态地将px尺寸换算成rem尺寸

  下载本项目,比如:git clone 进入packages目录:Sublime  Text-》Preferences-》Browse  Packages  复制下载的cssrem目录到刚才的packages目录里。重启Sublime  Text。

  配置参数  参数配置文件:Sublime  Text-》Preferences-》Package  Settings-》cssrem 里面有个px_to_rem (意思是px转rem的单位比例,默认为40)。max_rem_fraction_length(px转rem的小数部分最大的长度。默认为6)。availiable_file_types 启用此插件的文件类型。默认为:[".css",".less","sass",".html"]。

上海时时乐走势图官网 11

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度

三、PC及移动端页面适配方法

设备有多种不同的分辨率,页面适配方案有如下几种:

原理:将div属性变成表格

一、移动端app分类

x需要考虑浏览器的兼容性

总结:

用meta标签把viewport的宽度设为device-width,同时initial-scale=1.user-scale=0就构建了一个标准的移动web页面


2、条目属性

  同时设置flex-grow和flex-shrink以及flex-basis 如:flex:none | <'flex-grow' ><'flex-shrink'>'?||<'flex-basis'>

  表示当父元素又多余的空间时,这些空间在不同子元素质检的分配比例。flex-grow:number

上海时时乐走势图官网 12上海时时乐走势图官网 13上海时时乐走势图官网 14

  当父元素的空间不足时,各个子元素的尺寸缩小的比例。flex-shrink:number

上海时时乐走势图官网 15上海时时乐走势图官网 16

  用来确定弹性条目的初始主轴尺寸。flex-basis:length|precentage|auto|content

  覆写父元素指定的对齐方式。align-self:auto | flex-start | flex-end |center|baseline|stretch

上海时时乐走势图官网 17上海时时乐走势图官网 18

  改变条目在容器中的出现顺序。order:integer

 上海时时乐走势图官网 19上海时时乐走势图官网 20

那么试了之后上结果,

a、流体布局

  就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线(border)无法用百分比,可以使用样式中的计算函数calc()来设置宽度,或者使用box-sizing属性将盒子设置为边线计算盒子尺寸。

简单实用,并且主要内容优先加载

1、Native App原生app手机应用程序

  使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是object-C

**对于自身的影响

1、em单位是参照元素自身的文字大小来设置尺寸

上海时时乐走势图官网 21上海时时乐走势图官网 22

优点:简单、代码少、浏览器支持好、不容易出现怪问题

使用弹性盒模型做菜单

上海时时乐走势图官网 23

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>弹性盒模型的应用</title>
 6     <link rel="stylesheet" href="../css/reset.css">
 7     <style>
 8         .menu_con{
 9             width:960px;
10             margin:20px auto;
11             display: flex;
12         }
13         .logo{
14             width:80px;
15             height:60px;
16             background:gold;
17         }
18         .menu{
19             background: #c3eaff;
20             flex-grow: 1;
21             display: flex;
22             align-content: space-between;
23             /*使子元素垂直居中*/
24             align-items: center;
25             overflow: hidden;
26         }
27         .menu li{
28             text-align: center;
29             /*每个li均分剩余宽度*/
30             flex-grow: 1;
31             border-left:1px solid #ccc;
32             margin-left:-1px;
33         }
34         /*
35             或者是给父元素加overflow:hidden,同时给子元素设置margin-left为负值来实现边框合并
36             可以使用这种方法来去掉第一个li的左边距
37             .menu li:nth-child(1){
38              border-left: 0;
39             }
40         */
41         menu li a{
42             color:#666;
43         }
44         @media (max-width:960px){
45             .menu_con{
46                 width:100%;
47             }
48         }
49     </style>
50 </head>
51 <body>
52     <div class="menu_con">
53         <div class="logo"></div>
54         <ul class="menu">
55             <li><a href="javascript:void(0);">首页</a></li>
56             <li><a href="javascript:void(0);">新闻动态</a></li>
57             <li><a href="javascript:void(0);">时事热点</a></li>
58             <li><a href="javascript:void(0);">娱乐新闻</a></li>
59             <li><a href="javascript:void(0);">关于我们</a></li>
60         </ul>
61     </div>
62 </body>
63 </html>

 

负margin会改变浮动元素的显示位置,即使我的元素写在DOM的后面,我也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的,都是利用这个原理实现的。(下文有详细)

2、移动端适配:

  使用百分比自适应布局(流式布局)同时需要对移动端的viewport视口进行设置,就可以达到适配的目的

  a、流体布局 少量响应式

  b、基于rem的布局

  c、弹性合模型

6、table布局

1、容器属性 display:flex  声明使用弹性盒布局(全部都是在父元素上设置)

使用display:flex相对于把子元素变为行内块元素,并且之间不会产生间隙。

上海时时乐走势图官网 24上海时时乐走势图官网 25上海时时乐走势图官网 26上海时时乐走势图官网 27

  确定子元素排列的方向: flex-direction:row | row-reverse|column|column-reserve

  a、 flex-direction:row 默认子元素水平靠左排列

上海时时乐走势图官网 28上海时时乐走势图官网 29

 b、 flex-direction:row-reverse  子元素靠右倒序排列,类似于右浮动

上海时时乐走势图官网 30上海时时乐走势图官网 31

 c、 flex-direction:column; 竖排

 上海时时乐走势图官网 32上海时时乐走势图官网 33

 d、 flex-direction:column-reverse; 倒序竖排

 上海时时乐走势图官网 34上海时时乐走势图官网 35

  元素超过父容器尺寸时是否换行: flex-wrap:nowrap|wrap|wrap-reverse

  a、flex-wrap:nowrap; 子元素宽度超过父级宽度时,默认不换行  

上海时时乐走势图官网 36上海时时乐走势图官网 37

b、flex-wrap:wrap; 子元素宽度超过父级宽度时,换行 

 上海时时乐走势图官网 38上海时时乐走势图官网 39

c、flex-wrap:wrap-reserve; 子元素宽度超过父级宽度时,倒序换行 

 上海时时乐走势图官网 40上海时时乐走势图官网 41

    同时设置flex-direction | flex-wrap如: flex-flow:flex-direction | flex-wrap  flex-flow:row  wrap;**

**  子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的分布方式:**

**  justify-content:flex-start | flex-end | center | space-between | space-around**

**  a、justify-content:flex-start  整体子元素靠左**

上海时时乐走势图官网 42上海时时乐走势图官网 43

**  b、justify-content:flex-end  整体子元素靠右**

 上海时时乐走势图官网 44上海时时乐走势图官网 45

**c、justify-content:center  整体子元素居中**

 上海时时乐走势图官网 46上海时时乐走势图官网 47

**d、justify-content:space-between  第一个子元素靠左顶格,最后一个子元素靠右顶格,中间子元素均分距离**

 上海时时乐走势图官网 48上海时时乐走势图官网 49

**e、justify-content:space-around  第一个子元素靠左的间距和最后一个子元素靠右的间距是中间子元素间距的一半,中间的元素等分间距。**

 上海时时乐走势图官网 50上海时时乐走势图官网 51

  子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的垂直方向的分布方式:align-items:flex-start | flex-end | center | baseline | stretch

**  a、align-items:flex-start  整体垂直靠上排列**

**上海时时乐走势图官网 52上海时时乐走势图官网 53**

**b、align-items:flex-end  整体垂直靠下排列**

 上海时时乐走势图官网 54上海时时乐走势图官网 55

**c、align-items:center  整体子元素垂直居中(也可以使用margin或padding或定位来实现)**

 上海时时乐走势图官网 56上海时时乐走势图官网 57

**d、align-items:baseline  子元素内的文字底部对齐,如果文字大小不同,会导致子元素底部不对齐**

 上海时时乐走势图官网 58上海时时乐走势图官网 59

ealign-items:stretch  如果子元素不设置高度,高度会被拉伸到和父元素高度相同(除去自身的margin)**

上海时时乐走势图官网 60上海时时乐走势图官网 61

  设置多行子元素在行方向上的对齐方式:align-content : flex-start | flex-end | center | space-between | space-between | space-around | stretch

a、align-content : flex-start  多行整体靠上排列**

**上海时时乐走势图官网 62**上海时时乐走势图官网 63**

b、align-content : flex-end 多行整体靠下排列**

**上海时时乐走势图官网 64上海时时乐走势图官网 65**

**c、align-content :center 多行整体居中排列**

**上海时时乐走势图官网 66上海时时乐走势图官网 67**

**d、align-content:space-between  第一行子元素靠上顶格,最后一行子元素靠下顶格,中间行子元素等分垂直的间距**

上海时时乐走势图官网 68上海时时乐走势图官网 69

跟双飞翼布局很像,有一些细节上的区别,相对于双飞翼布局来说,HTML结构相对简单,但是样式定义就稍微复杂点

3、Web App 基于Web的app手机应用程序

  完全使用html5页面加前端js框架开发的手机应用

建议:不推荐使用,只建议高度固定的布局时使用

2、Hybrid App 混合型app手机应用程序

  混合使用原生的程序和html5页面开发的手机应用

*************************

b、基于rem的布局

高度给出的是50,但是CSS能读到的却是高度的一半

1、calc()  可以通过计算的方式给元素加尺寸。比如:width:calc(25% - 4px);

优点:简单、代码少、浏览器支持好

缺点:主要的内容模块无法最先加载,当页面内容较多时会影响用户的体验

缺点无法设置栏间距

2、BFC三栏布局

3,父级div定义 伪类:after 和 zoom

原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。

margin-left: -25px;

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度

优点:简单、代码少、浏览器支持好

5、Flex布局

/*实现方式

4、圣杯布局

7,父级div定义 display:table

对绝对定位也是有影响的,负margin会基于其绝对定位坐标再偏移,缺点就是你必须知道这个绝对定位元素宽度的和高度才能并设置负margin值使其居中浏览器窗口,

第三个盒子margin-left:-200px时

margin为负值产生的影响

缺点:会产生新的浮动问题。

3、双飞翼布局

原理:所有代码一起浮动,就变成了一个整体优点:

建议:不推荐使用,只作了解。

优点:没有优点

缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好

/*利用的是浮动元素margin负值的应用(原理会在文章末给出),中间div最先写*/

7、绝对定位布局

建议:不推荐使用,只作了解。

box2,box3以此类推!

1,父级div定义 height

缺点:内部宽高超过父级div时,会出现滚动条。

/*缺点和流体布局的类似,主要内容无法最先加载,当页面中内容较多时会影响用户体验。因此为了解决这个问题,有了双飞翼布局*/

对文档流的影响

优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)

前段时间用到了这些东西,学习顺便整理在了一起,清楚浮动的后面的几种方法没有试,有时间再深入学习一下。

margin-left:-20px;增加了宽度

优点:简单、代码少、容易掌握

缺点:会产生新的未知问题。

2,结尾处加空div标签 clear:both

缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

建议:不推荐使用,只作了解

原理:父级div定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both

双飞翼布局使用margin负值的原理

box1自身向左移动了25px,box2又覆盖了其25px,所以我们就看到了“宽度”为50px的box1

对浮动的影响,定义三个盒子,每个盒子宽高均是100如下

那么margin-left:-50px呢?

原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度

元素如果用了margin-left:-20px;毋庸置疑的自身会向左偏移20px和定位(position:relative)有点不一样的是,在其后面的元素会补位,也就是后面的行内元素会紧贴在此元素的之后。总结,不脱离文档流不使用float的话,负margin元素是不会破坏页面的文档流。

*******************************************************************************************

八种清楚浮动的方式

左右模块各自左右浮动,并设置中间模块的margin值使中间模块宽度自适应

建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法

///简书上编辑代码真是O疼,还是上图更加更省事。( ̄ ̄)~*

若对于不确定宽度和高度可以用

/*主题内容优先加载,HTML代码结构稍微复杂点*/

*/

给三个盒子都加上margin-left:-25px;

总结:

原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题

6,父级div 也一起浮动

8,结尾处加 br标签 clear:both

建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

没有优点

本文由上海时时乐走势图发布于web前端,转载请注明出处:弹性盒子模型使用手艺【上海时时乐走势图官网

您可能还会对下面的文章感兴趣: