CSS的常用单位 %和 vw vh 和 box-sizing：border-box; 和flex

lordharrd 发布于2019-08-29 16:14 / 2637人阅读

摘要：一理解号是中的常用单位，它是相对于父容器而言的。效果图利用设置了的宽代码二理解这俩个单位是相对于视口的大小而定的。效果图代码弹性盒布局

一、%

理解： %号是CSS中的常用单位，它是相对于父容器而言的。如:一个父容器的宽是100px,给它的子元素一个10%，那么子元素的宽就是100px的10% 10px。
效果图：（利用%设置了li 的宽）

代码：

二、vw vh

理解 “vw” “vh”这俩个单位是相对于视口的大小而定的。“vw”是相对于视口的宽如视口宽100px当你设width：10vw时你设的宽实际就是10px “vw”是相对于视口的高同理
效果图：

代码：

三、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的各种属性来对网页进行更加简单的排版弹性盒布局比你用定位和浮动来布局，更加简单明了。
效果图：

代码：

专线服务超融合服务器常用域名的符号和含义 css和html的区别 html和css的区别 html和css的关系

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113611.html

CSS的常用单位 %和 vw vh 和 box-sizing：border-box; 和flex

摘要：一理解号是中的常用单位，它是相对于父容器而言的。效果图利用设置了的宽代码二理解这俩个单位是相对于视口的大小而定的。效果图代码弹性盒布局一、% 理解： %号是CSS中的常用单位，它是相对于父容器而言的。如:一个父容器的宽是100px,给它的子元素一个10%，那么子元素的宽就是100px的10% 10px。效果图：（利用%设置了li 的宽）showImg(https://seg...

sunny5541 2019-08-02 11:05 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

garfileo 2019-08-30 11:25 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

CoderDock 2019-08-30 15:44 评论0 收藏0
css面试题

摘要：目前，除了及更早版本外，所有浏览器均已支持。视口单位中的视口，桌面端指的是浏览器的可视区域移动端指的就是中的。根据规范，视口单位主要包括以下个等于视口宽度的。等于视口高度的。生成相对定位的元素，相对于其正常位置进行定位。 css面试题 css垂直居中的方法有哪些？已知高度的块级子元素，采用绝对定位和负边距.container { position: relative;}.verti...

longmon 2019-08-23 18:30 评论0 收藏0
【前端词典】提高幸福感的 9 个 CSS 技巧

摘要：使用归类重复样式和重复变量一样，重复的样式也可以归类。解决方案可以使用如下的写法两端对齐姓名手机号码账号密码效果如下相关文章输出计划最近总有朋友问我相关的问题，因此接下来我会输出篇相关的文章，希望对大家有一定的帮助。前言在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。 9 个 CSS 技巧特此声明，这里说的...

番茄西红柿 2019-05-23 15:55 评论0 收藏0