当前位置:Web前端 > > 正文

在css中width是什么意思(Css深刻理解width:auto的用法)

时间:2022-04-02 16:21:36类别:Web前端

在css中width是什么意思

Css深刻理解width:auto的用法

前言

看了我上篇文章的人可能觉得我小题大做,css2有什么好看的?那么我就参考《css世界》这本书,与大家一同复习理解下具体的点,对我们代码的影响。

首先,我们需要清楚width默认值就是auto,所以不用去人为写代码控制其宽度自动哦。

常见的4种宽度表现

充分利用可用空间

默认块元素都是100%父元素宽度,这点大家都知道,但很多人会针对块元素写多余的宽度为100%。

收缩与包裹

常见的是浮动,行内块元素,绝对定位。我们称这种特性为包裹性。

收缩到最小

这个最容易出现在table-layout为auto表格中,我们不控制表格单元格宽高的时候,当每一列都放不下的时候,会把文字截断,然而手机号,英文单词,数字等不能断,就可能会导致某些只是文字的列,每个字都换行显示,称min-content。

超出容器宽度

一般元素不会超出容器显示,除非以下两种情况,尤其第一种是初级前端在开发中经常遇到的问题。

  1. 内容出现了英文或者数字,不换行显示
  2. 设置了样式white-space:nowrap,不换行。

针对上面两个问题,可以分别做如下纠正。

  1. word-break:break-all
  2. white-space:normal

其他特性

外部尺寸与流体特性

正常流宽度

块元素默认有流体特性,继承父元素宽度,不会超出父元素宽度。然而有些人还是这样写代码:

  • a{
    display:block;
    width:100%;
    }
    
  • 又或者这样的代码,你给导航中的a标签设置间距宽度什么的,其实标签变为块级之后,会自动根据计算拿到属于自己的宽度,多此一举。

  • .nav{
    width:240px}
    .nav-a{
    display:block;
    width:200px;
    margin:0 10px;
    padding:9px 10px ;}
    
  • 格式化宽度

    格式化宽度指出现在绝对定位模型中,包括绝对定位以及固定位置,只是两者参考点不同而已。默认情况下其特性为包括性,由内容宽度决定盒子宽度,但是当(非替换元素)left/right同时设置的时候,其宽度为相对于最近的定位特性不是static的祖先元素计算。其宽度会是父元素宽度-left-right,而其他特性仍然不变。这点在我们实际的布局中有很大的用途,比如我分享的css实用技术中的变宽与固宽结合的布局。

  • .par{
       width:1000px;
       position:relative;
       }
       //子元素宽度为700px
       .son{
       position:absolute;
       left:100px;
       right:200px;}
    
    
  • 内部尺寸与流体特性

    包裹性

    包括性是指当元素为非块元素的时候,其宽度由内容决定,自己只负责根据需要扩大,而由于外部肯定是块元素,所以又不会超出容器特性。

    实际作用有可以不用脚本实现文字较少水平居中,文字较多,靠左显示。

  • .container{
    text-align:center;
    }
    .content{
    display:inline-block;
    text-align:left;
    }
    
    
  • 首选最小宽度

    这个简单的理解就是元素的实际宽度取决于内容的最小单元,这个优先级比width:0高。比如你设置了宽度是0,但是内容有一个汉字,就会有一个汉字的大小;为一个单词就会显示一个单词的大小。

    这种实际的用途可以做各种简单的图形,比如凹凸形状的,然后内容设置为白色就可以。

  • .ao{
    width:0;
    display:inline-block;
    }
    .ao:before{
    color:#fff;
    content:'love你love';
    outline:2px solid #000;
    }
    
  • 最大宽度

    最大宽度就是元素可以有的最大宽度,一般情况下我们用于限制文字或者内容特别多的情况。这样的实际场景并不多。

    在这里我们只延伸两种滚动效果,一种是原生的页面或者dom滚动,另一种就是iscroll那样的设置内部元素与容器的位置关系来展现,效果更好。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐