Cherish's Notebook
切换到深色模式
菜单
Wiki--浏览次数--访问次数--跳出率--平均停留

Html和CSS学习

自己正经开始学编程的第一门语言！

20. 移动端布局实战上篇

20.1 移动端主流方案

  1. 单独移动端页面（主流）
  1. 响应式兼容PC移动端
  1. 两种页面选型布局方式

20.2 移动端技术解决方案

20.2.1 CSS初始化 normalize.css

官网地址： http://necolas.github.io/normalize.css/

20.2.2 CSS3 盒子模型 box-sizing

去除高亮：

在用a元素的时候在pc端没事，但是在手机端一点会有颜色背景，去除的方式是

-webkit- tap-highlight-color: transparent;

20.3 流式布局（百分比布局）

20.4 流式布局案例

注意点：

移动端在进行大盒子中左右两个盒子大小固定不变，中间盒子随着大盒子的放大而变大，变小而变小，此时可以一定要学会使用定位，定位非常非常重要，如果想让大盒子不动，不随着页面向下的滑动而改变，此时对大盒子使用固定定位，并将宽度设置为100%，高度自己定，左右两个盒子设置为固定定位，并给定其确定的宽和高，让它不会随意浏览器的缩放而改变，对中间盒子采用标准流做法，给它设定一个magin，让它与左右盒子相隔，宽度设为100%，高度设为确定值，设置magin是因为那两个左右盒子是绝对定位，它会盖住中间盒子两边的部分的。

也可以使用flex布局来实现，给左右盒子设置好宽高，对大盒子使用flex布局，然后中间剩余部分全给中间盒子即可实现！

图片格式：

效果：

结构代码：

CODE
<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

样式代码：

CODE
<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

20.5 flex布局

20.5.1 布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局

  • 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
  • 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
  • 总结来说就是：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
  • flex可以直接将行内元素变成类似于浮动的效果，就有宽高了

父盒子被设置为弹性布局后，如果不给它设置宽度的话，父盒子的宽度就是子盒子撑开的宽度，如果有两个子盒子，第一个子盒子设置了宽高，第二个盒子宽度设为100%，则第二个盒子的宽度就是第一个盒子的宽度。父盒子由第一个盒子撑开

在弹性布局中如果是个单选标签，可以使用下边的方式进行布局：

CODE
/* Flex 弹性布局 */
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

样式：

.form-item .male-label {

   margin-right: 20px;

   display: inline-flex;

   align-items: center;

}

20.5.2 常见父项属性

  1. flex-direction：设置主轴的方向
  2. justify-content：设置主轴上的子元素排列方式
  3. flex-wrap：设置子元素是否换行
  4. align-content：设置侧轴上的子元素的排列方式（多行）
  5. align-items：设置侧轴上的子元素排列方式（单行）
  6. flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
  7. flex-direction：设置主轴的方向
  1. justify-content：设置主轴上的子元素排列方式

space-evenly：所有间距都完全相等（包括两端和元素之间）

跟着主轴走

  1. flex-wrap：设置子元素是否换行

flex布局中是默认不换行的，当父亲盒子宽100px，高100px，内部的5个四盒子设置 宽为30px，高30px，如果排列方式按照默认，则按照x轴来进行排，从左到右的方式来进行排列，则子盒子不会换行，子盒子的宽度将会失效，然后会自动调整宽度以适应这个父盒子，会将父盒子沿这个轴塞满

  1. align-content：设置侧轴上的子元素的排列方式（多行）

搭配前边的主轴排列方式就可以实现对主轴与侧轴的操作

stretch:沿着侧轴拉伸，但是要首先去掉侧轴方向的宽或高：若侧轴为y轴，则去掉高度大小

  1. align-items：设置侧轴上的子元素排列方式（单行）

align-items与align-content之间的区别：

单找items，多找content

  1. flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

20.5.3 flex布局子项常见属性

  1. flex 属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数

可以理解为没站位的剩余空间 ，数字表示的含义理解为：数字/总元素

flex后边也可以跟百分比，通常用于父盒子不给高度，宽度为100%，想让子盒子换行和撑开的情况，li没有宽度，此时用flex：1；是不太起作用的，他不会换行，这是因为没有宽度，此时可以通过给子盒子使用flex: 20%;让子盒子平均为大盒子宽度的百分之50,这时候给父盒子加上flex-wrap: wrap;就管用了，就可以实现换行了

  1. align-self 控制子项自己在侧轴上的排列方式

单个子盒子在父盒子侧轴上的排列方式

  1. order 属性定义项目的排列顺序

20.5.4 背景线性渐变

必须要添加浏览器的私有前缀

20.5.5 携程网首页案例

学到最重要的知识：

flex处理这样的布局思路

CODE
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

对上述的布局思路的多个多个背景图片替换的方式如下：一定要学会思路！！！

使用属性选择器

结构：

CODE
<!-- 携程网移动端案例结构 -->
<div class="container">
  <!-- 搜索栏 -->
  <div class="search-index">...</div>
  <!-- 焦点图 -->
  <div class="focus">...</div>
  <!-- 主导航 -->
  <div class="local-nav">...</div>
  <!-- 子导航 -->
  <div class="nav-common">...</div>
</div>

样式：

CODE
input[type="text"] {
  border: 1px solid #999;
}

总代码和效果展示：

结构：

CODE
<!-- 携程网移动端案例结构 -->
<div class="container">
  <!-- 搜索栏 -->
  <div class="search-index">...</div>
  <!-- 焦点图 -->
  <div class="focus">...</div>
  <!-- 主导航 -->
  <div class="local-nav">...</div>
  <!-- 子导航 -->
  <div class="nav-common">...</div>
</div>

样式：

CODE
<!-- HTML 代码示例 -->
<div class="example">
  示例内容
</div>