九、使用盒子布局 margin 与padding如何使用
如图所示,黄色padding,绿色margin,中间的content是内容,margin和padding的值是不计算在内容高宽的。这里补充的是在实际情况中边框宽度也是不计算在内的。
这里以border边框为分界线说:margin是盒子距离另一个盒子的距离,如果浏览器页面中只有一个盒子,那么他的margin值就是距离页面的距离,理解为外边距
例如:
#div{
width:100px;
height:100px;
margin-left:100px;
margin-top:100px;
}
那么此代码代表,距离浏览器页面左边100像素,上边100像素,需要注意的是当margin值为
#div{
width:100px;
height:100px;
margin:0 auto;
}
这时意思为距离上下0像素,左右自动,表示水平居中。
以下为写法和对应意思,padding相同
margin-left:10px; 左外边距
margin-right:10px; 右外边距
margin-top:10px; 上外边距
margin-bottom:10px; 下外边距
margin:10px; 四边统一外边距
margin:10px 20px; 上下、左右外边距
margin:10px 20px 30px; 上、左右、下外边距
margin:10px 20px 30px 40px; 上、右、下、左外边距
padding计算方法,从border边框开始计算,内容到盒子的距离可以理解为内边距,注意的是padding和border一样,都是计算在盒子宽度之外的
#div{
width:100px;
height:100px;
margin:0 auto;
border:5px solid #566666;
padding:10px;
}
这时盒子的宽度:100+左右padding20+左右边框10=130像素
高度计算为100+上下20+上下边框10=130像素。
使用padding要提计算好相应的数值,否则宽度和高度会超出预算,造成错位。也可以布局好以后将padding和边框的值从高宽中减除。
这里说的一个css属性,boxsizing,他的值有三个border-box,content-box,padding-box
border-box:将padding和borer的计算到宽度高度之中,就是说padding和border不再影响盒子高宽,比较实用
content-box:padding和border不计算在内,那么这个属性感觉和不设置没有什么区别不实用
padding-box:设置后padding计算在内,border不计算在内
嵌套塌陷
margin在盒子嵌套时的问题,
#div{
width:100px;
height:100px;
margin:0 auto;
}
#div1{
width:100px;
height:100px;
margin-top:10px;
}
div为父级,div1为子集时,按照代码应该div1上外边距距离div10像素,但实际情况是父级和子集都距离了body上边距10像素,这是使用voerflow:hidden,超出部分隐藏,可以解决此问题
转载于:https://www.cnblogs.com/xu1115/p/10700459.html
九、使用盒子布局 margin 与padding如何使用相关推荐
- css盒子模型margin和padding
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.padding和margin定义 二.举例 前言 盒子模型中padding和margin是前端页面常用到的属性,简 ...
- 基础篇07—一文掌握css的盒子模型(margin、padding)
1.CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围 ...
- 关于标准盒子模型的(border、 margin和padding)属性的讲解
让新手琢磨不透的(margin:外边距)and(padding:外边距)这两个属性 学过盒子模型的同学都应当知道(margin和padding)这两个用于盒子模型的两个重要属性吧.其实一开始我也不太明 ...
- Android布局中margin与padding的区别
我们知道Android开发不仅仅有代码的动态控制,而且还涉及到布局的静态搭建(xml).几乎在每一个xml文件中,我们总会看到margin和padding这两个属性,今天让我们初步探究一下它们之间的区 ...
- flex属性值----弹性盒子布局
里面的属性都 是在有display: flex的情况 下才生效. 兼容性写法: display: -webkit-box; /*老版本语法: Safari, iOS, Android browse ...
- margin 和 padding 的使用区别
1.平面图 2.立体图 3.margin 外边距 元素周围生成额外的空白区."空白区"通常是指其他元素不能出现且父元素背景可见的区域. 关于外边界距离的设定,规则如下: /*四周相 ...
- css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货 发展过程 上个世纪Web开发人员流行使用表格进行 ...
- 从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- CSS知识点——盒子布局及一些常用属性
CSS知识点--盒子布局及一些常用属性 - 盒子布局 先上一张图,方便理解后面的布局内容 盒子布局的主体通常为 div 标记(分区标签),这里不得不提一下 span 标签,它也是一个区域标签,但是区别 ...
- css布局margin介绍,深入理解css中的margin属性(推荐)
之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些" ...
最新文章
- 「二分查找」之我见!今天刷一道leetcode算法!
- 从零开始开发JVM语言(十一)Lambda
- LeetCode 848. 字母移位(前缀和+取模)
- wdcp mysql远程_CentOS下WDCP下的MYSQL开启远程连接
- 使用Flash Pro CC 输出动画--html5-canvas
- 数字图像学笔记——8. 几种常见的空间滤波器(均值滤波器、中值滤波器)
- MacOS 下 Safari、Chrome 等浏览器 无法打开知到(智慧树)等网页解决方案
- pytorch下使用LSTM神经网络写诗
- 计算机主机序列,SCCM任务序列自动根据SN号命名计算机
- jquery广告浮动插件
- 关于u8的三种备份方式
- Pycharm 快捷键盘
- Java程序员月薪达到三万,需要技术水平达到什么程度?(文末送书)
- Krpano教程(一)简单使用
- ffmpeg 将文本转换成音频以及多个音频合成一个音频的方法
- 网络世界有哪些不为人知的秘密?
- 连续分布——正态分布、卡方分布、t分布、F分布
- VMware 兼容性列表与产品互操作性列表使用收集(持续更新中...)
- ACCESS数据库防下载方法
- Python用pyexiv2读写图片元数据(EXIF、IPTC、XMP)