antd option宽度自适应_《CSS世界》笔记——宽度、高度拾遗

替换元素

根据是否具有可替换内容,可以把元素分为替换元素和非替换元素。通过修改某个属性值呈现的内容就可以被替换的元素称为“替换元素”。

常见的替换元素有<img>、<object>、<video>、<iframe>、<input>、<textarea>、<select>等。

替换元素特性:

  1. 内容可替换。如改变img的src就可以替换图片。
  2. 外观表现在CSS作用域之外。如单复选框无法通过CSS直接更改内间距、背景色等样式。
  3. 有默认尺寸。表单的替换元素的默认尺寸和浏览器有关;<video>、<iframe>、<canvas>的默认尺寸一般为300像素x150像素;<img>替换元素默认尺寸一般为0像素。
  4. 替换元素在一些CSS属性上有自己的一套表现规则。如vertical-align属性,vertical-align属性的默认值为baseline,对于非替换元素来说,baseline定义为字符x的下边缘;而替换元素的基线则指的是元素的下边缘。
  5. 替换元素都是内联水平元素,其默认的display值为inline或者inline-block。对于替换元素来说,display的值不影响元素的宽度和高度计算规则。

替换元素计算规则:

规则:CSS尺寸 > HTML尺寸 > 固有尺寸。

  1. 固有尺寸指的是替换内容原本的尺寸,或元素的默认尺寸,如图片本身的高度和宽度,input元素默认显示的尺寸。
  2. HTML尺寸指的是使用HTML属性定义的尺寸。这个HTML属性包括<img>的width和height属性、<input>的size属性、<textarea<的cols和rows属性等。
  3. CSS尺寸指的是通过CSS属性定义的尺寸信息,如width、height、min-width等。

首选最小宽度

首选最小宽度指的是元素最适合的最小宽度。在CSS中,图片和文字的权重要大于布局,因此外部容器width为0时,图文宽度并不会变成0,此时表现出的宽度就是“首选最小宽度”:

7b84af8f32b842151ec32af5b81fc3d0.png

首选最小宽度的表现规则如下:

  1. 中文最小宽度为每个汉字的宽度;
  2. 英文最小宽度由特定的连续英文字符单元决定,一般止于空格、短横线、问号及其它非英文字符(word-break: break-all时最小宽度为每个字符的宽度);
  3. 替换元素(img、input等)的最小宽度为该元素内容本身的宽度,如下图所示。

b2f832afa7193b095fee1fe2687f3249.png

宽度分离原则和box-sizing: border-box

宽度分离原则就是CSS中的width属性不与影响宽度的padding/border属性共存,,即不能出现类似以下组合:

.box {
  width: 100px;
  padding: 20px;
}

默认情况下元素的宽度是width、padding和border共同作用的结果,设计稿一旦更改,width需要重新计算,因此宽度分离的目的是便于维护和更改。

宽度分离实现方式有以下两种:

  1. 使用box-sizing: border-box。(替换元素<input>、<textarea>要100%自适应父容器宽度,box-sizing必须为border-box。因为替换元素尺寸由内部元素决定,故设置display:block不能改变替换元素的宽度,故只有设置width: 100%才能使替换元素100%自适应父容器宽度;而<input>这些一般都有border和padding,于是width和border、padding要共存,同时还要整体宽度100%自适应容器,故box-sizing必须为border-box。
.box {
  width: 100px;
  border: 1px solid;
  box-sizing: border-box
}
  1. 增加一层标签,width独立占用一层标签。
.father {
  width: 100px;
}
.son {
  padding: 0 20px;
  border: 1px solid;
}

min-width/max-width、min-height/max-height

  1. min-width/min-height的初始值是auto,max-width/max-height的初始值是none;
  2. min-width/max-width、min-height/max-height属性与width、height之间有一套相互覆盖的规则:超越 !important,超越最大。
  • min-width/max-width权重大于!important:

de117a58200010e6391e7ff905bfbd98.png
  • min的优先级高于max,即min-width覆盖max-width。

内联盒模型

  1. 内联盒子(inline box)。内联盒子不会让内容成块显示,而是排成一行。
  2. 行框盒子(line box)。每一行就是一个“行框盒子”,每个“行框盒子”是由一个一个“内联盒子”组成的。

strut(幽灵空白节点)

"Each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a 'strut' ". 假想盒strut(幽灵空白节点)是HTML5文档中存在于每个“行框盒子”前面的具有该元素的字体和行高属性的0宽度内联盒。

cf5a0035e75008f61807ac02edf20b62.png

如上所示,div、span的高度为0,但表现出的高度不为0,因为span元素前面有个宽度为0高度不为0的空白节点,撑起了整个行框盒子。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值