Web自适应布局你需要知道的所有事儿

有这样一个问题。
请说说你知道的所有web布局方式？

一般来说，有以下这些布局方法：
浮动 float:left|right
inline-block display:inline-block
flexible box display:flex
grid display:grid
绝对、相对定位 position:absolute|relative
表格
或display:table使用框架布局 bootstrap、Pure.css等
有小伙伴就要说，这也太多了吧，我应该怎么选择？
别急，下面我们就开始逐一分析各种方法在web自适应布局下的使用姿势，最后做个总结。
本文的所有例子使用了同一种三栏布局。源代码点我
 
    大尺寸 width > 1024px 
    中尺寸 768px < width < 1024px 
    小尺寸 width < 768px 
   
1. 浮动布局 float:left|right
最常用的布局方式之一，设置了float的元素脱离了文档流。需要注意在使用过浮动后，需要清除浮动，从而避免影响后面的非浮动元素。
HTML
<div class="rwd-header">Headerdiv>
<div class="rwd-content">
  <div class="rwd-content-left">Leftdiv>
  <div class="rwd-content-body">
    <div class="rwd-content-bodyTop">Top Contentdiv>
    <div class="rwd-content-bodyBottom">Bottom Contentdiv>
  div>
  <div class="rwd-content-right">Rightdiv>
div>
<div class="rwd-footer">Footerdiv>
复制代码
普通的html布局，一个header，一个footer，中间是三栏式布局。
关键css
.rwd-content-left,
.rwd-content-body,
.rwd-content-right {
  float: left;
}
复制代码
给中间的三栏都设上浮动。
.rwd-content::after {
  content: "";
  clear: both;
  display: block;
}
复制代码
清除浮动
.rwd-content-left {
  width: 20%;
  height: 200px;
}

.rwd-content-body {
  width: 60%;
}

.rwd-content-right {
  height: 300px;
  width: 20%;
}
复制代码
元素的宽度都是百分比。因为没有内容高度给死了，日常应用时多用auto，让里面的内容撑开高度。
@media查询
当@media的查询条件满足时，应用{}中的样式。
screen就是指电脑屏幕，还有print指打印页面。 MDN @media
@media做的事完全可以用javascript代替，用js添加一个class或者直接用js修改css属性。优点是浏览器全兼容，缺点就是用了js。
@media only screen and (max-width: 1024px) {
  .rwd-content-left {
    width: 30%;
  }
  .rwd-content-body {
    width: 70%;
  }
  .rwd-content-right {
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  [class*="rwd-content-"] {
    width: 100%;
  }
}
复制代码
中尺寸屏幕要把right挤下去，只要让left和content加起来等于100%，后面的东西就自动换行了。
小尺寸用了css选择器，把所有rwd-content-开头的class宽度都设成100%。
亲自试一试
2. inline-block display:inline-block
HTML
<div class="rwd-header">Headerdiv>
<div class="rwd-content"
  ><div class="rwd-content-left">Leftdiv
    ><div class="rwd-content-body"
    ><div class="rwd-content-bodyTop">Top Contentdiv
    ><div class="rwd-content-bodyBottom">Bottom Contentdiv
  >div
  ><div class="rwd-content-right">Rightdiv>
div>
<div class="rwd-footer">Footerdiv>
复制代码
html和浮动布局的一样，为了避免空白字符压缩（white space collapse）的问题，写法略有变化。
关键css
.rwd-content-left,
.rwd-content-body,
.rwd-content-right {
  display: inline-block;
  vertical-align: top;
}
复制代码
对我们这个布局，只是把float:left改成这两句。
自适应的代码也和float一样，不重复贴了。
亲自试一试
Float vs. Inline-block
两者都是很常用的布局方式。
 
     如果需要垂直居中，使用inline-block。
  
     inline-block有空白字符压缩的问题。
  
     使用float，注意要清除浮动。
  
     没有特别推荐用哪种，看个人习惯。
  
   
如何调整float或inline-block布局中元素的顺序？
比如我在小尺寸的时候，想把content放最上面，left和right都挤下去，怎么做呢？
float和inline-block布局没有纯css的方法，要用js把dom扣出来，往后面放，flexbox和grid布局都可以很好地解决这个问题。
3. flexible box display:flex
HTML
<div class="rwd-header">Headerdiv>
<div class="rwd-content">
  <div class="rwd-content-left">Leftdiv>
  <div class="rwd-content-body">
    <div class="rwd-content-bodyTop">Top Contentdiv>
    <div class="rwd-content-bodyBottom">Bottom Contentdiv>
  div>
  <div class="rwd-content-right">Rightdiv>
div>
<div class="rwd-footer">Footerdiv>
复制代码
html还是一样。
看css前先说说flex基础。
* flexbox两分钟不完全指北
flexbox布局说白了就是点菜。先想好要吃什么，然后点必选菜，最后点可选菜，爱点不点。
先想要吃什么，还是用之前的例子。header和footer不用管，需要布局一个这样的东西：
然后点必选菜，有下面几个必选菜要点：
1). flex-direction, 选水平方向从左到右，选flex-direction: row 
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
复制代码
2). flex-wrap，我们是单行布局，不要换行，选flex-wrap: nowrap
.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
复制代码
3). justify-content，如果水平方向有空间，怎么分配，选space-between
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
复制代码
4). 垂直方向怎么布局，选align-items: flex-start
.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
复制代码
5). align-content，多行布局怎么分配空间，我们是单行布局，不存在的
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
复制代码
选好这5个之后，再加上display: flex;，往flex容器上一写，就完事了。
可以偷懒的地方: 上面5种属性，第一个值是默认值，如果选了第一个，这个属性可以不用写。
最后的可选菜比较常用的是可以调整flex子项(flex item)的顺序(order)，单独改变某个子项的布局等。
详细教程点这里： flexbox中文教程^[1]A Guide to Flexbox^[2]
关键css
.rwd-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
复制代码
flex容器(container)属性如前文所说。
@media only screen and (max-width: 1024px) {
  .rwd-content {
    flex-wrap: wrap;
  }
  .rwd-content-left {
    width: 30%;
  }
  .rwd-content-body {
    width: 70%;
  }
  .rwd-content-right {
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  [class*="rwd-content-"] {
    width: 100%;
  }
}
复制代码
自适应布局时，设flex-wrap: wrap;，其他一样。
亲自试一试
Flexbox vs. Float/Inline-block
 
    如果浏览器没问题，flexbox可以替代（或者替代大多数）float和inline-block。 
    相比float，flexbox解决了垂直居中的问题。 
    相比float/inline-block，flexbox多了垂直布局的方式，可以使容器中的内容等高，还可以改变内容的顺序。 
    flexbox就像名字一样，非常灵活，同一种布局都可以用多种方式实现。 
    flexbox的缺点是需要记的属性比较多，小部分浏览器支持不好。 
   
Can I use flex ?
4. grid布局 display:grid
HTML
<div class="rwd-grid">
  <div class="rwd-header">Headerdiv>
  <div class="rwd-content-left">Leftdiv>
  <div class="rwd-content-bodyTop">Top Contentdiv>
  <div class="rwd-content-bodyBottom">Bottom Contentdiv>
  <div class="rwd-content-right">Rightdiv>
  <div class="rwd-footer">Footerdiv>
div>
复制代码
grid的特点就是为所欲为，dom的顺序无所谓，只要放在grid容器下就可以。
看css之前还是先说说grid基础。
* grid两分钟+两分钟不完全指北
2个两分钟因为一般grid有两种使用方式：
1). 网格项(grid item)起个名字，在网格容器（grid container）上定义好网格布局并且通过名字指定好所有网格项的位置。
2). 网格容器只定义布局，每个网格项在使用的时候，自行选择放到哪个(或哪几个)网格中。
不管哪种方式，只要会划线，你就掌握了grid布局。把想要的布局画出来，然后用线分割开。
横向1 ～ 7的黑线和纵向1) ～ 4)的红线都叫网格线。
网格线包围的一个或多块矩形区域叫网格区块。
第一种grid布局方式:
.rwd-grid {
  display: grid;
  grid-gap: 5px;
  width: 100%;
  grid-template-areas: "header header header"
                        "left   top    right"
                        "left   bottom right"
                        ".      bottom right"
                        ".      bottom ."
                        "footer footer footer";
  grid-template-rows: 80px 150px 50px 100px 100px 100px;
  grid-template-columns: 20% 60% 20%;
}

.rwd-header {
  grid-area: header;
}
.rwd-content-left {
  grid-area: left;
}
.rwd-content-bodyTop {
  grid-area: top;
}
.rwd-content-bodyBottom {
  grid-area: bottom;
}
.rwd-content-right {
  grid-area: right;
}
.rwd-footer {
  grid-area: footer;
}
复制代码
网格项(grid item)用grid-area属性起个名字。
网格容器(grid container)上三个主要属性要设置：
grid-template-areas: 就是一张地图，和我们划线分割的图布局一样，.表示空白。
grid-template-rows: 设置行上的高度，不设置的话为auto。除了固定数字，百分比还有fr。 grid-template-rows: repeat(3, 1fr)就是三等分的意思。
grid-template-columns: 设置列的宽度。
自适应布局就是重画地图。
@media only screen and (max-width: 1024px) {
  .rwd-grid {
    grid-template-areas: "header header"
                          "left   top"
                          "left   bottom"
                          ".      bottom"
                          "right  right"
                          "footer footer";
    grid-template-rows: 80px 150px 50px 200px 100px 100px;
    grid-template-columns: 30% 70%;
  }
}

@media only screen and (max-width: 768px) {
  .rwd-grid {
    grid-template-areas: "header"
                          "left"
                          "top"
                          "bottom"
                          "right"
                          "footer";
    grid-template-rows: 80px 200px 150px 250px 100px 100px;
    grid-template-columns: 100%;
  }
}
复制代码
亲自试一试1
第二种grid布局方式:
.rwd-grid {
  display: grid;
  grid-gap: 5px;
  margin: 5px 0;
  width: 100%;
  grid-template-rows: 80px 150px 50px repeat(3, 100px);
  grid-template-columns: 20% 60% 20%;
}
复制代码
网格容器上只要设置grid-template-rows和grid-template-columns。网格项在用的时候，自行设置需要放的地方。有很多种设置方式。
.rwd-header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
复制代码
四个属性，分别是行、列的开始和结束。这边的序号指的是网格线，参照之前图中横向的黑色网格线和纵向的红色网格线。
参照图，应该好理解。
相当于:
.rwd-header {
  grid-column: 1 ／ 4;
  grid-row: 1 ／ 2;
}
复制代码
简写成两个属性，<开始> / <结束>。
相当于:
.rwd-header {
  grid-column: 1 ／ span 3;
  grid-row: 1;
}
复制代码
span 3指的是经过了3个网格；如果网格项只跨越了1格，可以省略设置结束位置的网格线。
相当于:
.rwd-header {
  grid-area: 1 / 1 / 2 / 4;
}
复制代码
网格线上左下右的顺序，不同于margin和padding的上右下左。
当然你可以别管这么多乱七八糟的，看我自适应布局:
@media only screen and (max-width: 1024px) {
  .rwd-grid {
    grid-template-rows: 80px 150px 50px 200px 100px 100px;
    grid-template-columns: 30% 70%;
  }

  .rwd-header {
    grid-area: 1 / 1 / 2 / 3;
  }
  .rwd-content-left {
    grid-area: 2 / 1 / 4 / 2;
  }
  .rwd-content-bodyTop {
    grid-area: 2 / 2 / 3 / 3;
  }
  .rwd-content-bodyBottom {
    grid-area: 3 / 2 / 5 / 3;
  }
  .rwd-content-right {
    grid-area: 5 / 1 / 6 / 3;
  }
  .rwd-footer {
    grid-area: 6 / 1 / 7 / 3;
  }
}
复制代码
亲自试一试2
详细教程点这里： 网格中基于线的定位^[3]和这里 网格模板区域^[4]
Grid vs. Flexbox
 
    flexbox是单方向的，横向或者纵向，grid是二维的。 
    grid就是可以为所欲为，甚至和html的顺序没有关系，只要扔到grid容器里就可以。 
    grid能做到flexbox做不到的事，反之亦然。如果浏览器支持，最好结合两者使用。 
    grid适合布局大的骨架，flexbox适合布局局部。 
    grid的最大缺点是浏览器支持不是很好。 
    grid另一个缺点是，如果要往现有的布局里加一点或者删一点东西，基本就是重画了，其实也不算缺点，因为重画很快。 
    grid不适合复杂的布局，因为网格线太多我头晕。 
    grid小技巧，用chrome和firefox的调试工具查看grid容器可以看到网格，光看代码要疯。 
   
Can I use grid ?
5. 绝对、相对定位 position:absolute|relative
相当常用，特别是各种特效里都会用到。
对于自适应布局，就自己算top和left吧。
6. 表格 
 
     
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
或display:table个人认为表格布局比较适用于表格(看上去是废话，但并不是)。
如果是一般的页面布局，就不要用table了。Why not use tables for layout in HTML?^[5]
关于表格的自适应，看这里：Responsive table layout^[6]
7. 使用框架布局 bootstrap、Pure.css等
所谓万变不离其宗，用框架布局也是使用了上面所说的原理，这边就不再细说各种框架。
* IE盒模型
推荐给所有元素加上border-box;。
* {
  box-sizing: border-box;
}
复制代码
IE盒模型的宽度和高度包括了padding和border，这样对于百分比的布局比较好控制，不会出现加起来超过100%而换行的情况。
* 尽量不使用固定高度、宽度
在自适应的布局中少用或者不用固定的高度、宽度，使用百分比, auto或calc()。
* viewport
<meta name="viewport" content="width=500, initial-scale=1">
复制代码
viewport主要用于手机自适应布局，因为现在手机分辨率越来越高，web上的1px到手机上未必就是1px，用这个meta让手机的px和web的px保持一致。
具体解释在这里: viewport meta^[7]
说到这里，看完的同学应该都明白了web自适应布局常见的套路。
当碰到某个酷炫的自适应页面的时候至少不会说: 这个怎么实现的？还有这种操作？
最后总结一下:
自适应布局需要注意的事:
 
    使用IE盒模型box-sizing: border-box 
    不要用固定宽高，使用百分比, auto或calc() 
    @media是自适应布局利器 
    手机上要设置meta viewport 
    关于各种布局的选择： 在浏览器支持的情况下，页面的大框架推荐用grid布局。定好架子后，局部布局推荐用flex。 float和inline-block浏览器支持好，但各有缺点。 
   
那么有同学就要问，是不是只要学flex和grid就行了？对不起，所有都要学（就是这么可怕）。各种布局都有他们的使用场景。并且你也拦不住别人用，都需要看懂是吧。只能说要与时俱进，路漫漫其修远兮，吾将上下而求索。
参考资料
[1] Flex布局教程 - http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[2] A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
[3] CSS网格中基于线的定位 - https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid
[4] 网格模板区域 - https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
[5] Why not use tables for layout in HTML? - https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html
[6] Responsive table layout - http://allthingssmitty.com/2016/10/03/responsive-table-layout/
[7] Using the viewport meta tag to control layout on mobile browsers - https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
[8] Responsive Web Design - https://www.w3schools.com/css/css_rwd_intro.asp
[9] Can I use - https://caniuse.com/

                    
                        
                        
                             
                        
                        
                        
                            
                        
                        
                        
                            
                        
                    
                

        你可能感兴趣的:(Web自适应布局你需要知道的所有事儿)
        
            
                
                    斤斤计较的婚姻到底有多难？
                        白心之岂必有为

                        很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
                    
                    情绪觉察日记第37天
                        露露_e800

                        今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
                    
                    芦花鞋一四
                        许叶晗

                        又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
                    
                    QQ群采集助手，精准引流必备神器
                        2401_87347160
其他经验分享
                        功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
                    
                    关于沟通这件事，项目经理不需要每次都面对面进行
                        流程大师兄

                        很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
                    
                    机器学习与深度学习间关系与区别
                        ℒℴѵℯ心·动ꦿ໊ོ꫞
人工智能学习深度学习python
                        一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
                    
                    铭刻于星（四十二）
                        随风至

                        69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
                    
                    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说
                        造命者说

                        底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
                    
                    2020-01-25
                        晴岚85

                        郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
                    
                    随笔 | 仙一般的灵气
                        海思沧海

                        仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
                    
                    想家
                        爆米花机

                        也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
                    
                    【iOS】MVC设计模式
                        Magnetic_h
iosmvc设计模式objective-c学习ui
                        MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
                    
                    OC语言多界面传值五大方式
                        Magnetic_h
iosui学习objective-c开发语言
                        前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
                    
                    一百九十四章. 自相矛盾
                        巨木擎天

                        唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
                    
                    UI学习——cell的复用和自定义cell
                        Magnetic_h
ui学习
                        目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
                    
                    element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
                    
                    10月|愿你的青春不负梦想-读书笔记-01
                        Tracy的小书斋

                        本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
                    
                    C语言宏函数
                        南林yan
C语言c语言
                        一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
                    
                    地推话术，如何应对地推过程中家长的拒绝
                        校师学

                        相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
                    
                    谢谢你们，爱你们！
                        鹿游儿

                        昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
                    
                    C语言如何定义宏函数？
                        小九格物
c语言
                        在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
                    
                    微服务下功能权限与数据权限的设计与实现
                        nbsaas-boot
微服务java架构
                        在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
                    
                    理解Gunicorn：Python WSGI服务器的基石
                        范范0825
ipythonlinux运维
                        理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
                    
                    小丽成长记（四十三）
                        玲玲54321

                        小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
                    
                    学点心理知识，呵护孩子健康
                        静候花开_7090

                        昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
                    
                    2021年12月19日，春蕾教育集团团建活动感受——黄晓丹
                        黄错错加油

                        感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
                    
                    Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断
                        尐尐呅

                        结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
                    
                    c++ 的iostream 和 c++的stdio的区别和联系
                        黄卷青灯77
c++算法开发语言iostreamstdio
                        在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
                    
                    瑶池防线
                        谜影梦蝶

                        冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
                    
                    爬山后遗症
                        璃绛

                        爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
                    
                                数据采集高并发的架构应用
                                    3golden
.net
                                    问题的出发点： 
 
         最近公司为了发展需要，要扩大对用户的信息采集，每个用户的采集量估计约2W。如果用户量增加的话，将会大量照成采集量成3W倍的增长，但是又要满足日常业务需要，特别是指令要及时得到响应的频率次数远大于预期。 
      &n
                                
                                不停止 MySQL 服务增加从库的两种方式
                                    brotherlamp
linuxlinux视频linux资料linux教程linux自学
                                    现在生产环境MySQL数据库是一主一从，由于业务量访问不断增大，故再增加一台从库。前提是不能影响线上业务使用，也就是说不能重启MySQL服务，为了避免出现其他情况，选择在网站访问量低峰期时间段操作。 
 一般在线增加从库有两种方式，一种是通过mysqldump备份主库，恢复到从库，mysqldump是逻辑备份，数据量大时，备份速度会很慢，锁表的时间也会很长。另一种是通过xtrabacku
                                
                                Quartz——SimpleTrigger触发器
                                    eksliang
SimpleTriggerTriggerUtilsquartz
                                    转载请出自出处：http://eksliang.iteye.com/blog/2208166 一.概述 
SimpleTrigger触发器，当且仅需触发一次或者以固定时间间隔周期触发执行； 
  二.SimpleTrigger的构造函数 
 
 SimpleTrigger(String name, String group)：通过该构造函数指定Trigger所属组和名称； 
 Simpl
                                
                                Informatica应用（1）
                                    18289753290
sqlworkflowlookup组件Informatica
                                    1.如果要在workflow中调用shell脚本有一个command组件，在里面设置shell的路径；调度wf可以右键出现schedule，现在用的是HP的tidal调度wf的执行。 
2.designer里面的router类似于SSIS中的broadcast（多播组件）;Reset_Workflow_Var：参数重置 （比如说我这个参数初始是1在workflow跑得过程中变成了3我要在结束时还要
                                
                                python 获取图片验证码中文字
                                    酷的飞上天空
python
                                    根据现成的开源项目 http://code.google.com/p/pytesser/改写 
在window上用easy_install安装不上  看了下源码发现代码很少  于是就想自己改写一下 
  
添加支持网络图片的直接解析 
  
  
#coding:utf-8 
#import sys 
#reload(sys) 
#sys.s
                                
                                AJAX
                                    永夜-极光
Ajax
                                    1.AJAX功能:动态更新页面,减少流量消耗,减轻服务器负担 
  
2.代码结构: 
   
<html>

<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...

                                
                                创业OR读研
                                    随便小屋
创业
                                            现在研一，有种想创业的想法，不知道该不该去实施。因为对于的我情况这两者是矛盾的，可能就是鱼与熊掌不能兼得。 
       
        研一的生活刚刚过去两个月，我们学校主要的是
                                
                                需求做得好与坏直接关系着程序员生活质量
                                    aijuans
IT 生活
                                      
        这个故事还得从去年换工作的事情说起，由于自己不太喜欢第一家公司的环境我选择了换一份工作。去年九月份我入职现在的这家公司，专门从事金融业内软件的开发。十一月份我们整个项目组前往北京做现场开发，从此苦逼的日子开始了。 
       系统背景：五月份就有同事前往甲方了解需求一直到6月份，后续几个月也完
                                
                                如何定义和区分高级软件开发工程师
                                    aoyouzi

                                    在软件开发领域，高级开发工程师通常是指那些编写代码超过 3 年的人。这些人可能会被放到领导的位置，但经常会产生非常糟糕的结果。Matt Briggs 是一名高级开发工程师兼 Scrum 管理员。他认为，单纯使用年限来划分开发人员存在问题，两个同样具有 10 年开发经验的开发人员可能大不相同。近日，他发表了一篇博文，根据开发者所能发挥的作用划分软件开发工程师的成长阶段。 
　　初
                                
                                Servlet的请求与响应
                                    百合不是茶
servletget提交java处理post提交
                                      
Servlet是tomcat中的一个重要组成,也是负责客户端和服务端的中介 
  
  
1,Http的请求方式(get  ,post); 
  客户端的请求一般都会都是Servlet来接受的,在接收之前怎么来确定是那种方式提交的,以及如何反馈,Servlet中有相应的方法,  http的get方式 servlet就是都doGet(
                                
                                web.xml配置详解之listener
                                    bijian1013
javaweb.xmllistener
                                    一.定义 
<listener>  
	<listen-class>com.myapp.MyListener</listen-class>  
</listener> 
  
二.作用        该元素用来注册一个监听器类。可以收到事件什么时候发生以及用什么作为响
                                
                                Web页面性能优化（yahoo技术）
                                    Bill_chen
JavaScriptAjaxWebcssYahoo
                                    1.尽可能的减少HTTP请求数 content 
2.使用CDN server 
3.添加Expires头(或者 Cache-control) server 
4.Gzip 组件 server 
5.把CSS样式放在页面的上方。 css 
6.将脚本放在底部(包括内联的) javascript 
7.避免在CSS中使用Expressions css 
8.将javascript和css独立成外部文
                                
                                【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序
                                    bit1129
mongodb
                                    游标 
  
游标，简单的说就是一个查询结果的指针。游标作为数据库的一个对象，使用它是包括 
 
 声明 
 打开 
 循环抓去一定数目的文档直到结果集中的所有文档已经抓取完 
 关闭游标 
 
  
游标的基本用法，类似于JDBC的ResultSet(hasNext判断是否抓去完,next移动游标到下一条文档)，在获取一个文档集时，可以提供一个类似JDBC的FetchSize
                                
                                ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法
                                    白糖_
ORA-12514
                                     今天通过Oracle SQL*Plus连接远端服务器的时候提示“监听程序当前无法识别连接描述符中请求服务”，遂在网上找到了解决方案： 
 ①打开Oracle服务器安装目录\NETWORK\ADMIN\listener.ora文件，你会看到如下信息： 
  
# listener.ora Network Configuration File: D:\database\Oracle\net
                                
                                Eclipse 问题 A resource exists with a different case
                                    bozch
eclipse
                                    在使用Eclipse进行开发的时候，出现了如下的问题： 
Description Resource Path Location TypeThe project was not built due to "A resource exists with a different case: '/SeenTaoImp_zhV2/bin/seentao'.&
                                
                                编程之美-小飞的电梯调度算法
                                    bylijinnan
编程之美
                                    

public class AptElevator {

	/**
	 * 编程之美 小飞 电梯调度算法
	 * 在繁忙的时间，每次电梯从一层往上走时，我们只允许电梯停在其中的某一层。
	 * 所有乘客都从一楼上电梯，到达某层楼后，电梯听下来，所有乘客再从这里爬楼梯到自己的目的层。
	 * 在一楼时，每个乘客选择自己的目的层，电梯则自动计算出应停的楼层。
	 * 问：电梯停在哪
                                
                                SQL注入相关概念
                                    chenbowen00
sqlWeb安全
                                    SQL Injection：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。 
 
具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。 
 
首先让我们了解什么时候可能发生SQ
                                
                                [光与电]光子信号战防御原理
                                    comsci
原理
                                     
 
      无论是在战场上,还是在后方,敌人都有可能用光子信号对人体进行控制和攻击,那么采取什么样的防御方法,最简单,最有效呢? 
 
      我们这里有几个山寨的办法,可能有些作用,大家如果有兴趣可以去实验一下 
 
      根据光
                                
                                oracle 11g新特性:Pending Statistics
                                    daizj
oracledbms_stats
                                    oracle 11g新特性:Pending Statistics 转 
 
从11g开始，表与索引的统计信息收集完毕后，可以选择收集的统信息立即发布，也可以选择使新收集的统计信息处于pending状态，待确定处于pending状态的统计信息是安全的，再使处于pending状态的统计信息发布，这样就会避免一些因为收集统计信息立即发布而导致SQL执行计划走错的灾难。 
 
在 11g 之前的版本中，D
                                
                                快速理解RequireJs
                                    dengkane
jqueryrequirejs
                                    RequireJs已经流行很久了，我们在项目中也打算使用它。它提供了以下功能： 
 
 声明不同js文件之间的依赖 
 可以按需、并行、延时载入js库 
 可以让我们的代码以模块化的方式组织 
 
初看起来并不复杂。 在html中引入requirejs 
在HTML中，添加这样的 <script> 标签： 
<script src="/path/to
                                
                                C语言学习四流程控制if条件选择、for循环和强制类型转换
                                    dcj3sjt126com
c
                                    # include <stdio.h>

int main(void)
{
	int i, j;

	scanf("%d %d", &i, &j);

	if (i > j)
		printf("i大于j\n");
	else
		printf("i小于j\n");

	retu
                                
                                dictionary的使用要注意
                                    dcj3sjt126com
IO
                                    NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys:
                          user.user_id , @"id",
                          user.username , @"username",
         
                                
                                Android 中的资源访问(Resource)
                                    finally_m
xmlandroidStringdrawablecolor
                                     
简单的说，Android中的资源是指非代码部分。例如，在我们的Android程序中要使用一些图片来设置界面，要使用一些音频文件来设置铃声，要使用一些动画来显示特效，要使用一些字符串来显示提示信息。那么，这些图片、音频、动画和字符串等叫做Android中的资源文件。 
在Eclipse创建的工程中，我们可以看到res和assets两个文件夹，是用来保存资源文件的，在assets中保存的一般是原生
                                
                                Spring使用Cache、整合Ehcache
                                    234390216
springcacheehcache@Cacheable
                                    Spring使用Cache 
  
  
       从3.1开始，Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的，其核心思想是这样的：当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中，等到下次利用同样的
                                
                                当druid遇上oracle blob(clob)
                                    jackyrong
oracle
                                    http://blog.csdn.net/renfufei/article/details/44887371 
 
众所周知，Oracle有很多坑, 所以才有了去IOE。 
 
在使用Druid做数据库连接池后，其实偶尔也会碰到小坑，这就是使用开源项目所必须去填平的。【如果使用不开源的产品，那就不是坑，而是陷阱了，你都不知道怎么去填坑】 
 
用Druid连接池，通过JDBC往Oracle数据库的
                                
                                easyui datagrid pagination获得分页页码、总页数等信息
                                    ldzyz007

                                    var grid = $('#datagrid');  
var options = grid.datagrid('getPager').data("pagination").options;  
var curr = options.pageNumber;  
var total = options.total;  
var max =
                                
                                浅析awk里的数组
                                    nigelzeng
二维数组array数组awk
                                    awk绝对是文本处理中的神器，它本身也是一门编程语言，还有许多功能本人没有使用到。这篇文章就单单针对awk里的数组来进行讨论，如何利用数组来帮助完成文本分析。 
  
有这么一组数据： 
   abcd,91#31#2012-12-31 11:24:00 
case_a,136#19#2012-12-31 11:24:00 
case_a,136#23#2012-12-31 1
                                
                                搭建 CentOS 6 服务器(6) - TigerVNC
                                    rensanning
centos
                                    安装GNOME桌面环境 
 
# yum groupinstall "X Window System" "Desktop" 
 
 
安装TigerVNC 
 
# yum -y install tigervnc-server tigervnc 
 
 
启动VNC服务 
 
# /etc/init.d/vncserver restart
# vncser
                                
                                Spring 数据库连接整理
                                    tomcat_oracle
springbeanjdbc
                                    1、数据库连接jdbc.properties配置详解  　　jdbc.url=jdbc:hsqldb:hsql://localhost/xdb   　　jdbc.username=sa   　　jdbc.password=   　　jdbc.driver=不同的数据库厂商驱动，此处不一一列举   　　接下来，详细配置代码如下：   　　 
Spring连接池      
                                
                                Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常
                                    xp9802

                                    用Dom4J解析xml,以前没注意,今天使用dom4j包解析xml时在xpath使用处报错 
     异常栈：java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常  
     导入包 jaxen-1.1-beta-6.jar 解决; 
&nb
                                
                
            
        
    

    
        
            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    

    
        
            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
Web自适应布局你需要知道的所有事儿

请说说你知道的所有web布局方式？

1. 浮动布局 `float:left|right`

@media查询

2. inline-block `display:inline-block`

Float vs. Inline-block

如何调整float或inline-block布局中元素的顺序？

3. flexible box `display:flex`

* flexbox两分钟不完全指北

Flexbox vs. Float/Inline-block

4. grid布局 `display:grid`

* grid两分钟+两分钟不完全指北

Grid vs. Flexbox

5. 绝对、相对定位 `position:absolute|relative`

6. 表格

7. 使用框架布局 `bootstrap`、`Pure.css`等

* IE盒模型

* 尽量不使用固定高度、宽度

* viewport

最后总结一下:

自适应布局需要注意的事:

你可能感兴趣的:(Web自适应布局你需要知道的所有事儿)
