摘要：一理解号是中的常用单位，它是相对于父容器而言的。效果图利用设置了的宽代码二理解这俩个单位是相对于视口的大小而定的。效果图代码弹性盒布局
一、%
理解： %号是CSS中的常用单位，它是相对于父容器而言的。如:一个父容器的宽是100px,给它的子元素一个10%，那么子元素的宽就是100px的10% 10px。
效果图： （利用%设置了li 的宽）
代码：
%
二、vw vh
理解 “vw” “vh”这俩个单位是相对于视口的大小而定的。“vw”是相对于视口的宽 如视口宽100px当你设width：10vw时 你设的宽实际就是10px “vw”是相对于视口的高 同理
效果图：
代码：
vw vh
三、box-sizing：border-box;
理解 一般用于排移动端的网页时防止在你给盒模型设padding和margin时改变盒模型的大小。
效果图：（很明显第一个盒模型被padding改变了实际的大小，而第二个改变了内容区域的大小而整体没有改变）
（这是第一个盒子）
（这是第二个盒子）
代码：
box-sizing:border-box;
第一个盒子没有用box-sizing:border-box;盒子的大小为500*500
padding上下为5px 左右为10px;margin为10px
第二个盒子用了box-sizing:border-box;盒子的大小为500*500
padding上下为5px 左右为10px;margin为10px
四、flex（简单的）弹性盒布局！！
理解 利用flex的各种属性来对网页进行更加简单的排版 弹性盒布局比你用定位和浮动来布局，更加简单明了。
效果图：
代码：
弹性盒布局flex
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52759.html
摘要：一理解号是中的常用单位，它是相对于父容器而言的。效果图利用设置了的宽代码二理解这俩个单位是相对于视口的大小而定的。效果图代码弹性盒布局 一、% 理解： %号是CSS中的常用单位，它是相对于父容器而言的。如:一个父容器的宽是100px,给它的子元素一个10%，那么子元素的宽就是100px的10% 10px。 效果图： （利用%设置了li 的宽）showImg(https://seg...
摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵 我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...
摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵 我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...
摘要：使用归类重复样式和重复变量一样，重复的样式也可以归类。解决方案可以使用如下的写法两端对齐姓名手机号码账号密码效果如下相关文章输出计划最近总有朋友问我相关的问题，因此接下来我会输出篇相关的文章，希望对大家有一定的帮助。前言 在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。 9 个 CSS 技巧 特此声明，这里说的...
阅读 3464·2021-11-18 10:02
阅读 3707·2021-09-13 10:25
阅读 1920·2021-07-26 23:38
阅读 2568·2019-08-30 15:44
阅读 2268·2019-08-30 13:51
阅读 1223·2019-08-26 11:35
阅读 2273·2019-08-26 10:29
阅读 3444·2019-08-23 14:56
