css盒子模型(box-sizing)
盒子模型
- 关于
CSS
重要的一个概念就是CSS
盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度,需要加上一些其它的属性,例如:padding
+border
+width
= 盒子的宽度padding
+border
+height
= 盒子的高度
- 这看起来并不是那么直观,那么我们看一个图:
这意味着,如果我们设置一个宽度为
200px
,而实际呈现的盒子的宽度可能会大于200px
(除非没有左右边框和左右补白)。这可能看起来比较怪,CSS
设置的宽度仅仅是内容区的宽度,而非盒子的宽度。同样,高度类似这导致的直接结果是当我们希望页面呈现的盒子的宽度是200px的时候,我们需要减去它的左右边框和左右补白,然后设置为对应的CSS宽度。例如上图,我们设置希望盒子宽度为
200px
,则需要先减去左右补白各20px
,左右边框各1px
,然后设置对应的CSS
宽度158px
。
- 幸运的是,我们有更好的方法达到我们想要的目的
box-sizing
语法:
box-sizing:
content-box
|border-box
|inherit
;与上面不同的是,当你设置
box-sizing:border-box
以后,这就能达到你想要的目的。例如,上面我们想要一个宽度为200px
的盒子,那么我们直接设置宽度为200px
。是不是看起来清晰多了。当再设置它的左右边框和左右补白后,它的内容区会自动调整。这可能更直接和一目了然。CSS
代码如下:
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #DDD;
}
实际上,这更被设计者和开发者推崇
一些开发人员觉得
box-sizing
使用起来十分方便,所以他们主张通过通用选择器将这个属性应用于每个元素但这样的观点未免有些偏激,而且还会导致不必要的困难,所以更好的方法是只在实际需要时才使用这个属性
*{
margin:0;
padding:0;
box-sizing:border-box;
}
- 写上
box-sizing: border-box
; ,设置padding
值 也不用担心没有减小宽度值而变形
box-sizing其它的值
content-box
- 描述:在宽度和高度之外绘制元素的内边距和边框。
border-box
- 描述:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
inherit
- 描述:继承 父元素
box-sizing
属性的值
- 描述:继承 父元素
浏览器兼容性
IE8
及以上版本支持该属性,Firefox
需要加上浏览器厂商前缀-moz-,
对于低版本的IOS
和Android
浏览器也需要加上-webkit-
。实际上,很多reset.css
或者normal.css
里都包含如下CSS
语句,也是比较赞成的用法:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
box-sizing 布局三栏目案例
div{
height:700px;
float:left;
}
div.left{
width:25%;
background:red;
}
div.cent{
width:50%;
box-sizing:border-box;/*可以改变元素以使其宽度包含填充*/
/* 现在整个元素,包括填充在内,占页面总宽度的50%,所以元素的组合宽度为100%,这全程它们很好地适应于它们的容器.*/
background:yellow;
padding:0 20px;/*加了这个会使盒子内容溢出 但是box-sizing很好的自适应了*/
}
div.right{
width:25%;
background:blue;
}
<div class="left"></div>
<div class="cent"></div>
<div class="right"></div>
- 效果
作者:poetries
链接:https://www.jianshu.com/p/e2eb0d8c9de6
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
css盒子模型(box-sizing)的更多相关文章
- 教你吃透CSS的盒子模型(Box Model)
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
- 学习css盒子模型
在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...
- CSS盒子模型(框模型)
一.如何理解盒子模型 盒子模型(框模型)是css部分非常重要的一部分知识,CSS在处理网页的时候,认为每个元素都处在一个不可见的盒子中.盒子模型的构想,把所有的元素都想象成盒子,那么对网页进行布局 ...
- CSS:CSS 盒子模型
ylbtech-CSS:CSS 盒子模型 1.返回顶部 1. CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model&quo ...
- 1.26学习总结——css盒子模型
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
- CSS 盒子模型(Box model)中的 padding 与 margin
本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...
- CSS盒子模型之CSS3可伸缩框属性(Flexible Box)
CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
- HTML和CSS的盒子模型(Box model)
本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
随机推荐
- Spring全家桶系列–SpringBoot与Mybatis结合
//本文作者:cuifuan Mybatis 是一个持久层ORM框架,负责Java与数据库数据交互,也可以简易理解为中介,相对于它,还有个中介是hibernate,不过在mybatis中sql语句的灵 ...
- Java 初级面试题及答案
1.Java中的重载与重写有什么区别 重载(Overload)是让类以统一的方式处理不同类型数据的一种手段,实质表现就是多个具有不同的参数个数或者类型的同名函数(返回值类型可随意,不能以返回类型作为重 ...
- POJ3468(KB7-C 线段树)
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 108903 ...
- node.js(express)连接mongoDB入门指导
一.写在前面 人人都想成为全栈码农,作为一个web前端开发人员,通往全栈的简洁之路,貌似就是node.js了.前段时间学习了node.js,来谈谈新手如何快速的搭建自己的web服务,开启全栈之路. 二 ...
- Javascript 回调函数理解---二娃子买肾机6
在Javascript中什么是回调函数,我认为简单来说就是把一个函数B作为参数传递给另一个函数A,在A函数中的一定时机调用函数B. 这里可以看出回调函数形成了一个闭包,它可以访问函数A中的活动对象. ...
- js-ES6学习笔记-变量的解构赋值
1.ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 2.ES6允许写成:let [a,b,c] = [1,2,3];上面代码表示,可以从数 ...
- SD从零开始05-06
SD从零开始5 从库存销售 销售凭证类型Sales document type: 用来鉴别和控制不同的业务流程类型: 标准的销售凭证类型: standard order: Rush order: Ca ...
- Expo大作战(二十二)--expo分离后的部署(expokit)
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- Visual Studio 2012 Update 1 离线升级包(相当于VS2012 SP1离线补丁包)
Visual Studio 2012 Update 1 发布也有一段时间了,吾乐吧尝试了好几次在线升级,但是网络不给力啊,结果都失败了.于是一直都想找到官方提供的VS2012 SP1完整离线升级包,不 ...
- 数据库小组与UI小组第一次对接
时间:2018.6.1,21:30 ~ 23:00 人员:除黄志鹏外全体成员,因为黄志鹏临时有事 工作内容: 主要为数据库小组与UI第二组对接,并将成果汇总到github仓库.另外UI第一组重构了代码 ...