美文网首页
css box-sizing属性

css box-sizing属性

作者: CoderZb | 来源:发表于2021-08-16 15:32 被阅读0次

box-sizing属性有三个值 content-box、border-box、inherit,以下主要介绍前两个值。

例子:width为100px,边框宽度为20px

content-box

设置box-sizing:content-box; 后,总宽度为140px,其中内容为100px,左右边框分别为20px。
也就是说设置content-box,内容的宽度不受(内、外)边框的影响,始终都是设置的100px。

border-box

设置box-sizing:border-box; 后,总宽度为100px,其中内容为60px,左右边框分别为20px

image.png

相关文章

  • css属性总结

    记录css属性 <1>box-sizing属性: 例子:div{ box-sizing:border-box;-...

  • CSS3中的box-sizing属性

    box-sizing属性是css3中新添加的属性,用来替换原来的css盒子模型,box-sizing属性值的不同,...

  • box-sizing属性(CSS3新增属性)

    box-sizing属性(CSS3新增属性)box-sizing:content-box(默认值) | borde...

  • 2017-02-20 CSS 学习笔记am

    盒子 box-sizing 属性 CSS3 中新增了一个 box-sizing 属性,这个属性可以保证我们给盒子新...

  • box-sizing:border-box

    box-sizing属性定义及用法 box-sizing属性是css3中新增的属性,允许你以某种方式定义某些元素,...

  • CSS

    1.css3 box-sizing属性 box-sizing属性可以为三个值之一:content-box(defa...

  • 04-CSS总结-持续更新中

    常用CSS 清除浮动 文字两端对齐 CSS属性兼容写法 transform box-sizing

  • 前端小知识Day4

    1、避免大量 if...else... 2、CSS中,box-sizing属性值有什么用? box-sizing用...

  • CSS3 框大小

    CSS3 框大小 CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 pad...

  • css样式属性

    CSS3 框大小 CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 pad...

网友评论

      本文标题:css box-sizing属性

      本文链接:https://www.haomeiwen.com/subject/nugmbltx.html