box-sizing:border-box,padding-box 颠覆盒子模型

最新推荐文章于 2022-10-17 15:41:24 发布
最新推荐文章于 2022-10-17 15:41:24 发布
阅读量5.7k 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ISaiSai/article/details/42780071
版权

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="gbk">
    <style type="text/css">
        .base_class {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 20px;
            border: 5px solid #ffff00;
            background-color: gray;
        }
    </style>
</head>
<body>
<div class="base_class" style="box-sizing:border-box">border-box</div>
<div class="base_class" style="box-sizing:content-box">content-box 是默认值</div>
<div class="base_class " style="box-sizing:padding-box" >padding-box(firefox支持)</div>
<div class="base_class" style="box-sizing:inherit">继承父亲元素</div>
</body>
</html>
ISaiSai
关注
专栏目录
【css】半透明边框- background-clip: padding-box;
qq_34365469的博客
03-14 1900
一.要达到的效果 半透明边框效果 二.效果图 三.相关知识点 背景图片从什么地方开始裁切: background-clip content-box: 只显示内容区部分的背景图片 padding-box:显示内容区和内边距部分的背景图片 border-box: 显示内容区、内边距和边框部分的图 四.源码 ----------------------------------...
【CSS】CSS3新特性-新增选择器-盒子模型-滤镜-过渡-2D-3D-透视-动画-浏览器私有前缀等
YK菌的博客
12-20 353
文章目录1. 现状2. 新增选择器2.1 属性选择器2.2 结构伪类选择器2.3 伪元素选择器（重点）使用场景2.3.1 伪元素字体图标2.3.2 仿土豆效果2.3.3 伪元素清除浮动3. 盒子模型4. 其他特性4.1 滤镜 filter4.2 calc函数4.3 过渡transition (重点)5. 2D转换5.1 translate 位移5.2 rotate 旋转5.3 2D转换中心点 transform-origin5.4 缩放scale5.5 2D转换综合性写法5.6总结6. 动画 animati
css3中box-sizing属性用法详解-content-box-padding-box-border-box
weixin_34363171的博客
12-26 453
手机页面多列不计算Border的方法 %borderbox{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;} box-sizing...
css3 box-sizing属性
xiaozhen0610的博客
06-09 250
定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 默认值： content-box 继承性： no 版本： CSS3 JavaScript 语法： object.style.boxSizing="border-box" box-sizing：content-box | border-box 默认.
css3 box-sizing属性（width,padding,border）
weixin_38405133的博客
05-02 347
css3 box-sizing属性 box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。 content-box，border和padding不计算入width之内 padding-box，padding计算入width内 border-box，border和padding计算入width之内
html css box sizing,CSS3 box-sizing属性详解
weixin_42472263的博客
06-18 170
简介box-sizing属性包括content-box(default)，border-box，padding-box。1、content-box，border和padding不计算入width之内2、padding-box，padding计算入width内3、border-box，border和padding计算入width之内，其实就是怪异模式了~注意：ie8+浏览器支持content-box...
CSS学习笔记
YuKing_HONG的博客
10-17 1444
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
CSS详细笔记
nuomi_w的博客
11-15 821
1.CSS简介 CSS的主要使用场景就是美化网页，布局页面的。 1.1HTML的局限性 说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如表明这是一个大标题，表明这是一个段落，表明这儿有一个图片，表示此处有链接。 1.2 CSS-网页的美容师 CSS是层叠样式表(Cascading Style Sheets)的简称. 有时我们也会称之为CSS样式表或级联样式表。 总结: HTML主要做结构,显示元素内容. CSS美化 HTML,布局网页. CSS最大价值:由HTML专注去做结构呈现，样式交给
CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换
weixin_53155105的博客
08-03 580
CSS3 新增选择器 CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 注意：类选择器、属性选择器、伪类选择器，权重为 10 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点） 总结： 伪元素选择器（重点） 伪元素选择器可以帮助我们......
前端学习笔记02-css
abc_123_cba_123的博客
01-22 2032
CSS引入方式选择器1.1标签选择器1.2类选择器1.3id 选择器1.4通配符选择器字体属性文本属性 引入方式 css的引入方式有三种，分别是：行内样式、内部样式、外部样式 1.行内样式表 行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式. 例：<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div> 2. 内部样式表 内部样式表（内嵌样式表）是写到htm
box-sizing布局学习笔记
icessun
03-05 3753
首先学习box-sizing布局之前，来了解一下css盒子模型（Box Model）盒子模型（Box Model）一般来说，css盒子模型有两种模式： W3C的标准模型 相当于 box-sizing：content-box 我们对元素设置的宽度和高度就是内容（content）的宽度和高度，也就是内盒子的宽度；外盒子的宽度包括：content+padding+border的 - IE的传统模
padding填充与box-sizing: border-box配合使用
weixin_30788619的博客
01-23 514
不管伸缩盒还是浮动盒子，只要使用到padding，就必须使用 box-sizing: border-box; 有图片的时候，需摇与其他文字对齐的时候，在图片的外层加个：vertical-align:middle; 转载于:https://www.cnblogs.com/zhoubingyan/p/8336566.html...
padding，margin，盒模型
wen_special的博客
02-09 303
padding：内边距。内部填充。设置padding之后会撑开容器的大小。可以设置4个方向的：top，right，bottom，left。 若padding:20px ，则在容器的4个方向的padding都为20px; 若padding：20px 30px， 则在容器的上下方向的padding值为20px，左右方向的padding值为30px; 若padding：10px 20px 30px，...
CSS3:background-orgin：padding-box、border-box、content-box属性值理解
m0_43410458的博客
05-18 782
border-box：起始位置为左上角，背景覆盖包括所有边框宽度，padding不影响背景起始位置 ​content-box：起始位置为左上角内，不包括左、上边线宽度，背景覆盖仅包括右、下边框宽度，左、上两侧设置内边距padding时，背景图片起始位置跟着移动 padding-box：起始位置为左上角内，不包括左、上边线宽度，背景覆盖仅包括右、下边框宽度，左、上两侧设置padding时，背景图片起始位置不变。 ...
box-sizing: border-box: 它是什么，它的用途是什么？
allway2的博客
06-01 965
CSS 中 box-sizing 属性的border-box 值将永远改变前端的生命。在我们的设计中使用填充是一件麻烦事。为什么？根据盒子的型号。什么型号的盒子？CSS 之一。但那是什么？好吧，如果你有时间想看视频，我会告诉你的。CSS 属性指示应如何计算元素的测量值。这看起来微不足道，但并非如此，因为默认情况下CSS 认为框的宽度和高度来自and属性。这是什么意思？好吧，如果你添加一个或一个框的渲染大小将是：宽度+填充+边框。在下面的示例中，我们将有一个 290px 宽的框，因为： 250px 宽度 +
css 总宽度,css3 box-sizing属性  解决边框和总宽度的纠结问题
weixin_28750369的博客
08-04 597
box-sizing属性可以为三个值之一：content-box(default)，border-box，padding-box。content-box，border和padding不计算入width之内padding-box，padding计算入width内border-box，border和padding计算入width之内，其实就是怪异模式了~ie8浏览器支持content-box和bord...
html css box sizing,css3box-sizing详解
weixin_32073733的博客
06-18 326
人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。box-sizing:盒大小,盒模型.我们经常遇到左右模块宽度为50%，加个边框会掉下去，加一个这个样式就能解决，看下栗子： p.container{width:300px;border:10px solid blue;}p.box{box-sizing:border-box;-moz-box-siz...
CSS margin,padding详解 Box Model详细图解
f002489的专栏
08-23 178
http://apps.hi.baidu.com/share/detail/1109525   About Box Model : 一个块级元素 由content, padding , background, border, margin 五个部分组成. 立体图1如下: THE CSS BOX MODEL : 平面图2如下: 根据以上两图, 相信大家...
background-clip: padding-box;的作用b
心随梦动
09-14 3641
背景被裁剪到内边距框。 在写移动端页面时，经常会用padding撑开一个内容，这时如果有圆角的话，里面的背景将超出圆角，看不出圆角效果，这时需要添加这个属性。 background-clip的属性还有： content-box: 背景被裁剪到内容框的位置 border-box: 背景被裁剪到边距框的位置
-webkit-box-sizing:border-box;
最新发布
06-27
`-webkit-box-sizing:border-box;` 是 CSS 中的一个属性值，它用于设置元素的盒模型（box model）。默认情况下，CSS 盒模型会将元素的总宽度和高度分为内容区域（content）、内边距（padding）、边框（border）和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值