盒模型 box-sizing 属性

css3增添了盒模型box-sizing属性,box-sizing属性值可以有下面三个值:

content-box默认值,让元素维持W3C的标准盒模型。元素的宽度/高度(width/height)(所占空间)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度 /高度(content width/height)即:Element Width/Height = border+padding+content width/height。

border-box:让元素维持IE6及以下版本盒模型。元素的宽度/高度(所占空间)等于元素内容的宽度/高度。

这里的content width/height包含了元素的border,padding,内容的width/height。即:Element Width/Height =width /height-border-padding。

inherit继承父元素的盒模型模式。

具体适用场景:

<div class="wrapper">
    <div id="header">页眉</div>
    <div class="sidebar">侧边栏</div>
    <div class="content">内容内容内容内容内容内容内容内容内容内容内容</div>
    <div id="footer">页脚</div></div>
 
 

        *{margin: 0;padding: 0;}
        .wrapper{
            width: 500px;
            margin: 0 auto;
            color:#fff;
            text-align: center;
        }
        #header{
            height: 50px;
            background-color: red;
        }
        .sidebar{
            float: left;
            width: 150px;
            height: 100px;
            background-color: #0099cc;
        }
        .content{
            float: left;
            width: 350px;
            height: 100px;
            background-color: #999999;
        }
        #footer{
            background-color: #ff6600;
            height: 50px;
            clear: both;
        }

但如果又被要求改好看点,比如内容区加内边距边框什么的修饰一下。

如果直接加上padding、border什么的,马上就破坏了布局

因为box-sizing默认是content-box,内容区大小不会变,加上padding、margin、border的话,就会往外撑开,从而破坏布局结构

这时,使用border-box就可以完美解决了

 .content{
            box-sizing: border-box;
            padding: 22px;
            border: 12px solid blue;
            float: left;
            width: 350px;
            height: 100px;
            background-color: #999999;
        } 

这样,元素所占空间不会变,加了padding、border的话,会往内挤,保持外面容器不被破坏

(注意,margin不包含在元素空间,加了margin会向外撑开

原文地址:https://www.cnblogs.com/expedition/p/11296281.html

时间: 2024-11-05 06:15:07

盒模型 box-sizing 属性的相关文章

CSS盒模型之margin属性

CSS中,盒模型是一个很重要的思想概念,在处理盒模型的时候,有一些问题需要注意,特别记录在此. 首先,一个"盒子"是由内边距.外边距.边框以及内容构成的,当设置了元素的margin属性时,会影响当前元素的一些状态.例如,两个盒子在页面中, 一个在上,一个在下,同时设置了两个盒子的margin属性时,按理说两个盒子的边框距离应该是两个margin属性值的叠加,但由于CSS的设计导致事实并非如此, 这两个盒子之间的边框距离将会是两个margin属性中比较大的那一个,如果需求就是要让两个盒子

盒模型Box Model(浮动)

一.标准盒模型的大小:border+padding+content(width) 怪异盒模型大小:padding+border 二.display inline  默认,且变为行由内容撑开 block  变为块元素,前后会自带有换行符 none  不会显示元素(只是隐藏掉,但还在布局中) inline-block  不设置宽度,有内容撑开:行标签会实现宽高到校:块标签已不是独占一行 table  以表格的表现显示 三.float(浮动)用来在一定宽度中实现一行输出多个块 除非添加margin,否

css盒模型 Box Model

属性:内容(content).内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 盒子的分类:不同的元素产生的盒子类型可能不同, 一个元素,产生什么样的盒子,取决于它CSS的display属性 display:none:不生成盒子 display:inline:行盒 display:block:块盒 盒子组成: Margin(外边距) - 清除边框外的区域,外边距是透明

CSS盒模型(Box Model)

阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀.盒模型是网页布局的基础,它制定了元素如何在页面中显示,如果足够地掌握,那使用CSS布局那将会容易得多. 1. 什么是CSS盒模型 盒模型,顾名思义,就是一个盒子.生活中的盒子,有长宽高,盒子本身也有厚度,可以用来装东西.页面上的盒模型我们可以理解为,从盒子顶部俯视所得的一个平面图,盒子里装的东西,

尖刀出鞘的display常用属性及css盒模型深入研究

一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-block后的元素具有block元素可以设置宽高特性,同时又具有inline元素默认不换行的特性. 其实display:inline-block这个属性现在浏览器都支持,其实IE从5.5开始就已经支持了,但是IE6,7支持的还不够完善,我们可以先来做demo测试下就可以明白.为了做demo,所以我们现在需要

盒模型与布局相关属性

1.布局相关属性 所有与布局相关的属性如下: float:该属性控制组件是否符合浮动:以及如何实现浮动,该属性可以设置为left,right.来控制向 哪里浮动:(通过float可以实现多栏布局) clear:该属性与float相反,该属性可以设置为none,left,right,both.(通过clear可以实现换 行) none:两边都允许出现浮动组件: left:不允许左边出现浮动组件: right:不允许右边出现浮动组件: both:两边均布允许出现浮动组件: clip:该属性用于对元素

IT兄弟连 HTML5教程 CSS3属性特效 盒模型阴影

除了为文字添加阴影,我们还可以为盒模型添加阴影.盒模型阴影的属性名称为box-shadow,此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表示阴影的模糊半径(包含0及以下的值均表示无模糊),最后一个则是阴影的颜色.前Chrome 16+,FireFox8+,Opera11.6+,Safari5.1+以及IE9+均可直接使用box-shadow,而不需要-webkit-诸如此类的前缀. 语法格式如下所示: box-shadow:[inse

CSS盒模型之三角形

W3上介绍盒模型: 这里教程,但是太过于简单了,http://www.w3.org/community/webed/wiki/CSS/Training/Box_model. 如图,盒模型和背景属性控制哪些部分.   这里正规规范目录:http://www.w3.org/TR/CSS21/cover.html#minitoc,找到8 Box model打开 或者中文W3School的http://www.w3school.com.cn/css/css_boxmodel.asp    以上配图大同小

css盒模型与bfc与布局与垂直水平居中与css设计模式等

一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布局 flow下的盒子的布局 BFC布局上下文下的布局 IFC布局上下文下的布局 FFC布局上下文下的布局 table布局上下文下的布局 css grid布局上下文下的布局 1.css盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ) 盒模型有4部分组成

10-[CSS]-盒模型:border,padding,margin

1.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如图所示: <!-- 盒模型: 在网页中 基本上都会显示一些方方正正的盒子,这种盒子就被我们称为盒模型 重要的属性: width,height,padding,border, margin width: 指的是内容的宽度,而不是整个盒子真实的