使用box-sizing布局
来源:互联网 发布:java生成六位验证码 编辑:程序博客网 时间:2024/06/08 07:44
盒子模型
- 关于
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
链接:http://www.jianshu.com/p/e2eb0d8c9de6
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
阅读全文
0 0
- 使用box-sizing布局
- css布局box-sizing使用
- 学会使用box-sizing布局
- box-sizing布局
- box-sizing 布局
- 流体布局CSS3中 calc()的使用 顺带box-sizing
- 使用box-sizing让CSS布局更直观
- box-sizing 的使用
- box-sizing布局学习笔记
- CSS:box-sizing的使用
- css布局学习笔记之box-sizing
- 让CSS布局更加直观:box-sizing
- 元素布局——理解box-sizing
- 让CSS布局更加直观:box-sizing
- css3传统布局+box-sizing+resize
- Box-Sizing
- box-sizing
- box-sizing
- PAT 甲级 1061. Dating (20)
- js通过contentWindow控制iframe子页面元素点击事件,并把值传给父页面
- JDK学习-Stack/List
- spark机器学习笔记:设计机器学习系统
- JDK学习-Proxy
- 使用box-sizing布局
- JDK学习-IO/NIO
- SpringBoot整合MyBatis
- flandmark人脸检测库的用法
- JDK学习-Map
- 总结一下进程
- State 状态模式 ----对象行为型模式
- 第8章 硬盘和显卡的访问与控制
- 基于ssm框架的个人博客(9)--博客的管理(删除,条件查询)