这篇文章给大家分享的是CSS中width和height属性的应用。小编觉得挺实用的,因此分享给大家学习。如下资料是关于width和height属性的内容。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比苏尼特左网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式苏尼特左网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖苏尼特左地区。费用合理售后完善,10年实体公司更值得信赖。
width 是定义元素内容区的宽度;
height是定义元素在内容区的高度.
在内容区外面可以增加内边距(padding)、边框(border)和外边距(margin),这样的话就成了我们常说的盒子模型,后期内容中会给大家讲到这些, 在行内非替换元素会忽略width这个属性,也就是我们不定义这个元素的时候,默认值为auto,由内容将其撑开。
1. 像素px(pixels),在web上,像素px是典型的度量单位,这也是我们最常用的单位。像其他一些单位最终,都会被按照像素处理
2. 英寸in(inches) 1in = 2.54cm = 96px;
- 厘米cm(centimeters) 1cm = 10mm = 96px/2.54 = 37.8px
- 毫米mm(millimeters) 1mm = 0.1cm = 3.78px
- 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;
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)
这些单位基本不怎么用,大家知道一下就可以了。
相对单位:% vw、vh、vmin和vmax ,除了百分比,后面的几个都是css3的单位,但是出来时间也挺久了。
百分比的话在这里就不多说了,就是平均把屏幕分成一百份, 一份就是百分之一,你自己可以写一个50%宽的div,拖拉窗口试试看变化。
vw:视窗宽度的百分比 视窗呢指的是浏览器可视区域的宽高
vh:视窗高度的百分比
vmin:当前较小的vw和vh
vmax:当前较大的vw和vh
比如往往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>
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)
width和height对于有一些基础的小伙伴来说,没有什么太多可讲的,也就是在使用的过程中根据不同的项目环境选择不同的单位去使用,也不能说使用哪种最好,只能说是相对比较好,也是在每个人的使用习惯上,怎么写出最简洁的样式,还是要靠你们自己去总结。
关于width和height属性就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
分享标题:CSS中width和height属性的应用
链接URL:https://www.cdcxhl.com/article24/ipcpje.html
成都网站建设公司_创新互联,为您提供商城网站、网站制作、外贸建站、静态网站、关键词优化、品牌网站制作
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联