border-box之全局问题解析

最新推荐文章于 2022-10-19 22:50:14 发布
最新推荐文章于 2022-10-19 22:50:14 发布
阅读量615 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bing_JavaScript/article/details/52244077
版权
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .wrapper{
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            color: #fff;
            font-size: 30px;
            text-align: center;
        }
        #header{
            height: 100px;
            background: #38382e;
            margin-bottom: 10px;
            border: 10px solid red;
            padding: 10px;
            width: 100%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;


        }
        .sidebar{
            float: left;
            width: 220px;
            margin-right: 20px;
            margin-bottom: 10px;
            height: 300px;
            background: #5d33cf;
            border: 10px solid red;
            padding: 10px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
        }
        .content{
            float: left;
            width: 720px;
            height: 300px;
            background: #c8ca30;
            margin-bottom: 10px;
            border: 10px solid red;
            padding: 10px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
        }
        #footer{
            background: #cc4ad5;
            height: 100px;
            clear: both;
            border: 10px solid red;
            padding: 10px;
            width: 100%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div id="header">页眉</div>
    <div class="sidebar">侧边栏</div>
    <div class="content">主内容</div>
    <div id="footer">页脚</div>
</div>
</body>
</html>
bing_JavaScript
关注
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
09-01
这种方法的优点是针对性强，不会全局改变页面的box-sizing设置，避免影响其他可能依赖于`border-box`的元素。 总的来说，理解CSS的box-sizing属性以及如何在不同情况下调整它，对于解决类似问题至关重要。在遇到...
深入解析CSS （2）盒模型
q1ngqingsky的博客
10-08 645
用百分比指定高度存在问题。百分比参考的是元素容器块的大小，但是容器的高度通常是由子元素的高度决定的。这样会造成死循环，浏览器处理不了，因此它会忽略这个声明。
box-sizing:border-box的理解和作用
热门推荐
qq_51066068的博客
09-26 2万+
box-sizing:border-box的理解和作用。CSS中代码background:url(图片) no-repeat right center的意思
CSS---将全局修改盒模型为border-box
qq_41008787的博客
05-01 692
将全局修改盒模型为border-box，CSS代码如下： /*根元素设置为border-box*/ :root{ box-sizing:border-box; } /*其他所有元素和伪元素继承其盒模型*/ *, ::before ::after{ box-sizing:inherit; }
Box-Sizing
精彩人生
02-16 2274
来自：http://www.w3cplus.com/content/css3-box-sizing box-sizing是CSS3的box属性之一。一说到CSS的盒模型（Box model）我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢？第一句话就说了，Box-sizing是CSS
工作随笔-记录遇到的知识点
01-11
为了给Div添加阴影效果，可以使用CSS的`box-shadow`属性，例如`box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);`会创建一个下方向上的淡黑色阴影。 顶部固定的竖线效果通常用于侧边栏导航，可以使用`position: fixed; ...
web-dev-cw
03-07
不同浏览器对盒模型的解析可能略有差异，但W3C标准盒模型（content-box）和IE盒模型（border-box）是两种主要类型。 4. **布局技术**：CSS提供了多种布局模式，如流体布局、网格布局、Flexbox（弹性盒布局）和Grid...
html5-css面试题.doc
最新发布
04-15
.box { border: 1px solid black; width: 360px; height: 180px; } .box img { height: 160px; margin-left: 10px; } .box ul { display: inline-block; *display: inline; zoom: 1; vertical-align: 15px; } ``...
Master-mind-final-project
03-18
《CSS在Master-mind-final-project中的应用深度解析》 在当今的Web开发领域，CSS（Cascading Style Sheets）作为样式表语言，用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现，其重要性不言而喻。在...
全局box-sizing:border-box;设置方法
weixin_40551017的博客
03-05 4836
<style> * { box-sizing: border-box; } *::before,*::after{ box-sizing: border-box; } </style> 如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin...
css常见问题（2）之border-box对元素实际宽高的影响
qq_29039105的博客
07-15 1825
border-box对元素实际宽高的影响
全局设置border-box
qq_45108629的博客
10-19 346
【代码】全局设置border-box。
CSS box-sizing 理解与运用
CyberPlayer的博客
03-01 426
box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。 假如不指定 CSS box-sizing 属性 默认情况下，元素的宽度和高度是这样计算的： width + padding + border = 元素的实际宽度 height + padding + border = 元素的实际高度 这意味着：当设置元素的宽度/高度时，该元素通常看起来比设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。 .div1 { width: 300px; he
box-sizing:border-box;的一些坑
zhuhaomingoo的博客
01-25 1万+
近日在使用新属性box-sizing:border-box;的时候遇到了一些问题很致命，很费时间，情况就如下面的例子。给全局加了box-sizing:border-box;属性。文字里需要带入彩色的标签，高度是16px,左右padding各5px，line-height自然而然就是16了。但这时就会出现图一的情况文字上下并不是剧中的。从正常逻辑思维出发，我找不到一丝纰漏怎么改也不对怎么给都是剧中不...
border-box与content-box的区别
banchi6453的博客
09-26 293
㈠box-sizing属性 ⑴box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 ⑵语法：box-sizing: content-box|border-box|inherit; ⑶取值 ㈡content-box相关内容 ⑴padding和border不被包含在定义的width和height之内。 对象的实际宽度等于设置的width值和b...
JS助记 ----- 盒子模型与获取元素样式
k909397116的博客
11-18 247
一、盒子模型简单介绍 content-box 默认的盒子模型，width 和 height 设置的是 content 的大小，有border和padding的情况下再额外增加盒子的宽高，整个盒子的大小由 border、padding、content 共同决定，border 和 padding 不会影响 content 的大小。 border-box 怪异盒子模型，width 和 height 设置的就是整个盒子的大小(除margin)，如果给元素设置 border 和 padding 就会挤压 conten
border-box和content-box最直观的区别和解释【不理解包赔】
godkun的博客
01-26 1万+
chrome浏览器默认是content-box，什么是content-box，我用最简单的语言解释给你听。 content-box就是用元素的width和height觉得元素的高宽，这就意味着元素的padding和border等不能算在width和height中。啥意识？简洁介绍一下。 元素的width和height决定元素的内容，padding和border的改变不能改变wi
IE Bug修复指南：页面布局与兼容性解析
为了解决这类问题，开发者可以使用盒模型（Box Model）的调整，比如设置`box-sizing`属性为`border-box`，这样元素的宽度和高度会包含边框和内填充，从而确保在所有浏览器中的一致性。 理解和解决这些经典的IE Bug...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值