zoukankan      html  css  js  c++  java
  • width:100% width:auto 区别

    width:100%100%,则说明p的width会得到500px就已经充满div区域,然后自己又有padding,所以会出现滚动条。并不包含margin-left margin-right的属性值,直接取其父容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。(细心观察)就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。

    auto则比较聪明,它是总体宽度(广义,包括width,margin,padding,border这些)等于父级宽度(狭义,内容区,仅指width),所以如果padding已经左右占去20px的空间,那么width给的值就是480px。auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。auto总是占据整行!!!这其中margin的值已经包含其中了(也就是一整行)如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。

    但无论是100%还是auto,其计算的参照都是父级内容区width值,而非总宽度值。。

  • 相关阅读:
    echarts常用说明
    ionic4打包和ngix配置
    浏览器onbeforeunload
    vue中keepAlive的使用
    面试题
    git使用
    git常用命令
    ajax原理
    关于npm(一)
    React、Vue、Angular对比 ---- 新建及打包
  • 原文地址:https://www.cnblogs.com/yuanyuan-1994/p/8656705.html
Copyright © 2011-2022 走看看