border-sizing属性

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内。

<style type="text/css"> .content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; }

div的大小最后为150px

 .padding-box{ box-sizing:padding-box; -moz-box-sizing:padding-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #186645; background: red; }

div的大小加上了padding，没算上border所以为140px

 .border-box{ box-sizing:border-box; -moz-box-sizing:border-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #3DA3EF; background: yellow; }

div的宽度为100px，为原始的宽度，一般写页面对ui设计好的来说，我们最好使用这个属性，这样对整体布局很有好处，不然，页面很容易出现问题。

</style>

转载于:https://www.cnblogs.com/changqijing/p/7686854.html

border-sizing属性相关推荐

CSS的border边框属性边框样式内外边框圆角合集
CSS border 属性允许指定元素边框的样式.宽度和颜色. 目录 1.四个边框 2.内外边框 3.边框样式 4.圆角边框 1.border边框属性可以设置一到四个值(上边框,右边框,下边框,左边 ...
如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...
CSS3的边框（border）属性-radius
语法: border-radius : none | <length>{1,4} [ / <length>{1,4} ]? 相关属性: border-top-right-rad ...
table中cellpadding=0 cellspacing=0 border=0属性CSS的定义方法
以前都不知道用CSS怎么定义TABLE里面cellpadding和cellspacing,害得没一个都要写,今天无意中发现可以这样在CSS里面直接定义了例如: 一个这样的表格: <table ...
边框border相关属性以及其他注意点
一.边框 border 单独设置 border-top:边框的宽度边框的线型颜色:(顺序可以随便调) border-bottom border-left border-right 线型实线 so ...
java border边框_简单实用的css边框属性border
本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式. 预备知识 border相关属性 border-width 边框的宽度 border-style 边框的样式 borde ...
HTML img 标签的 border 属性
定义和用法 <img> 标签的 border 属性规定图像周围的边框的宽度,就是说可以增加或去掉图像的边框. 注释:默认地,图像是没有边框的(除非图像在 a 元素内部). 浏览器通常会把代 ...
CSS3之border属性
border相关属性需要大量练习,方可运用自如! 文字下方有Demo!!! border: 作用: 设置在一个声明中包含所有的边框属性说明: 可以设置 ...
css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换
目录一.DIV+CSS布局 1.1 布局时常用的属性 1.2 布局 - 上中下结构 1.3 布局 - 上中下 - 左右 1.4 圣杯布局和双飞翼布局二.字体属性 2.1 字体颜色 2.2 字体大 ...

border-sizing属性

border-sizing属性相关推荐

最新文章

热门文章