中小型企业网站选择什么配置的亚马逊服务器,微信代运营公司,邢台手机网站建设报价,网络推广有哪些途径1. CSS2.1的尺寸体系
在CSS2.1的世界中#xff0c;常见的尺寸分为这几类#xff1a;
2.1 充分利用可用空间。例如#xff0c;一些div元素默认宽度100%父元素#xff0c;这种充分利用可用空间的行为就称为“fill-available”。
2.2 收缩与包裹。典型代表就是浮动#xf…1. CSS2.1的尺寸体系
在CSS2.1的世界中常见的尺寸分为这几类
2.1 充分利用可用空间。例如一些div元素默认宽度100%父元素这种充分利用可用空间的行为就称为“fill-available”。
2.2 收缩与包裹。典型代表就是浮动绝对定位以及inline-block英文称为“shrink-to-fit”直译为“收缩到合适”这种直译往往都是不准确的这种行为表现确实很难描述有些只可意会不能言传的感觉而我自己一直以“包裹性”作为理解。在CSS3中有个专有的关键名称fit-content
2.3 收缩到最小。这个基本上就出现在table-layout为auto的表格中想必有经验的小伙伴一定见过下面这样一柱擎天的盛况的吧 大家空间都不够的时候文字能断的就断中文是随便断的英文单词不能断。于是乎第一列被无情地每个字都断掉形成一柱擎天。这种行为称之为“preferred minimum width”或者“minimum content width”也就是本文的重点角色之一min-content换了一个更加规范好听的名字了。
2.4 超出容器限制 上面1~3情况除非有明确的width相关设置否则尺寸都不会主动超过容器宽度的但是存在一些特殊情况例如连续的英文数字好长好长或者内联元素被设置了white-space:nowrap则表现为一江春水向东流
例如下面 max-content的表现与之有些类似具有收缩特性同时最大内容宽度
2. 理解width:fill-available
width:fill-available比较好理解比方说我们在页面中扔一个没有其他样式的div元素则此时该div元素的width表现就是fill-available自动填满剩余的空间。也就是我们平常所说的盒模型的margin,border,padding的尺寸填充。
出现fill-available关键字值的价值在于我们可以让元素的100%自动填充特性不仅仅在block水平元素上其他元素例如我们一直认为的包裹收缩的inline-block元素上 此时元素兼具了块状元素的自动填充特性以及内联元素的定位对齐等特性(vertical-align/height/line-height)。于是例如我们就可以直接使用line-height让一个块状表现的元素垂直居中 3. 理解width:max-content
max-content的行为表现可以这么理解假设我们的容器有足够的宽度足够的空间此时所占据的最大宽度是就是max-content所表示的尺寸。 会发现width:max-content表现得好像设置了white-space:nowrap一样文字一马平川下去元素的宽度也变成了这些文字一行显示的宽度为什么会这么表现呢定义就是这样的对吧我们对照下首先假设我们的容器有足够的空间你想呀容器足够空间那下面的描述文字肯定会从左到右排列一行显示了此时上面的图片和下面的文字哪个内容宽度大自然是文字啦所谓max-content就是width值采用宽度大的那个内容的宽度也就是这里的文字的长度了
4. 理解width:min-content
min-content宽度表示的并不是内部哪个宽度小就是哪个宽度而是采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。
首先我们要明白这里的“最小宽度值”是什么意思。对于替换元素例如图片的最小宽度值就是图片呈现的宽度对于文本元素如果全部是中文则最小宽度值就是一个中文的宽度值如果包含英文因为默认英文单词不换行所以最小宽度可能就是里面最长的英文单词的宽度。So大家明白的说 同样的是和display:inline-block做比较display:inline-block虽然也具有收缩特性但宽度随最大长度长的那一个同时不超过可用宽度。而width:min-content的最终宽度是图片和文字最小宽度值里面较大的那一个
5. 理解width:fit-content
width:fit-content也是应该比较好理解的“shrink-to-fit”表现换句话说和CSS2.1中的float, absolute, inline-block的尺寸收缩表现是一样的
OK然后有小伙伴会疑问既然跟很多CSS声明有一样的表现那为什么还要再弄个新东西呢
就拿水平居中效果举例首先浮动肯定不行因为只有左浮动和右浮动绝对定位压根不占据空间普通流中根本无法应用而inline-block需要父级使用text-align:center而本身可能还需要text-align:left略烦。
而width:fit-content可以没有这些烦恼因为width:fit-content可以实现元素收缩效果的同时保持原本的元素block水平状态于是就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。
