css布局-百分比布局

Posted 2023-04-18

参考技术A 书写手机网页时，必须约束视口宽度（320-420左右）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />
width=device-width 约束视口
initial-scale=1.0 初始视口倍数是1倍
minimum-scale=1.0 最小允许视口宽度是1倍
maximum-scale=1.0 最大允许视口宽度是1倍
user-scalable=no 不允许用户缩放视口

书写移动端网页，没有版心，必须用百分比布局。百分比布局也叫流式布局。

一、百分比布局
width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。
height:高度的百分比是相对于父盒子height内容高的比。
padding,margin.:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。
border：不能书写百分数

子盒子如果绝对定位，width百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）；
height百分比参考的是距离最近，且有定位的父盒子的height（算上padding.）；
padding,margin百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）；
例：
div width: 50%; overflow: hidden; p width: 50%; height: 100px; float: left; background-color: pink; p:last-child background-color: green;

二、box-sizing:border-box;
css2中的盒模型是外扩的。
css3的box-sizing：盒模型内减。（在width、height基础上再书写padding或者border，是在原有宽高上进行内减。）
例：

内减盒模型：书写的width、height就是盒子真正占有的宽和高。

讲真，内减盒模型简直不能再更好用了！！尤其是要自己各种测算的时候！

三、弹性盒
display的属性值：block ,inline,inline-block,none;
-webkit-box:弹性盒容器。
例：
书写：3个P，宽度比是1:2:3。（X+2X+3X=100%）

抽象公式：

四、固比固模型
固比固模型：第一部分和第三部分宽度是固定值，第二部分宽度是剩余部分的宽度。

例：1和3部分宽度是120px，2自动撑开。
1、利用浮动

2、绝对定位（推荐）

3、弹性盒

五、max-width 和 min-width
移动端网页宽度必须使用百分比，但是网页的最小宽度或者是最大宽度只能书写像素px。不能用百分数。
例：

常见的CSS布局单位

参考技术A

常用的布局单位包括像素（ px ），百分比（ % ）， em ， rem ， vw/vh 。

（1）像素 （ px ）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：

（2）百分比 （ % ），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

（3）em和rem 相对于px更具灵活性，它们都是相对长度单位，它们之间的区别： em相对于父元素，rem相对于根元素。

（4）vw/vh 是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

vw/vh 和百分比很类似，两者的区别：