web前端入门到实战：CSS属性width和height

width 是定义元素内容区的宽度；
height是定义元素在内容区的高度.

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

绝对单位

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/722.54cm = 1/7296px = 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

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。看看前辈们是如何在编程的世界里傲然前行！不停更新最新的教程和学习方法（web前端系统学习路线，详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入。我们会一起结伴同行前端前端前端

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

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

不仅仅width和height可以使用这vw，vh，font也可以使用，这两个属性是什么呢，先说VW，我们把视窗宽度平均分成100份，也就是width= 100vw 就是当前屏幕宽度，是跟着屏幕宽度变化而变化的，10vw 就是十分之一的视窗宽度，这个单位呢不同于百分比，百分比是相对于父元素的；VH则是根据高度，在这里就不再赘述了，其实呢width使用百分比完全可以设置了，但是往往网站中会遇到图片高度需要统一固定，如果宽度使用的百分比的话高度使用百分比是不生效的，而px这类的绝对单位常常会出现图片变形的问题，所以这时候,可以使用这两个单位，，比如需要一个正方形的图片，那么可以设置成 img 的 width = 10 vw ；height 10vw；或者换成vh也是可以的。但是实际开发中pc端常常会考虑兼容性问题，Pc端和移动端还是有一定区别的，vw，vh这两个单位不是所有浏览器都支持的，但是移动端兼容基本是没有任何问题的，出去非常老android4.4一下的系统，如图兼容性红色为不兼容，绿色为兼容：2013-2-19 Firefox 19发布，支持vw

上图来看兼容性没有问题的，因为 IE6 8 已经被抛弃了，至于安卓的4.1和4.3也是比较老的系统了

Css3单位中还有 em，rem，可是基于vw开发布局比基于rem不知道要高明到哪里去了。Rem用它来布局，就相当于用font size 来设置 width size，中间你要转一道，所以在后期节目中降到font属性的时候会具体来说rem。

下来我们在来了解一下：

min-width
max-width
min-height
max-height

最大宽度属性(max-width)用来定义宽度显示的最大值，即宽度在0~max-width之间，如果单独定义了min-width，那么宽度在min-width ~ auto之间，

当拖动浏览器边框使其显示范围大于最大宽度的时候，元素显示最大宽度值定义的宽度。最小宽度属性(min-width)用来定义宽度显示的最小值，当拖动浏览器边框使其显示范围小于最小宽度的时候，元素显示最小宽度值定义的宽度，在最小宽度属性中，可以使用三种属性值，分别为auto值、长度值和百分比值。使用场景有很多，还需要大家在实际的项目中体会。有问题可以留言。

响应式的网站则会需要用到css的媒体media来写不同屏幕的样式，一般会根据市场的主流产品来确定几个临界值：下面是常用的一些临界点

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */} @media>@media> /*6*/ @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ } /*6+*/ @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ } /*魅族*/ @media> /*mate7*/ @media> /*4 4s*/ @media>
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

width和height对于有一些基础的小伙伴来说，没有什么太多可讲的，也就是在使用的过程中根据不同的项目环境选择不同的单位去使用，也不能说使用哪种最好，只能说是相对比较好，也是在每个人的使用习惯上，怎么写出最简洁的样式，还是要靠你们自己去总结

web前端入门到实战：CSS属性width和height相关推荐

html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南优点简单,不需要工程,不用puppeteer生成骨架d ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
web前端入门到实战：仿美团详情页与购物车源码-首页实现
效果图首先是index.html <!DOCTYPE html> <html> <head><title>首页</title><me ...
web前端入门到实战：CSS新属性实现特殊的图片显示效果
1 概述 1.1 前言使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果,共列举了2 ...
web前端入门到实战：css中border-style 属性
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式.只有当这个值不是 none 时边框才可能出现. 例子 1 border-style:dotted solid d ...
web前端入门到实战：css选择器四大类：基本、组合、属性、伪类
什么是选择器?选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器.属性选择器.组合选择器与伪类选择器四个大类! css基本选择器基本选择器又分为:通配符.标签 ...
web前端入门到实战：CSS实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果? 一.skewX的局限一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而 ...
web前端入门到实战：CSS颜色、背景和剪切
颜色 CSS 中可以改变文字的颜色还有元素的背景颜色.可以用颜色关键字来定义颜色,如red,但是这些颜色关键字并不常用. transparent transparent可以让文字或背景变的完全透明的颜 ...
web前端入门到实战：CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...

web前端入门到实战：CSS属性width和height

绝对单位

web前端入门到实战：CSS属性width和height相关推荐

最新文章

热门文章