CSS布局（2）浮动 inline-block 响应式

浮动：两列布局

方法1

• 设置左左浮动，或设置左右浮动（需要设置父元素的宽度）
  如果父级元素没有设置高度，则需要设置overflow:hidden避免父元素“高度坍塌”。
• 可参考笔记CSS布局

方法2

只设置一个左浮动元素（红色），然后给右边蓝色列设置与红色浮动等宽的margin-left使得两列不重合。

**如果右边蓝色列不设置与红色浮动等宽的margin-left**，那么红蓝有一部分是重叠的，虽然不影响蓝色列文字的显示，但是后续文字padding的设置会很麻烦：

例子：

---

浮动：三列布局（3种方法）

方法1 【3个浮动元素】：（可参考笔记三列布局（浮动或子绝父相））
首先设置父级元素的宽度（width: 100%;overflow: hidden;）

1. 可以左左右设置浮动,然后中间设置margin调整间距。
2. 也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动！

由于都是浮动元素，所以可以控制自己的宽高，也不用担心没脱离普通元素的文本流所引发的问题。（方法2就要注意这个问题）

方法2 【1、3列浮动，中间margin留位置】：
设置第1、3列为浮动，中间使用margin将空间留出来给普通元素。
为防止第三列浮动元素受到中间普通元素文本的影响，需要在HTML中将最左和最右两个浮动写在一起，中间的普通元素放在最后。

方法3 【1、3列绝对定位，中间margin留位置】：
使用子绝父相，将父元素设置为相对定位（position：relative），使用position：absolute将第1、3列设置为绝对定位，中间使用margin将空间留出来给普通元素。
（但我们很少这么做，因为绝对定位是完全脱离文档流的，缺少适应性方面的特性）

方法2 错误示范

左列左浮动，中间使用margin-left和margin-right预留出左右两列的宽度，第三列右浮动：

可以看到蓝色列顶部是在中间列下面的，三列并未对齐：

原因：第三列是浮动，不会脱离文本流，所以他会给中间的普通元素的文本留出位置。

方法2 正确示范

在HTML中将最左和最右两个浮动写在一起，中间的普通元素放在最后。那么浮动元素：

此时，左边浮动尽量往上靠，右边浮动尽量往上靠，最后中间元素再进去看有没有空间：

---

inline-block布局

• 思路：像文本一样排block元素
• 优点：不需要处理清除浮动等问题
• 缺点：需要处理两个inline-block元素之间的间隙

错误示范（间隙）

效果：可以看到中间有一条缝，这是因为inline-block就像文字一样，两个文字中间一定是有间隙的

间隙的处理方法

解决方法：首先将父元素的font-size设为0（字体大小都为0了，间隙也就为0了，但同时他的子元素的文字也会消失），然后分别设置inline-block子元素的font-size使子元素中文字可以显示出来。

父元素：

解决代码：

效果：

---

什么时候使用浮动/inline-block布局

• 使用inline-block布局比浮动布局要简单，但是处理一些自适应会比较麻烦，浮动布局会更加方便。
• 处理定宽的问题时使用inline-block布局。

---

响应式设计和布局

• 响应式设计： 在不同设备上正常使用，一般主要处理屏幕大小问题。
• 主要方法：
  1. 隐藏+折行+自适应空间
  2. rem/viewport/media query
     • rem代替px：1rem 等于 HTML 中的根元素的字体大小，可参考笔记CSS文本
     • viewport：使移动端网页页面的宽度和设备屏幕的宽度进行匹配<meta name="viewport" content="width=device-width,initial-scale=1.0">
       • width=device-width：将页面宽度width设为 屏幕区域大小device-width（注意区分 页面 和 屏幕 ，device-width只和设备有关系）,使页面和屏幕的宽度进行匹配。（如果不加这个，那么很多手机上网页的默认宽度使980px，然而手机只有这么大却要显示980个像素，看起来页面就被缩小了很多）
       • initial-scale：表示初始的缩放比例，默认缩放比例为1，也就是不进行缩放。不允许用户缩放页面，能保证页面在不同设备上的显示效果一致
     • media query： 根据不同设备的特性匹配不同样式。

viewport案例（适配移动端）

• viewport 是用户网页的可视区域。
• viewport 翻译为中文可以叫做”视口”。
• 手机浏览器是把页面放在一个虚拟的”窗口”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
• 没有使用viewport会出现的问题：
  • 缩放问题：如果网页没有设置 viewport，浏览器会将整个网页缩小，以适应屏幕宽度。这可能导致网页中的字体和其他元素过小，难以阅读和操作。如果设置了 viewport，则可以通过调整视口大小和缩放级别来适应屏幕宽度
  • 响应式设计问题：移动设备屏幕宽度通常较小，因此需要响应式设计以适应不同大小的屏幕。如果网页没有设置 viewport，它可能无法正确响应设备屏幕的大小和方向
  • 布局问题：如果网页没有设置 viewport，浏览器可能会将整个网页缩放到适合屏幕宽度的大小，这可能导致布局混乱或者元素重叠
• 没有使用viewport的效果：需要手动平移和缩放看全部效果
  
• 加上viewport：
  • 加上viewport之后的效果：根据设定的样式进行缩放展示，不会出现横向的滚动条
    

media query案例

隐藏

给上一个例子加上media query，规定左边红色列只有在屏幕宽度大于640px的情况下显示，小于时隐藏左边红色列：

一般移动端都是小于640px的，所以移动端就会隐藏左边红色列：

---

适配移动端

• 实现效果：让文字大小适配屏幕大小（等比例）
• 实现方法：
  1. 使用@media判断为移动端设备时，设置元素居中并改为块级元素：居中使其左右不留空位（滑动条），块级使其独占一行
  2. 将所有文字单位调整成rem，然后使用@media来设置不同屏幕大小时font-size的大小
• 注意：@media规则中max-width小的放在下面，以此保证识别顺序。并且注意预留空间，因为rem精准性不高，当font-size与之相除产生小数点时将取近似数，要求精准时请勿使用rem

---