<!-- 《CSS世界》 张鑫旭著  -->

width:auto

width:auto至少包含了以下4种不同的宽度表现:

  • 充分可利用空间。比方说,<div>、<p>这些元素的宽度默认是100%于父级容器的。
  • 收缩与包裹。典型代表是浮动、绝对定位、inline-block元素或table元素,英文成为shrink-to-fit,直译为“收缩到合适”,更形象的叫法是“包裹性”
  • 收缩到最小。这个最容易出现在table-layout为auto的表格中
  • 超出容器限制。除非有明确的width相关设置,否则上面三种情况尺寸都不会出动超出父级容器宽度的,但存在一些特殊情况。例如:内容很长的连续的英文和数字,或者内联元素被设置了white-space:nowrap。

尺寸分“内部尺寸”和“外部尺寸”。其中“内部尺寸”表示尺寸由内部元素决定,“外部尺寸”表示宽度由外部元素决定。上面4种尺寸表现,就地一个是“外部尺寸”。

1.外部尺寸与流体特性

(1)正常流宽度

当我们在一个容器中倒入足量的水,水一定会均匀铺满整个容器。

在页面中随便扔一个<div>元素,其尺寸表现就会和水流一样铺满容器。这就是block容器的流特性。

表现为“外部尺寸”的块级元素一旦设置了宽度,流动性就丢失了。

所谓流动性,并不是看上去的宽度100%显示这么简单,而是一种margin/border/padding和content内容区域自动分配水平空间的机制

示例见 http://demo.cssworld.cn/3/2-3.php

(2)格式化宽度

格式化宽度仅出现在“绝对定位模型”中,也就是出现在position属性值为absolute或fixed的元素中。

在默认情况下,绝对定位元素的宽度表现为“包裹性”,宽度由内部尺寸决定,但是有一种情况其宽度是由外部尺寸决定的:

对于非替换元素,当left/right或top/bottom对立方位的属性值同时存在时,元素的宽度表现为“格式化宽度”,其宽度大小相对于最近的具有定位特性(position属性值不是static)的祖先元素计算。

和上面的普通流一样,“格式化宽度”具有完全的流动性,也就是margin/border/padding和content内容区域自动分配水平(和垂直)空间

 2.内部尺寸与流体特性

(1)包裹性

“包裹性”除了“包裹”,还有“自适应性”。

所谓“自适应性”,指的是元素尺寸由内部元素决定,但永远小于“包含块”容器的尺寸(除非容器尺寸小于元素的“首选最小宽度”)。

根据这个特性,我们可以实现,例如:文字少的时候居中显示,文字超过一行的时候居左显示。核心CSS代码如下:

.box{
text-align:center;
}
.content{
display: inline-block;
text-align: left;
}

具体可点击查看:http://demo.cssworld.cn/3/2-5.php

inline-block元素、浮动元素以及绝对定位元素、table元素都具有包裹性。

(2)首选最小宽度

所谓“首选最小宽度”,指的是元素最适合的最小宽度。

假如外部容器的宽度是0,里面width:auto的inline-block元素的宽度不会是0,此时所表现的宽度就是“首选最小宽度”。具体表现规则如下:

  • 东亚文字(如中文)最小宽度为每个汉字的宽度
  • 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元,一般会终止于空格(普通空格)、短横线、问号以及其他非英文字符等。
  • 类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度。

具体可查看:http://demo.cssworld.cn/3/2-6.php

(3)最大宽度

“最大宽度”实际等同于“包裹性”元素设置white-space:nowrap声明后的宽度。

如果内部没有块级元素或者块级元素没有设定宽度值,则“最大宽度”实际上是最大的连续内联盒子的宽度。

“连续内联盒子”是指全部都是内联级别的一个或一堆元素,中间没有任何的换行标签<br>或其他块级元素。

具体应用可查看:http://demo.cssworld.cn/3/2-7.php

width是作用在“内在盒子”上的,这个“内在盒子”是由很多部分构成的,由内至外是:content、padding、border、margin。

《CSS世界》读书笔记(三) --width:auto的更多相关文章

  1. 《CSS世界》笔记二:盒模型四大家族

    上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...

  2. CSS揭秘读书笔记 (一)

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  3. 【转载】MDX Step by Step 读书笔记(三) - Understanding Tuples (理解元组)

    1. 在 Analysis Service 分析服务中,Cube (多维数据集) 是以一个多维数据空间来呈现的.在Cube 中,每一个纬度的属性层次结构都形成了一个轴.沿着这个轴,在属性层次结构上的每 ...

  4. Struts2技术内幕 读书笔记三 表示层的困惑

    表示层能有什么疑惑?很简单,我们暂时忘记所有的框架,就写一个注册的servlet来看看. index.jsp <form id="form1" name="form ...

  5. 《css世界》笔记之流、元素与基本尺寸

    1. 块级元素 基本特性:就是一个水平流上只能单独显示一个元素,多个块级元素则换行显示. 块级元素和"display 为block 的元素"不是一个概念,display:list- ...

  6. 《你必须知道的.NET》读书笔记三:体验OO之美

    此篇已收录至<你必须知道的.Net>读书笔记目录贴,点击访问该目录可以获取更多内容. 一.依赖也是哲学 (1)本质诠释:“不要调用我们,我们会调用你” (2)依赖和耦合: ①无依赖,无耦合 ...

  7. Spring揭秘 读书笔记 三 bean的scope与FactoryBean

    本书可作为王富强所著<<Spring揭秘>>一书的读书笔记  第四章 BeanFactory的xml之旅 bean的scope scope有时被翻译为"作用域&quo ...

  8. ES6读书笔记(三)

    前言 前段时间整理了ES6的读书笔记:<ES6读书笔记(一)>,<ES6读书笔记(二)>,现在为第三篇,本篇内容包括: 一.Promise 二.Iterator和for of循 ...

  9. 《精通CSS》读书笔记(一)

    最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...

  10. Mastering Web Application Development with AngularJS 读书笔记(三)

    第一章笔记 (三) 一.Factories factory 方法是创建对象的另一种方式,与service相比更灵活,因为可以注册可任何任意对象创造功能.例如: myMod.factory('notif ...

随机推荐

  1. tensorflow 调试tfdbg

    1.执行pip install pyreadline 安装pyreadline 2.修改对应代码如下 with tf.Session() as sess: sess.run(tf.global_var ...

  2. Java中的堆内存设置对线程创建数的影响以及-Xss参数的记录

    Java的线程对象是存储在堆上的,所以,能够创建多少个线程,受到堆空间的大小限制,同时也受到每个线程的大小的限制,假如线程对象内部有一个非常大的数组字段,那就非常影响能够创建的线程的大小 我们的例子: ...

  3. iOS - 数组字典模型根据模型属性key排序

    方法一: NSArray *sortArray = [arrayM sortedArrayUsingComparator:^NSComparisonResult(id obj1, id obj2) { ...

  4. LDA总结 (一) 共轭分布

    今天开始,复习一下 LDA ,记录一些 LDA 的关键步骤,为写好论文做铺垫.第一节的主题是共轭分布,回忆贝叶斯公式: \[p(\theta|X) = \frac{p(\theta) \cdot p( ...

  5. 队列Queue、栈LifoQueue、优先级队列PriorityQueue

    队列:队列是先进先出. import queue q = queue.Queue() q.put(1) q.put(2) q.put(3) q.put(4) print(q.get()) print( ...

  6. 使用soap遇到的缓存问题

  7. Nest.js WebSocket

    Docs: https://docs.nestjs.com/websockets/gateways λ yarn add @nestjs/websockets λ nest g ga events e ...

  8. FTPService工具类

    package com.vcredit.ddcash.server.commons.net; import com.vcredit.ddcash.server.commons.model.FtpPar ...

  9. Elegance and familiarity are orthogonal.

    作者:xiaodan zhuang链接:https://www.zhihu.com/question/21446061/answer/18421931 1.Clojure能够吸引人的很重要一点是它是J ...

  10. iOS之关于Architectures设置及Build Active Architecture Only编译设置

    一,前言 最近在帮朋友解决极光报错的提示:“file was built for archive which is not the architecture being linked (i386)”时 ...