• [CSS入门到进阶] 你真的了解 width height 吗?


    背景

    在一个群聊里见到有人问:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OcHZzY4r-1658297165973)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82029e68b1724eb8a888d45e21da7246~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

    想想,其实很多时候,前端开发者对 width height 也并没有很熟悉。都是面试过了后就忘了。

    让我们调整样式,基本是凭借经验,多次在浏览器中改参数调试出来理想效果的。只是熟悉的人调的快,不熟悉的人调的慢。一遍就好样式还是挺难的。

    所以,今天我们再来看下 width 和 height 这两个最常用的css属性。

    干货

    什么元素可以有width height

    是跟display属性有关的。

    display = ‘inline’,设置width height无效。

    其它情况,例如 display = ‘block’ 或 ‘inline-block’ 或 ‘flex’ 或 ‘inline-flex’,设置width height有效。

    例如div,它默认的样式 display = ‘block’,所以可以设置width height。而span,它默认的样式 display = ‘inline’,所以设置width height无效。

    width height的取值

    width height可以是具体数值

    主要包括px、em。

    也有高级的写法:100vw、100vh。分别表示当前窗口宽度*100%和当前当前窗口高度*100% 当前窗口宽度*100%。其中窗口动态改变大小时,vw和vh也会改变。响应式设计中很常用!

    更高级的写法:calc函数。例如height: calc(100vh - 32px)。表示当前窗口高度*100%减去32px。这个可用于固定头部导航栏时,下部视窗的高度。

    height可以是auto

    height是auto时,它的高度由子元素决定。子元素多高,它就多高。没有子元素,那么高度就是0。

    width可以是fill

    尽可能宽,撑满父元素(如果是最外层的元素,就会撑到100vw)。

    width可以是max-content

    width是max-content时,它的宽度由子元素决定。子元素多宽,它就多宽(即子元素会尽可能宽,意思是:子元素若能不换行就不换行)。没有子元素,那么宽度就是0。

    如果子元素是一段文字,这段文字就不会换行,除非你直接限制了子元素的宽度(此时即使你限制max-content元素的父元素的宽度,都拦不住子元素前进的步伐)。

    width可以是min-content

    width是min-content时,它的宽度由子元素决定。子元素多窄,它就多窄(即子元素会尽可能窄,意思是:子元素若能换行就换行)。没有子元素,那么宽度就是0。

    如果子元素是一段文字,这段文字会尽量去换行,以保证尽可能窄。

    如果子元素是固定宽度的,那么此时效果同max-width。

    表格里,你通常看到某列被挤的一行只有一个字,就与该属性有关系。

    width可以是fit-content

    其实fit-content还可以增加个参数,允许是固定长度或百分比,称之为。那么width是fit-content时,真实width是如下公式算出来的:

    min(max-content, max(min-content, )) 
    
    • 1

    也就是说,如果你设置的宽度是在min-content和max-content之间,那么就用你设置的宽度。否则,就用临界值max-content或min-content。

    当然,这个参数不建议你设置,兼容性比较差,直接写width: fit-content即可,它的含义是,子元素有多宽,就多宽。当然结果肯定是小于等于max-content、大于等于min-content的。

    但它不会像max-content一样追求尽可能宽,所以它会在需要换行时换行(例如当父元素有宽度限定时,fit-content的子元素会换行,而max-content的子元素会忽略父元素的宽度限制);也不会像min-content一样,追求尽可能窄,所以它不会无脑换行。

    width可以是auto

    它的表现,基于display,有不同的情况。

    display是block,widht是auto就相当于fill。像html、body、div,这些默认都会撑满屏幕,达到100vw的效果。

    display是inline-block,width是auto相当于fit-content。

    width默认值是auto、height默认是auto

    width默认值是auto、height默认是auto。

    width height可以是百分比

    当width是百分比时,元素的宽度 = 父亲元素的宽度 乘以 width。

    当height是百分比时,元素的高度 = 父亲元素的高度 乘以 height。此时建议父元素是固定数值表示的高度。

    如果父元素是body,且没有给body和html写特殊样式。width的100%就相当于100vw了。因为html和body默认的width是auto(且是block,所以相当于width是fill),body默认会有宽度。所以100%就相当于100vw。

    但是如果父元素是body,且没有给body和html写特殊样式。设置height 100%就不行。因为html和body的height默认值都是auto,具体高度是由子元素决定的。所以如果你需要设置高度,建议用100vh。

    box-sizing对width height的影响

    box-sizing: content-box;

    这是默认值。你设置的就是元素内容的宽和高,不包括padding和border。

    box-sizing: border-box;

    这时,你设置的宽高,是内容+padding+border。有时候,你的元素有边框或padding时,用这种就很方便。

    当max-width和min-width遇到width

    max-width和min-width优先级更高!另外,min-width比max-width优先级更高!

  • 相关阅读:
    如何快速选购腾讯云NVIDIA GPU云服务器实例?
    软件测试面试屡战屡败?——我整理了一份超全面试题详解
    MySQL 导出一条数据的插入语句
    如何检验谷歌开发者账号注册资料的可靠性?
    淘宝/天猫,1688,拼多多,京东店铺获取所有商品详情(api接口详情)
    在阿里6年晋升3次,终获P8岗位,全靠这份PDF(Android研发岗)
    Fiddler基础入门教程【7】--Composer构造器
    SpringBoot中的WebMvcConfigurationSupport和WebMvcConfigurer
    Vue框架中监测数组变化的方法
    【MySQL进阶】深入理解InnoDB数据页结构
  • 原文地址:https://blog.csdn.net/web2022050902/article/details/125891072