深入理解css

低调的width:auto

width 的默认值是auto；但auto至少包含4种不同的宽度表现：

  1. 充分可利用空间。如div，p这些块级元素的默认宽度默认是100%于父级容器的，即 fill-available 。
  2. 收缩与包裹。典型代表是浮动，绝对定位，inline-block元素或table元素，即shrink-to-fit ，类似于CSS3中的 fit-content 指的是这种宽度表现。
  3. 收缩到最小。这个最容易出现在table-layout为auto的表格中，当一列空间不够时，文字说断就断。
  4. 超出容器限制。除非有明确的width相关设置，否则这上面3种情况都不会主动超过父级容器宽度，但存在一些特殊情况。如：内容很长的连续的英文与数字，或者内联元素被设置了white-space:nowrap,则会将所有元素堆在一行。
格式化宽度。
  • 格式化宽度仅出现在”绝对定位宽度“中，也就是出现在position属性值为absolute或fixed的元素中。在默认情况下，绝对元素的宽度表现是”包裹性“，宽度由内部尺寸决定。
  • 但是对于非替换元素，即left/top或top/bottom对立方位的属性值同时存在时，元素的宽度表现为”格式化宽度“，其宽度的大小相对于最近的具有定位特性（position属性值不是static）的祖先元素计算。

内部尺寸：简单讲就是元素的尺寸由内部的元素决定，而非外部的容器决定。如何快速判断一个元素使用的是否为”内部尺寸“呢？很简单，假如这个元素里面没有内容，宽度就是0，那就是应用的”内部尺寸“。

  • button标签按钮才会自动换行，input标签按钮默认white-space:pre是不会换行的，需将pre值重置为normal。
动态文字例子

需求：页面某个模块文字内容是动态的，文字少时居中显示，超过一行者居左显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="index.js"></script> -->
    <style>
       .box{
           padding: 10px;
           background-color: #cd0000;
           text-align: center;
       }
       .content{
           display: inline-block;
           text-align: left;
       }
    </style>
</head>
<body>
   <div class="box">
       <p id="conMore" class="content">
        文字内容
       </p>
   </div>
   <button>get more</button>
</body>
</html>
<script>
    var btn = document.getElementsByTagName('button')[0];
    var content = document.getElementById('conMore');
    if(btn && content){
        btn.onclick = function(){
            content.innerHTML += '你好';
        }
    }
</script>

这主要得益于”包裹性“，未达内部容器大小时，样式主要取决于外部盒子，超过时，取内部容器大小。除了 inline-block 元素，浮动元素以及绝对定位元素都具有包裹性，据有类似的智能宽度的行为。

本文标题:深入理解css

文章作者:陈楚吟

发布时间:2020-03-26, 11:23:41

最后更新:2020-03-26, 11:50:20

原始链接:http://yoursite.com/2020/03/26/深入理解css/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 低调的width:auto
    1. 1.0.1. 格式化宽度。
    2. 1.0.2. 动态文字例子
|