CSS属性width和height有什么作用

本篇内容介绍了“CSS属性width和height有什么作用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　width是定义元素内容区的宽度；cssheight是定义元素在内容区的高度.在内容区外面可以增加内边距（padding）、边框（border）和外边距（margin），这样的话就成了我们常说的盒子模型，后期内容中会给大家讲到这些，在行内非替换元素会忽略width这个属性，也就是我们不定义这个元素的时候，默认值为auto，由内容将其撑开。

　　cssheight单位

　　绝对单位

　　1.像素px(pixels)，在web上，像素px是典型的度量单位，这也是我们最常用的单位。像其他一些单位最终，都会被按照像素处理

　　2.英寸in(inches)1in=2.54cm=96px；

　　3.厘米cm(centimeters)1cm=10mm=96px/2.54=37.8px

　　4.毫米mm(millimeters)1mm=0.1cm=3.78px

　　5.1/4毫米q(quarter-millimeters)1q=1/4mm=0.945px

　　6.点pt(points)，1pt=1/72in==0.0139in=1/72*2.54cm=1/72*96px=1.33px；

　　7.派卡pc(picas)，1pc=12pt=1/6in=1/6*96px=16px；

　　这些单位基本不怎么用，大家知道一下就可以了。

　　相对单位：%vw、vh、vmin和vmax，除了百分比，后面的几个都是css3的单位，但是出来时间也挺久了。

　　百分比的话在这里就不多说了，就是平均把屏幕分成一百份，一份就是百分之一，你自己可以写一个50%宽的div，拖拉窗口试试看变化。

　　vw：视窗宽度的百分比视窗呢指的是浏览器可视区域的宽高

　　vh：视窗高度的百分比

　　vmin：当前较小的vw和vh

　　vmax：当前较大的vw和vh

　　比如往往vh大于vw，当vh大于vw的时候那么vmin就是随他俩中比较小的也就是等于vw，vmax则等于比较大的那个vh。

　　cssheight属性

　　与百分比相比，%是相对于父元素的大小设定的比率，vw是视窗大小决定的。其实这些视窗单位与%使用基本类似，优势在于能够直接获取高度，而用%在没有设置body高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

　　不仅仅width和height可以使用这vw，vh，font也可以使用，这两个属性是什么呢，先说VW，我们把视窗宽度平均分成100份，也就是width=100vw就是当前屏幕宽度，是跟着屏幕宽度变化而变化的，10vw就是十分之一的视窗宽度，这个单位呢不同于百分比，百分比是相对于父元素的；VH则是根据高度，在这里就不再赘述了，其实呢width使用百分比完全可以设置了。

“CSS属性width和height有什么作用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！