我的理解：box-sizing

下面是我在博客园找到的，和我遇见的情况很相似，所以摘抄下来，原文见:http://www.cnblogs.com/charling/p/3635031.html

box-sizing语法：

　　box-sizing ： content-box || border-box || inherit

　　参数取值：

　　content-box：此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。

　　border-box:此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。这里的content width/height包含了元素的border,padding,内容的width/height。即此处的内容宽度/高度=width /height-border-padding。

在实际应用中，该属性有个非常有用的地方，即根据百分比为元素设置宽度时。此时，如果元素有padding或者border，将box-sizing设置为border-box会非常有用。

例如：

该例子中，默认情况下，li一定不能保持在同一行内。但是设置了box-sizing：border-box之后，就可以保证li在同一行内。（IE8+和高级浏览器支持）

我的总结：

　　以width为例，无论怎样都有Element width=content width+padding(left和right)+border(left和right)，这是不变的。当给元素设置box-sizing属性时：

　　　　p{box-sizing:content-box;width:100px;pading:0 2px;border:1px solid #dcdcdc;}

　　　　width=content width=100px(是以content的边界为准)

　　　　p{box-sizing:border-box;width:100px;pading:0 2px;border:1px solid #dcdcdc;}

　　　　width=content width+padding(left和right)+border(left和right)=100px(以border边界为准)

转载于:https://www.cnblogs.com/cgf19920817/p/4538554.html

我的理解：box-sizing相关推荐

html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
html5 box sizing,CSS 盒模型与box-sizing
一.盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
Box Model,边距折叠，内联和块标签，CSSReset
一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算三.内联与 ...
CSS 盒子模型（Box model）中的 padding 与 margin
编辑自 http://www.x6x8.com/IT/199.HTML 本文将讲述 HTML 和 CSS 的关键-盒子模型 (Box model) .理解 Box model 的关键便是 margin ...
css的box模型_拆箱CSS Box模型的基础
css的box模型 by Bryan Smith 通过布莱恩史密斯拆箱CSS Box模型的基础 (Unboxing the basics of the CSS Box Model) Understa ...
【CSS 弹性盒子布局 (Flexible Box Layout)】
CSS 弹性盒子布局 Flexible Box Layout CSS 弹性盒子布局 (Flexible Box Layout) 1. 弹性盒子布局的基本概念和术语 2. flex 属性: 设置伸缩 ...
Bootstrap3.x - 源代码分析
参照http://v3.bootcss.com/css/ 文档与源代码 colors 比较全面定义总结有意义的颜色.所有uI要用的颜色,都先从已定义的读,这样保证样式的同一性,而且方便以后开发主题库. ...
antd select 下拉菜单的 style 属性_如何优雅地彻底解决 antd 全局样式问题
背景由于某些原因,我们团队负责在 GitLab 上做二次开发,简单理解就是在 GitLab 上挂个 DOM 渲染用 React 写的一些组件,组件库选择了 antd,尴尬的是引入之后发现,GitLa ...
基于pt100温度计仿真_基于8pt网格的设计系统
基于pt100温度计仿真重点 (Top highlight) This article is the 2nd in a two part series - to the previous chapt ...

我的理解：box-sizing

我的理解：box-sizing相关推荐

最新文章

热门文章