box-sizing的不同属性值间的区别
box-sizing:值为 border-box时,其含义为:表示元素的宽度与高度包括内部补白区域(指border和padding)与边框的宽度与高度;值为content-box时,其含义正其前者相反,表示不包括 内部补白区域与边框的宽度与高度;
看下面示图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border:25px solid red;
width:300px;
height:150px;
padding:30px;
margin:20px;
}
.div1{
box-sizing: border-box;
}
.div2 {
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="div1">芬阿斯生苛花样百出塔顶 阿斯蒂芬阿斯蒂芬模压阿</div>
<div class="div2">花样百出塔顶 阿斯蒂芬阿斯阿斯蒂芬阿斯蒂芬模压阿</div> </body>
</html>
这是div1的样子,其结构图如示:
div2样子,其结构图如示:
还有一个属性值为padding-box,不过这值兼容性不好,基本不用,只有Firefox浏览器兼容;
box-sizing的不同属性值间的区别的更多相关文章
- java中两个对象间的属性值复制,比较,转为map方法实现
package com.franson.study.util; import java.lang.reflect.InvocationTargetException; import java.lang ...
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...
- Android布局文件layout.xml的一些属性值
第一类:属性值 true或者 false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 andr ...
- 利用getComputedStyle方法获取元素css的属性值
在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...
- display的属性值测试
由于在学习CSS的display的属性值只针对block.inline.inline-block和flex进行过了解,并且自己观察得知列表中li的display属性是list-item,而想要触发BF ...
- js获取元素属性值为空的原因和解决办法
问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...
- 行盒(line box)垂直方向的属性详解:从font-size、line-height到vertical-align
视觉格式化模型 在一个文档中,每个元素都被表示为0.1或多个矩形的盒子.确定这些盒子的尺寸, 属性 --- 像它的颜色,背景,边框方面 --- 和位置是渲染引擎的目标.① 在CSS中,使用标准盒模型描 ...
- 【Android】Android布局文件的一些属性值
第一类:属性值 true或者 false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 androi ...
- html中设置data-*属性值 并在js中进行获取属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- thinkphp空操作和配置文件实现简化路由
1关于TP中空操作和路由问题 <?php function test(){ $content="test demo @云峰天下"; $pattern='/@(\S+)\s/' ...
- 启动tomcat报host-manager does not exist or is not a readable directory异常
新安装了一个tomcat6,安装完之后在webapps下面会有一些tomcat自带的项目(ROOT.manager.host-manager...) 把这些没用的项目删掉之后,启动tomcat 报如下 ...
- 合约广告系统-Hadoop
Hadoop Hadoop 概况 Hadoop 由 Apache Software Foundation 公司于 2005 年秋天作为Lucene的子项目 Nutch的一部分正式引入.它受到最先由 G ...
- SQL Server 2008 维护计划实现数据库备份
SQL Server 2008 维护计划实现数据库备份(最佳实践) 2013-08-29 09:08 by 听风吹雨, 173 阅读, 2 评论, 收藏, 编辑 一.背景 之前写过一篇关于备份的文章: ...
- 关于JS函数的bind
昨天被人问到js的bind的作用是什么? 这个倒还能回答出来,bind 之后返回一个新的函数,这个函数可以保持传递的this上下文. 接着又问了,那么bind两次不同的上下文会怎样? 这个一下子就蒙了 ...
- hdu1198--并查集
Problem Description Benny has a spacious farm land to irrigate. The farm land is a rectangle, and is ...
- CF 327E(Axis Walking-状态压缩Dp-lowbit的使用)
E. Axis Walking time limit per test 3 seconds memory limit per test 512 megabytes input standard inp ...
- as3 Loader程序域
Loader的 load方法有两个参数 第二个参数是LoaderContext对象 LoaderContext对象里有一个applicationDomain( 程序 域)对象 设置程序域对象可以设置两 ...
- Android开发之简单的电子相册实现
电子相册的效果图和结构图: 图片资源的文件: package com.example.electronicalbum; public interface ImageResource { //用一个 ...
- 查找附近的wifi密码
无意之间看到能破解附近wifi密码的诀窍,赶紧存储下来. 1. 首先打开终端 2. 在没有网路的情况下输入: netsh wlan show profiles 结果如下(自己的): 这些'用户配置文件 ...