html笔记（四）弹性盒+响应式

最新推荐文章于 2023-06-20 19:51:05 发布

Start2019

最新推荐文章于 2023-06-20 19:51:05 发布

阅读量760

点赞数 1

分类专栏： html+css基础笔记

本文链接：https://blog.csdn.net/Start2019/article/details/104674834

版权

html+css基础笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

大标题	小节
一、弹性盒	1. 标准盒模型和怪异盒模型 2. 弹性盒`dipalay` 3. 与`display`配合使用的其他属性 4. 弹性盒的对齐方式 5. 弹性盒的默认特性
二、响应式布局	1. 媒体查询 2. 怎样使用媒体查询 3. 优缺点以及使用场景 4. Meta 标签的定义 5. 常见的属性操作
三、多列布局
四、移动端布局	1. 百分比弹性布局 2. rem 3. vw、vh

一、弹性盒

css 中盒子模型分为两种： w3c 标准（标准盒模型） 和 IE标准盒子模型（怪异盒模型）；
通过 box-sizing: content-box（默认，标准盒模型）/border-box（怪异盒模型）; 来转换。

大多数浏览器在采用 w3c 标准模型，而 IE 中采用 Microsoft 自己的标准；
怪异模型是“部分浏览器在支持 w3c 标准的同时还保留了原来的解析模式”，怪异模式主要表现在 IE 内核的浏览器。
当没有 doctype 时（即没有<!DOCTYPE html>声明时），IE6 会触发怪异模式；。

1. 标准盒模型和怪异盒模型（IE 盒子模型）：

（1）在标准模式下，一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)；
在这里插入图片描述

（2）在IE盒子模型下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）；

在这里插入图片描述
（3）示例：给 div标签和 p标签设置一样的宽高，但是 div标签有 border、padding 值。

2. 弹性盒 `display`

（兼容写法：-webkit-display:）设置在父元素上。使用弹性盒后， float、vertical-align、多列等都样式都无效；

display 的属性值：

box，将对象作为弹性伸缩盒显示。（伸缩盒最老版本）；
inline-box，将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）；
flexbox，将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）；
inline-flexbox，将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）；
flex，将对象作为弹性伸缩盒显示。（伸缩盒最新版本）；
inline-flex，将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）；

3. `display` 配合使用的其他属性：

（1）flex-direction:，排列方式（写在父元素身上）；
兼容写法： -webkit-flex-direction:。

row，默认的排列方式，横向从左到右排列（左对齐）；
row-reverse，反转横向排列（右对齐，从后往前排，最后一项排在最前面）；
column，纵向排列；
column-reverse，反转纵向排列，从后往前排，最后一项排在最上面）；

（2）order:，弹性盒子子元素顺序（设置在子元素上）

负数靠前；（越小越前）
0为原始位置；
正整数靠后（越大越后）；

给子元素设置了order，order值越大，顺序越靠后；

在这里插入图片描述

<style>
  *{margin:0; padding:0;}
  ul{display: flex;background:#9f9;}
  li{list-style: none;width: 50px;height: 50px;border:1px solid #000;}
  ul.one li:nth-child(1){order:1}
  ul.one li:nth-child(2){order:0}
  ul.one li:nth-child(3){order:13}
  ul.one li:nth-child(4){order:-2}
  ul.one li:nth-child(5){order:-1}
</style>
<body>
  <ul class="one">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>

（3）flex-grow:，弹性盒分配剩余空间（设置在子元素上）

0 为默认；
分配提成（数字）；

没有设置flex-grow的子元素宽度不变；
设置flex-grow了的子元素宽度 = 原宽度 + 剩余宽度*分配剩余空间比例；

分配剩余空间比例 = flex-grow值/所有flex-grow值之和。

在这里插入图片描述

<style>
  *{margin:0; padding:0;}
  ul.two{display: flex;background:#9f9;width: 400px;} /*li的总宽度是50px*5=250;剩余空间是400-250=150px*/
  li{list-style: none;width: 50px;height: 50px;border:1px solid #000;}
  /*剩余空间总共分成了2+3=5份，第2个li占了2分，所以分配到了150*2/5=60px；总宽度是50+60=110px*/
  ul.two li:nth-child(2){flex-grow: 2;}
  ul.two li:nth-child(5){flex-grow: 3;} /*注意边框的宽度也会被计算进去。这里为了方便看懂，就没有把宽度减去了*/
</style>
<body>
  <ul class="two">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>

（4）flex-shrink:，检索弹性盒的收缩比率（子元素设置）；

1 默认；
数字

设置flex-shrink后，所有子元素宽度 = 原宽度 - 超出宽度*收缩占比；

收缩占比=flex-shrink/(所有设置flex-shrink的值之和 + 没有设置flex-shrink的子元素个数)；没有设置flex-shrink的值=1。

在这里插入图片描述

<style>
  *{margin:0; padding:0;}
  ul.three{display: flex;background:#9f9;width: 250px;} /*li的总宽度是50px*5=250;剩余空间是400-250=150px*/
  ul.three li{width:90px;}/*有5个li，总宽度是90px*5=450px，超出了450-250=200px;*/
  /*flex-shrink默认是1，所以没有设置的收缩比率都占了1，因此第3个li收缩了比率是2/8，也就是说收缩宽度=200*2/8=50，所以它的宽度=原宽度-收缩宽度=90-50=40px*/
  ul.three li:nth-child(3){flex-shrink: 2;}
  ul.three li:nth-child(4){flex-shrink: 3;}/*设置了flex-shrink之后，宽度=原宽度-收缩宽度=90-200*3/8=15px*/
</style>
<body>
  <ul class="three">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>

（5）flex-basis:，检索弹性盒伸缩准值（子元素设置）；

auto 默认；
数字px；

设置了flex-basis:之后子元素的宽度=原宽度*伸缩比例。

伸缩比例=子元素宽度总和/父元素宽度。

在这里插入图片描述

<style>
  *{margin:0; padding:0;}
  ul{display: flex;background:#9f9;}
  /* 设置了flex-basis（相当于给子元素设置宽度，但是设置这个元素之后可以让子元素的宽度按比列缩放） */
  ul.four{width: 300px;} /*伸缩准值：按比列缩放每个子元素。*/
  ul.four li{width: 110px;} /*所有li总宽度和=li*4+60=500px;要使500*？=父元素宽度300px，得到的?=0.6，所以出第3个li外，其他li宽度=110*0.6=66px*/
  ul.four li:nth-child(3){flex-basis:60px;} /*第3个li宽度=60*0.6=36；*/
</style>

（6）flex:，伸缩性（设置在子元素上）
可以设置3个值，flex属性是 flex-grow，flex-shrink 和 flex-basis 这3个CSS属性的缩写，推荐使用该属性，而不是单独书写；

设置一个值：分配剩余空间；
设置三个值：0 0 百分比分配；

<style>
  *{margin:0; padding:0;}
  ul{display: flex;margin-bottom:10px;text-align: center;}
  li{list-style: none;background:#efefef;margin:0 5px;}
  ul.one li{flex:1;}
  ul.two li{flex:1;}
  
  ul.three li:nth-child(1){flex:0 0 50%;}
  ul.three li:nth-child(2),ul.three li:nth-child(3){flex:1;}

  ul.four li:nth-child(1){flex:1;}
  ul.four li:nth-child(2){flex:0 0 33.3333%;}
  
  ul.five li:nth-child(1){flex:0 0 25%;}
  ul.five li:nth-child(2){flex:1;}
  ul.five li:nth-child(3){flex:0 0 33.3333%;}
</style>
<body>
  <ul class="one">
    <li>1/2</li>
    <li>1/2</li>
  </ul>
  <ul class="two">
    <li>1/3</li>
    <li>1/3</li>
    <li>1/3</li>
  </ul>  
  <ul class="three">
    <li>1/2</li>
    <li>auto</li>
    <li>auto</li>
  </ul>
  <ul class="four">
    <li>auto</li>
    <li>1/3</li>
  </ul>  
  <ul class="five">
    <li>1/4</li>
    <li>auto</li>
    <li>1/3</li>
  </ul>
</body>

（7）flex-wrap:，伸缩换行（写在父元素上）；

nowrap;，当子元素溢出父容器时不换行；
wrap; ，当子元素溢出父容器时自动换行；
wrap-reverse;，反转 wrap 排列；

（8）flex-flow:，伸缩流方向与换行（适用于父类容器上）；

flex-direction;
flex-wrap;

4. 弹性盒的对齐方式：

（1）justify-content，主轴横向对齐（设置在父元素上）

flex-start;，左对齐；
flex-end;，右对齐；
center;，居中对齐；
space-between;，分开对齐；
space-around;，分开左右边距对齐；

（2）align-content:，主轴纵向对齐（设置在父类容器上，不常用）；

flex-start;，上对齐；
flex-end;，下对齐；
center;，居中对齐；
baseline;，基线对齐；
strecth;，上下拉升对齐；

（3）侧轴对齐： align-items:（设置在父上，常用）、 align-self:（设置在子，让某个子元素单独布局）；

flex-start;，上对齐；
flex-end;，右对齐；
center;，居中对齐；
baseline;，基线对齐；
strecth;，上下拉升对齐；

5. 弹性盒的默认特性：

（1）默认流向为横向；
（2）若不写宽度，默认宽度为 0 或者被内容撑开；
（3）弹性盒的高度，若不设置，高度与父元素一样高；
（4）弹性盒默认不换行；

二、响应式布局

1. 媒体查询

使用媒体查询原因：如果没有CSS3的媒体查询模块，就不能针对设备特性（如视口宽度）设置特定的CSS样式
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。
好处：使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

2. 怎样使用 media（媒体查询）

在CSS文件中引入媒体查询：

媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会覆盖前面的样式；

（1）在页面内使用
需要先在 html 文档中添加以下代码，用来兼容移动设备的显示效果：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

width=device-width：宽度等于当前设备的宽度；
initial-scale=1：初始的缩放比例(默认为1)；
maximum-scale=1：允许用户缩放到得最大比例(默认为1)；
user-scalable=no：用户不能手动缩放；

/*当设备屏幕宽度在320px——720px之间时，媒体查询中body的背景色（background-color:red;）会重叠之前的body背景色;
当设备屏幕宽度在320px及以下时，媒体查询中body的body背景色（background-color:blue;）会重叠之前的body背景色；
*/
<style>
body{background: #f9f;} 
@media screen and (max-width:720px) and (min-width:320px){ /* and (min-width:320px)可省略*/
	body{
		background-color:red;
	}
}
@media screen and (max-width:320px){
	body{
		background-color:blue;
	}
}
</style>

（2）媒体查询外联 css 语法：
① <link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />，当屏幕宽度（最小宽度为1024px）大于等于1024px 时引入 wide.css的样式。

② <link rel="stylesheet" href="mobile.css" media="screen and (max-width:320px)" />，小于等于 320px 时（最大宽度是 320px）使用 mobile.css 的样式。

③<link rel=“stylesheet” href="medium.css" media="screen and (max-width:1024px) and (min-width:320px)" />，在 320px 和 1024px 之间的使用 medium.css的样式。

3. 优缺点以及使用场景：

（1）优点：
① 多终端视觉和操作体验非常风格统一；
② 兼容当前及未来新设备；
③ 响应式 web 设计中的大部分技术可以用在 WebApp 开发中；
④ 节约了开发成本，维护成本也降低很多；

（2）缺点：
① 兼容性：低版本浏览器兼容性有问题；
② 移动带宽流量：相比较手机定制网站，流量稍大；
③ 但比较加载一个完整 pc 端网站显然是小得多；
④ 代码累赘，会出现隐藏无用的元素，加载时间加长；
⑤ 兼容各种设备工作量大；

（3）适用场景：
① 对于重内容的网站，例如形象展示，则比较适合使用响应式web设计；
② 对于重功能的网站，如电子商务类，则更推荐使用独立移动网站；
在这里插入图片描述

4. Meta 标签定义：

移动设备上的 viewport 就是设备的屏幕上能用来显示我们的网页的那一块区域，再具体一点，就是浏览器上(也可能是一个 app 中的 webview)用来显示网页的那部分区域，
但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

（1）使用 viewport meta 标签在手机浏览器上控制布局：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

（2）隐藏苹果浏览器的工具栏和菜单栏。全屏显示：
<meta name="apple-mobile-web-app-capable" content="yes" />

（3）设置Web App的状态栏（屏幕顶部栏）的样式：
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

5. 常见的属性操作：

（1）orientation: 设备方向；

（2）portrait: 监听竖屏，指定输出设备中的页面可见区域高度大于或等于宽度；

（3）landscape: 监听横屏（除portrait值情况外，都是landscape）；

（4）min-width:、max-width: 适用于全部屏幕（手机和网页）的查询；

（5）min-device-width:、max-device-width: 只用于手机分辨查询；

三、多列布局

通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样。
Internet Explorer 9 以及更早的版本不支持多列属性；

多列属性

（1）创建多列： column-count: 数字;属性规定元素应该被分隔的列数；
（2）规定列之间的间隔： column-gap: 数字px; 属性规定列之间的间隔；
（3）列规则： column-rule:数字px outset/solid/double/dotted/dashed #颜色 属性设置列之间的宽度、样式和颜色规则；

Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。

在这里插入图片描述

<style>
div{
  word-wrap: break-word;
  width: 400px;
  column-count: 3; /*规定被分成3列*/
  column-gap: 30px; /* 这里是文字列和文字列之间的距离*/
  column-rule: 4px double #f00; /*分隔线样式*/
}
</style>
<div>
  当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。
</div>

四、移动端页面布局

移动端布局优缺点：

优点：
（1）移动端基本都兼容 h5、css3，所以可以放心的使用 css3 的样式来布局；
（2）移动端页面一般都不大，所以标签使用的并不多，开发时间没有 web 端长；
缺点： 移动端宽高尺寸不同，因此测量尺寸成为一个难题，无法非常精确的写尺寸；

因为无法使用正常尺寸，不能直接写像素，通常用 2 种方式来写；

1. 百分比弹性布局：

移动端页面基本上和 web 端区别不大，但要考虑到移动端屏幕尺寸不大并且都是全屏布局，而且尺寸都不一样，所以不能使用网页的固定尺寸 来布局，需要使用 百分比 来布局；

（1）宽度的百分比是屏幕宽度的百分比数；
（2）高度的百分比是父元素高度的百分比数。

2. rem

（1）rem 是永远获取 html 的 font-size 的值。
例：html{font-size:100px;} 那么所有子元素 1rem = 100px;

（2）通过 js 获取屏幕尺寸，制定出一个系数，去改变 html 的 font-size 值。
例：当屏幕尺寸是 320px ，我想设置 1rem = 10%，那么就设置 html 的 font-size:32px; 通过 js 来设置屏幕尺寸÷10；

3. vw，vh

vw，vh 永远跟随屏幕大小变化而变化。

（1）100vw = 屏幕的宽度；1vw = 1% 屏幕尺寸；
（2）这样更直观的获取百分比，但是少部分手机不支持，需要自己把控； vw 是为了的趋势。
（3）使用：html{font-size: 100÷设计图宽度的1%vw;}
其他元素： header{height:高度÷100rem;}

/*假设设计图宽度为640px,某个div高度88px，那么
640/6.4=100px;
设：100vw/6.4 = 15.625vw;
1rem/100 = 0.01rem * 88 = 1px *88 = 100px/100 = 1px
得： .88rem = 88px;
*/

html笔记（一）html4+css2.0、css基础和属性、盒模型

html笔记（二）html4+css2.0（元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹）

html笔记（三）html5+css3（html5、css3、文字相关）

Start2019

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
html笔记（四）弹性盒+响应式

一、弹性盒1.标准盒模型和怪异盒模型；2.弹性盒dipalay；3.与display配合使用的其他属性；4.弹性盒的对齐方式；5.弹性盒的默认特性二、响应式布局1.媒体查询；2.怎样使用媒体查询；3.优缺点以及使用场景；4.Meta 标签的定义；5.常见的属性操作；三、多列布局四、移动端布局1.百分比弹性布局；2.rem；3.vw、vh；
复制链接

扫一扫