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 ...
随机推荐
- Vue-cli安装教程
第一步:安装vue-cli npm install vue-cli -g -g :代表全局安装.如果你安装时报错,一般是网络问题,你可以尝试用cnpm来进行安装. 检测是否安装成功:可以用vue -V ...
- Ionic3 遇到的一些错误-Error: Cannot find module 'reflect-metadata'
E:\Projects\ionic\myApp5>ionic serve Error: Cannot find module 'reflect-metadata' 解决方法: npm insta ...
- Color the Ball(懵逼题）
Color the Ball Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...
- Even Tree 小议
原题链接:https://www.hackerrank.com/challenges/even-tree/problem 思路:把树还原出来,对每个结点,计算以该结点为根的子树结点数.子树结点数为偶数 ...
- 取得 iframe 容器的 URL
检测所在窗口是否为最外层的窗口,若不是则跳脱包含它的框架 if( window !== window.top ) { window.top.location = location; } top ...
- Centos7.4下用Docker-Compose部署WordPress（续）-服务器端用Nginx作为反向代理并添加SSL证书（阿里云免费DV证书）
前言 在我写完Centos7.4下用Docker-Compose部署WordPress这篇文章后,我的个人博客已经正式的开始运作.但考虑到网站访问的安全性以及今后可能会重复利用服务器来部署其他网站的可 ...
- 用笔记本写C程序
首先在Visual Studio Tools 文件中打开 Visual Studio 命令提示(2010),输入命令 notepad 打开记事本,写好程序保存,保存类型:所有文档 文件名:1.c . ...
- flask中下载服务器上特定路径的文件
使用flask下载服务器上某个路径下的文件 path:文件路径以及需要下载的文件,直接写入参数有安全隐患,实际应用中需要判断权限之类的 from flask import send_file, mak ...
- 【分享】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
- shell的逻辑运算符
一.逻辑运算符 逻辑卷标 表示意思 1. 关于档案与目录的侦测逻辑卷标! -f 常用!侦测『档案』是否存在 eg: if [ -f filename ] -d 常用!侦测『目录』是否存在 -b 侦测是 ...