不会去计算padding和border的值  元素的宽度就是给的宽度

本文探讨了CSS中box-sizing属性的作用及其在不同情况下的应用,特别是在结合Vue框架进行响应式网页设计时的实践。通过示例代码,展示了如何使用box-sizing:border-box来避免元素宽度计算中的常见陷阱,同时介绍了Vue中使用$set方法更新响应式数据的技巧。

    .box {
    width: 300px;
    height: 300px;
    border: 10px solid red;
    /*
        box-sizing: border-box;     不会去计算padding和border的值  元素的宽度就是给的宽度
                                    border和padding计算入width之内
    */
    box-sizing: border-box;
}

    client: {

      height: document.body.clientHeight,

      width: document.body.clientWidth

    }

    var scope = this

    window.document.body.onresize = function() {

      scope.$set(scope.client, 'height', document.body.clientHeight)

      scope.$set(scope.client, 'width', document.body.clientWidth)

    }

import { mapState } from 'vuex'

    ...mapState(['m', 'n', 'g'])

this.$store.commit('st', 1)

// 验证是否是纯数字(包括0)

export function isNumbers(rule, value, callback) {

  setTimeout(() => {

    const re = /^[0-9]\d*\,\d*|[0-9]\d*$/

    const rsCheck = re.test(value)

    if (!rsCheck && value !== '') {

      callback(new Error('请输入数字'))

    } else {

      callback()

    }

  }, 0)

}

// 文本换行转<br/>

export function preText(pretext) {

  if (!pretext || pretext === '' || pretext === undefined) return ''

  const reg = new RegExp('\n', 'g')

  const txt = String(pretext).replace(reg, '<br/>')

  return txt

}

service.interceptors.response.use(

  response => {

},

error =>{

})

service.interceptors.request.use(

  config => {},

error=>{})

 

import Cookies from 'js-cookie'

Cookies.set('token', '00000')

<think> 我们正在讨论当父元素设置 `display:flex` 后,子元素仅设置 `padding` 而设置宽度高度时的表现。 根据Flexbox规范,子元素(flex item)在没有设置宽度高度时,其尺寸由内容决定,但会受到flex属性的影响。 关键点: 1. **宽度(在主轴方向)**: - 默认情况下,子元素宽度由内容决定(即内容宽度 + padding + border)。 - 但是,如果所有子元素的总宽度(包括paddingborder)超过了父容器的宽度: - 如果父容器设置 `flex-wrap: nowrap`(默认),则子元素会被压缩(flex-shrink默认为1),导致实际宽度小于内容宽度。 - 如果父容器设置 `flex-wrap: wrap`,则子元素可能会换行,不会压缩。 - 注意:在Flex容器中,子元素默认的 `flex-shrink` 为1,所以当空间足时,子元素会收缩。 2. **高度(在交叉轴方向)**: - 在默认的 `flex-direction: row` 下,交叉轴是垂直方向。 - 子元素的高度默认由内容决定(即内容高度 + padding + border),但会受到 `align-items` 属性的影响。 - 如果 `align-items: stretch`(默认),则子元素的高度会被拉伸以填满父容器的高度(前提是父容器有固定高度,或者子元素中最高的那个元素的高度)。 - 如果 `align-items: flex-start` 等,则子元素的高度由自身内容决定。 现在,子元素未设置宽度高度,仅设置了padding。那么: - 宽度 = 内容宽度 + 左右padding - 高度 = 内容高度 + 上下padding 但是,在Flex容器中,由于收缩拉伸的存在,实际尺寸可能会改变。 具体表现: 1. **主轴方向(通常水平)**: - 子元素的内容宽度padding共同构成它的初始大小(即flex-basis: auto,此时flex-basis等于内容+padding)。 - 如果父容器空间足,且允许收缩(flex-shrink为0),则子元素会被压缩,压缩的是内容区域(注意:padding不会被压缩,因为padding属于盒模型的一部分,但压缩时会影响内容区域,比如文本换行)。 - 如果父容器空间有剩余,且子元素允许扩展(flex-grow为0),则子元素会扩展,扩展的是内容区域(即宽度增加,但padding保持变)。 2. **交叉轴方向(通常垂直)**: - 如果父容器没有设置高度,则父容器的高度由子元素中最高的那个决定(包括该子元素padding内容高度)。 - 对于每个子元素: - 当 `align-items: stretch`(默认)时,子元素的高度会被拉伸至父容器的高度。此时,子元素的高度 = 父容器高度 - 自身的上下borderpadding(如果有)。注意:内容高度会被拉伸,但padding保持变(所以总高度=拉伸后的内容高度+padding)。 - 当 `align-items: flex-start` 时,子元素的高度由自身内容高度+padding决定,不会拉伸。 注意:padding始终会被保留,不会因为flex布局而改变。 示例说明: 假设有如下HTMLCSS: ```html <div class="container"> <div class="item">文本1</div> <div class="item">较长的文本2</div> <div class="item">非常非常长的文本3</div> </div> ``` ```css .container { display: flex; /* 默认 flex-direction: row, flex-wrap: nowrap, align-items: stretch */ width: 500px; /* 假设固定宽度 */ border: 1px solid; } .item { padding: 20px; /* 四个方向padding */ /* 设置宽度高度 */ } ``` 表现: - 每个.item的宽度初始 = 内容宽度 + 40px(左右padding)。 - 如果三个.item的初始总宽度超过500px,则它们会被压缩(每个item的内容宽度会变小,但左右padding保持变)。 - 高度:由于默认align-items: stretch,如果父容器没有设置高度,则父容器高度等于最高的子元素的内容高度+上下padding(40px)。然后每个子元素的高度都会被拉伸到父容器的高度(所以每个子元素的内容区域高度=父容器高度-40px)。 特殊情况:如果子元素没有内容(比如只有一个空的div,但设置了padding),那么: - 宽度:在没有内容的情况下,内容宽度为0,所以宽度=左右padding。 - 高度:同样,内容高度为0,所以高度=上下padding(如果align-items:stretch,则高度会被拉伸到父容器高度,但注意:此时子元素的高度=父容器高度,而padding仍然保留,所以内容区域高度=父容器高度 - 上下padding)。 引用说明: - 在引用[1]中提到,当子元素宽度大于父容器宽度时,子元素会被压缩(flex-shrink生效),导致实际宽度小于设置。这里虽然子元素没有设置宽度,但初始宽度(内容+padding)大于父容器分配的空间,同样会被压缩[^1]。 - 在引用[2]中,通过设置flex-shrink:0可以防止子元素被压缩[^2]。 - 引用[3]中提到设置min-width来保证子元素的最小宽度[^3]。 因此,在回答中需要强调: - 子元素的初始尺寸由内容+padding决定。 - 在空间足时,子元素宽度可能被压缩(内容区域被压缩,padding变)。 - 在交叉轴方向,默认拉伸,高度可能会被拉伸(但padding变)。 相关问题: 1. 如何防止Flex容器中的子元素宽度被压缩? 2. 在Flex布局中,子元素高度如何被拉伸?如何避免? 3. 当Flex子元素没有内容时,其尺寸如何计算? </think> ### 父元素设置 `display:flex` 后,子元素仅设置 `padding` 时的表现分析 当父元素设置为 Flex 容器(`display:flex`),且子元素**未设置宽度高度,仅设置 `padding`** 时,布局行为如下: --- #### 1. **宽度表现(主轴方向)** - **默认行为**: - 子元素宽度由内容决定(内容宽度 + 左右 `padding`) - 如果所有子元素宽度超过父容器宽度: - 默认 `flex-wrap: nowrap` 时会压缩子元素(`flex-shrink:1`) - 子元素实际宽度 = `内容宽度 + padding - 压缩量` *(压缩量根据 `flex-shrink` 比例分配)* ```css /* 示例:子元素被压缩 */ .parent { display: flex; width: 300px; } .child { padding: 0 20px; } /* 内容宽100px的子元素实际宽度<100px+40px */ ``` - **防压缩方案**: - 设置 `flex-shrink: 0` 禁止压缩(宽度 = 内容宽度 + 左右 `padding`) - 或设置 `min-width: max-content` 保证最小宽度[^3] ```css .child { padding: 0 20px; flex-shrink: 0; /* 禁止压缩 */ /* 或 min-width: max-content; */ } ``` --- #### 2. **高度表现(交叉轴方向)** - **默认行为**: - 子元素高度 = 内容高度 + 上下 `padding` - **关键影响**: - 若父容器未设高度,容器高度由最高子元素决定(内容高度 + 其 `padding`) - 若父容器设固定高度,子元素默认拉伸填满容器(`align-items: stretch`),此时: 子元素高度 = 父容器高度(忽略自身 `padding` 内容高度) *(内容区域高度 = 父容器高度 - 上下 `padding`)* ```css /* 示例:子元素被拉伸 */ .parent { display: flex; height: 100px; /* 固定高度 */ align-items: stretch; /* 默认 */ } .child { padding: 10px; } /* 高度=100px,内容区域高度=80px */ ``` - **避免拉伸**: - 设置 `align-items: flex-start` 取消拉伸,高度由内容 + `padding` 决定 ```css .parent { display: flex; align-items: flex-start; /* 高度由内容+padding决定 */ } ``` --- #### 3. **特殊场景解析** | 场景 | 宽度表现 | 高度表现 | |--------------------------|----------------------------------|-----------------------------------| | 父容器空间充足 | 内容宽度 + 左右 `padding` | 内容高度 + 上下 `padding` | | 父容器宽度足(默认) | 被压缩(内容区域缩小) | 受影响 | | 父容器高度固定(默认) | 受影响 | 被拉伸(内容区域高度 = 父高 - 上下`padding`) | | 子元素无内容(仅`padding`) | 宽度 = 左右 `padding`(接近0) | 高度 = 上下 `padding`(接近0) | --- ### 关键总结 1. **Padding 始终保留**: 无论压缩或拉伸,`padding` 始终生效,不会减少。 2. **内容区域受影响**: - 宽度压缩时:内容区域宽度减小(可能引起文本换行)[^1][^2] - 高度拉伸时:内容区域高度 = 父容器高度 - 上下 `padding` 3. **布局稳定性建议**: - 禁止压缩:`flex-shrink: 0` - 禁止拉伸:`align-items: flex-start` - 最小宽度保护:`min-width: max-content`[^3]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值