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
    评论
要实现antd表格高度自适应,有几种方法可以尝试。首先,通过修改组件中的width属性为minWidth属性来解决表格不自适应宽度的问题。具体做法是在columns数组中的每个对象中将width属性改为minWidth属性,例如:{ title: '账户名', key: 'accountName', fixed: 'left', minWidth: 150 }。这样就可以确保表格的宽度不会溢出容器。 其次,如果想要让分页部分的底边自适应屏幕高度,可以使用CSS选择器::v-deep和calc()函数来设置表格的高度。例如,使用以下CSS代码可以实现分页部分底边自适应屏幕高度的效果:.ant-table { height: calc(100vh - 170px); }。这样就可以确保表格的高度在不同屏幕大小下自适应。 另外,如果需要实现表格内容区域可以滚动的效果,可以使用以下CSS代码来设置表格的高度和滚动属性:.ant-table-scroll { height: calc(100vh - 170px); overflow: auto scroll; }。这样就可以在表格内容超出容器高度显示滚动条。 此外,还可以通过监听窗口大小变化来动态修改表格的高度。可以在mounted钩子函数中添加window.onresize事件监听窗口大小的变化,并使用document.body.clientHeight来获取窗口的高度。然后根据这个值来修改表格的高度。具体做法可以参考以下代码: ```typescript // 在组件内部 public clientHeight = 0; // 监听视窗大小变化 mounted() { const that = this; window.onresize = () => { return (() => { that.clientHeight = document.body.clientHeight; // 可在这里进行修改操作 // ... })(); }; } // Watch监听clientHeight属性,并在回调函数内部进行修改操作 @Watch('clientHeight') private getHeight() { // 修改操作 // ... } ``` 通过上述方法,可以实现antd表格的高度自适应。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值