`
rayln
  • 浏览: 424192 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

box-sizing使用

 
阅读更多

box-sizing : content-box || border-box || inherit

取值说明

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

2、border-box:此值让元素维持IE传统的Box Model(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。(从上面Box Model介绍可知,我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】)
分享到:
评论

相关推荐

    详解CSS3中的box-sizing(content-box与border-box)

    content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型 border-box:怪异盒模型,低版本IE浏览器中的盒模型 现代浏览器和IE9+默认值是content-box。 语法格式: box-sizing:content-...

    css详解box-sizing.zip

    .url`和`从box-sizing-border-box属性入手,来了解盒模型 -用box-size border-box改变盒模型的结构.url`这两个链接则涉及到了与Box Sizing相关的其他CSS属性,如`text-overflow`,`white-space`和`overflow`,它们...

    关于box-sizing的全面理解

    box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内...

    CSS3属性box-sizing使用指南

    box-sizing用于改变CSS盒子模型,从而改变元素宽高的计算方式。 box-sizing取值如下: 复制代码代码如下:box-sizing: content-box | padding-box | border-box 默认值是 content-box ,对应CSS2.1规范中标准的盒子...

    box-sizing.docx

    理解并正确使用`box-sizing`能够帮助开发者更好地控制元素的布局,避免因尺寸计算方式的不同而导致的布局混乱。下面将详细阐述`box-sizing`的两种主要模式:`border-box`和`content-box`。 1. `border-box`模式: ...

    CSS3 box-sizing属性详解

    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计算入...

    前端开源库-tachyons-box-sizing

    文件名"tachyons-box-sizing-master"可能表示这是Tachyons-box-sizing项目的主分支或完整版本。通常,"master"分支代表项目的主线开发,包含了最新的稳定代码。下载或克隆这个文件后,开发者可以进一步研究源码,...

    css3 box-sizing属性使用参考指南

    CSS3的`box-sizing`属性是一个非常重要的样式规则,它允许开发者改变元素的盒模型,从而更好地控制元素的布局和尺寸。盒模型是CSS布局的基础,理解`box-sizing`属性对于构建响应式和灵活的网页设计至关重要。 在CSS...

    使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题

    有时我们会给页面的元素...1,box-sizing 属性介绍box-sizing 允许我们以特定的方式定义匹配某个区域的特定元素。 CSS Code复制内容到剪贴板 box-sizing: content-box|border-box|inherit;  值 描述 conte

    Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案

    然而,当UEditor的图片被包含在使用了Bootstrap样式的页面中时,由于`border-box`的设定,图片的缩放行为被限制了。用户尝试调整图片大小时,图片只能缩小,无法放大。 要解决这个问题,我们需要理解`content-box`...

    浅谈CSS3 box-sizing 属性 有趣的盒模型

    在使用像Bootstrap这样的前端框架时,通常会全局设置`box-sizing: border-box;`以保持一致性,这可能会与某些特定元素的预期样式冲突。例如,如果一个搜索框需要特定的宽度和高度,而Bootstrap的默认样式又设置了`...

    CSS网页实例 利用box-sizing实现div仿框架结构实现代码

    在给定的内容中,作者使用了box-sizing属性来创建一个包含四个主要部分的网页布局:头部(.top)、侧边栏(.side)、主体(.main)和底部(.bottom)。通过设置html和body的box-sizing属性为border-box,我们可以...

    解决CSS 中box-sizing与background-clip解决背景显示范围的问题

    过去在学习CSS的时候,首要任务就是要理解“box model”,因为box model是CSS里头很重要的模型概念,描述了padding、margin、border与content的空间定位,今天的项目竟然卡在一个简单的小问题,因此就用一篇文章做个...

    css3 盒模型以及box-sizing属性全面了解

    在这个例子中,`.con` 使用了默认的 `content-box`,所以它的实际宽度会是 122px(100px的内容宽度 + 2px的左右边框 + 20px的左右内边距),而`.con1` 设置了 `box-sizing: border-box;`,使得它的宽度严格等于100px...

Global site tag (gtag.js) - Google Analytics