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 ...
随机推荐
- Java基础笔记8
Object类 Object类是所有类的父类. 如果某个类没有显示的继承某个父类,那么该类则继承Object. 类 Object 是类层次结构的根类.每个类都使用 Object 作为超类. 所有对象( ...
- Oracle 表空间扩充
Oracle 表空间扩充 一.现场环境: (1)操作系统:AIX (2)数据库:Oracle Database 10g Enterprise Edition Release 10.2.0.5.0 - ...
- Circle
Circle Memory Limit: 32768KB 64bit IO Format: %lld & %llu Status Description Your task is so ...
- 2016年中国大学生程序设计竞赛（杭州）1006 Four Operations
Four Operations Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- SQL——按照季度，固定时间段，分组统计数据
最近在工作中接到了一个需求,要求统计当月以10天为一个周期,每个周期的数据汇总信息.假设有一张表如下: 表table_test中 ID AMOUNT CREATE_ ...
- IdentityServer4 登录成功后，跳转到原来页面
IdentityServer4 登录成功后,默认会跳转到Config.Client配置的RedirectUris地址http://localhost:5003/callback.html,用于获取 T ...
- [原创]Faster R-CNN论文翻译
Faster R-CNN论文翻译 Faster R-CNN是互怼完了的好基友一起合作出来的巅峰之作,本文翻译的比例比较小,主要因为本paper是前述paper的一个简单改进,方法清晰,想法自然.什 ...
- 查看 docker 容器使用的资源
在容器的使用过程中,如果能及时的掌握容器使用的系统资源,无论对开发还是运维工作都是非常有益的.幸运的是 docker 自己就提供了这样的命令:docker stats. 默认输出 docker sta ...
- IE浏览器中用Firebug调试网站的方法
对于大部分做前端设计者而言应该都使用过Firefox浏览器下一款调试网站的扩展插件firebug吧,功能非常的强大,对于我们找出网页兼容性的问题非常的有效.不过对于很多不喜欢使用Firefox浏览器的 ...
- C# 读写文本文件乱码解决方案
在使用C#对文本文件读取的时候,如果其中包含了中文,经常会出现乱码.一般解决是在StreamReader加一个编码,我使用的是Encoding.UTF8,一般情况下使用这个参数就可以.但是,在这次我使 ...