css-------box-sizing
来源:互联网 发布:大数据融合 编辑:程序博客网 时间:2024/06/01 10:42
一般来说,我们说元素的总宽度是不包括它的边距(margin)的,而box-sizing这个属性就是设置了元素计算宽度的时候应该从哪个位置开始算起,它的默认值为content-box,也就是说对元素所设定的宽度会应用带钙元素的内容上,而填充和边框值会照常添加上去。
如果把值设置为border-box,则设定的width值是内容,填充和边框的总宽度。
首先,我们先来看看,
以下这段代码产生出来的效果
.top {
border: 5px solid black;
background-color: yellow;
width: 50px;
height: 50px;
padding: 10px;
margin: 10px;
}
由这张图片可以看得出来,元素的宽度是等于80px的,也就是说包括了内容的width=50px,左右border共=10px,左右padding共=20px,所以80=50+10+20。
而今天提到的这个box-sizing属性,我们就可以把元素的宽度真的控制在50px。下面,当我们设置box-sizing这个属性为content-box,其实这个属性的效果跟上图的效果是一致的,内容的宽度依旧是50px.
但是当我们把box-sizing的属性设为border-box的时候呢,效果就是如下图一样,我们设置内容宽度为50px,然后整体表现出来的也是50px ,实际上内容的宽度已经发生改变了,因为当我们设置这个box-sizing为border-box的时候,它的宽度就把内边距和边框都设置进来了,所以内容的宽度只能适应了,由下图可以知道,内容的宽度已经变为20px,但是padding和border依旧没有发生改变的。就是如果我们把width设置为一个值,那么从整体上来,这个元素的宽度就是变现为这个值了。
这个属性在所有主要的浏览器中已经被实现的了,但是在某些浏览器中,该属性前使用浏览器特定的前缀。
在Firefox:-moz-box-sizing
在safari:-webkit-box-sizing
等等。
- css box-sizing
- CSS-CSS3 box-sizing
- css:box-sizing总结
- CSS box-sizing属性
- css-------box-sizing
- css box-sizing
- css :box-sizing
- CSS之Box-sizing
- CSS: box-sizing
- CSS | box-model & box-sizing
- css布局box-sizing使用
- CSS - box-sizing简单例子
- CSS:box-sizing的使用
- CSS的box-sizing属性
- CSS学习笔记:box-sizing
- html+css:box-sizing属性
- CSS box-sizing 属性详解
- 关于css中的box-sizing:border-box
- Android 实现视频字幕Subtitle和横竖屏切换
- (lodash_gcy)hasAttr——判断数组中是否存在某个元素
- 4.5.1宝岛探险//Floodfill漫水填充法(也称种子填充法)——用于求图中独立子图的个数
- kafka分布式消息中间件
- 2017金山字符串编程题
- css-------box-sizing
- 4.5.2宝岛探险//BFSearch
- 九度 OJ 题目1008:最短路径问题 (Dijstra 算法)
- 区间动规经典题——石子合并
- 关于使用git上传代码到github,码云的问题
- 我的大数相加
- URAL
- NLPchina/ansj_seg
- hdu4027Can you answer these queries(区间更新查询+lazy)