css的padding和border问题
第一步：先跟据需求定义一个div，要求width为300px，height为300px；
第二步：给该div添加一个边框，要求实线，宽度10px，粉色；
第三步：给该div再设置20px的内边距；
我们发现这个div随着border和padding的设置一直在变大。此时div的占位宽度为：width+padding+border=300+20*2+10*2=360px。
但是我想设置border和padding之后，div还保持width=300px、height=300px，这怎么办呢？
第一种解决方式：
事先算好div的width和height。比如上面的例子，我想保证div这个盒子模型的宽度和高度为300px，那么就得设置div的宽度的初始值为
width=300-border-padding=300-20-40=240px。高度height同理也是240px。
第二种解决方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:300px;
height: 300px;
background: #CCC;
border: 10px solid pink;
padding: 20px;
box-sizing: border-box; /*灵魂代码*/ }
</style>
</head>
<body>
<div>css</div>
</body>
</html>
box-sizing: border-box; 有了这句灵魂代码之后问题就解决了。它会自动做减法运算保证整个div的width和height为300px。
最终的样式为：总结：
在盒子模型中，当盒子的width和height保持不变时，设置盒子的border和padding，此时盒子真实尺寸为：宽度=width+border+padding；
高度=height+border+padding。但是这不是我们想要的结果，我们想设置border和padding时盒子的宽度和高度还是原始值，此时只能通过减少
width和height的像素来实现，box-sizing：border-box；就为我们自动做了减法运算，解决了该问题。
css的padding和border问题的更多相关文章
- [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)
W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...
- 图解CSS的padding,margin,border属性
原文出处:http://hi.baidu.com/sonan/item/af05cf8759810d1cc31627d5 觉得不错,保存以备用. --------------------------- ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- 一天搞定CSS：盒模型content、padding、border、margin--06
1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物 ...
- CSS3 盒模型---css初始化会用到：box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...
- css的padding,border,margin的意思
下面的内边距(padding).边框(border) .外边距(margin)的意思是我自己的理解. 代码如下: <!DOCTYPE html> <html lang="e ...
- 【CSS3】---盒模型margin、padding及border
盒模型--边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为 div 来设置边框粗细为 2px.样式为实心的.颜色为红色的边框: div ...
随机推荐
- MapReduce简单分析
在Map端 数据从Map中写入环形缓冲区,进行分区,分区时达到80%后溢出写入到磁盘,这几步同步进行 中间有个Shuffle过程 Reduce端 执行完Map 后到Reduce内存中,进行sort和m ...
- 玩转 HTML5 下 WebGL 的 3D 模型交并补
建设性的立体几何具有许多实际用途,它用于需要简单几何对象的情况下,或者数学精度很重要的地方,几乎所有的工程 CAD 软件包都使用 CSG(可以用于表示刀具切削,以及零件必须配合在一起的特征).CSG ...
- EF动态拼接查询
1.业务中遇到个问题,需要查询如某表的id为1或者2或者3,这里是根据传递参数获取如:传递1,2或者1,3或者1,2,3这里在sql中很好拼接如下: or id= or name=3//3代表另一个字 ...
- 【持续更新】JavaScript常见面试题整理
[重点提前说]这篇博客里的问题涉及到了了JS中常见的的基础知识点,也是面试中常见的一些问题,建议初入职场的园友Mark收藏,本文会持续更新~ 1. 引入JS的三种方式 1.在HTML标签中直接使用,直 ...
- linux下mysql启动出错
1.刚安装完就启动出错,是因为没有开msql服务,开启即可,service mysql start 2.MySQL: mysql is not running but lock exists rm / ...
- RabbitMQ之Topics（多规则路由）
Exchange中基于direct类型无法基于多种规则进行路由. 例如分析syslog日志,不仅需要基于severity(info/warning/critical/error)进行路由,还需要基于a ...
- Python之数据类型-[bisect,heap]
bisect >>> import bisect >>> >>> b = [ 20, 34, 35, 65, 78 ] >>> ...
- 重构手法之Split Temporary Variable（分解临时变量）
返回总目录 本小节目录 Split Temporary Variable(分解临时变量) Remove Assignments to Parameters(移除对参数的赋值) 6.6Split Tem ...
- Server 2008 R2远程桌面授权,解决120天过期问题
平时在使用远程桌面过程,我们经常会遇到这样的两个问题. 问题一.远程桌面的连接数限制 Server 2008 R2默认远程桌面连接数是2个用户,如果多余两个用户进行远程桌面连接时,系统就会提示超过连接 ...
- numpy初识
1,机器学习numpy 初识 1)numpy初识 import numpy num1= numpy.array([1,2,3]) dtype('num1') #查找类型 num1.dtype num1 ...