html-盒子模型及pading和margin相关
margin:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
margin 外边距 元素与其他元素的距离（边框以外的距离）
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下 右左
三个值的时候： 上 右左 下
四个值的时候： 上 右 下 左
margin: auto; 快速左右居中
垂直方向： margin-bottom,margin-top 取两者之间的较大值
水平方向： margin-left,margin-right 取两者的和
overflow:hidden; 解决内边距重叠问题
*/
div{
width: 300px;
height: 200px;
background: antiquewhite;
/*border: 1px solid red;*/
/*margin: 50px;*/
/*margin: auto;*/
/*display: inline-block;*/
overflow: hidden;
}
.box{
/*margin-top: 100px;*/
}
p{
width: 50px;
height: 50px;
background: aqua;
/*margin: 100px;*/
margin: 100px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<div class="box"></div>
</body>
</html>
padding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
padding 内边距，边框与内容之间的距离
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下 右左
三个值的时候： 上 右左 下
四个值的时候： 上 右 下 左
*/
div{
width: 300px;
height: 200px;
border: 1px solid red;
/*padding: 20px;*/
/*padding-left: 50px;*/
/*padding-top: 50px;*/
padding: 50px 0 50px;
}
</style>
</head>
<body>
<div>
padding 内边距，边框与内容之间的距离
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下 右左
三个值的时候： 上 右左 下
四个值的时候： 上 右 下 左
</div>
</body>
</html>
盒子大小：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 150px;
height: 150px;
background: aqua;
border: 10px solid red ;
padding: 20px;
margin: 50px;
}
/*
盒子大小=样式宽 + 内边距 + 边框
盒子宽度=左border+右border+width+左padding+右padding
盒子高度=上border+下border+height+上padding+下padding
*/
</style>
</head>
<body>
<div></div>
</body>
</html>
html-盒子模型及pading和margin相关的更多相关文章
- css盒子模型及属性介绍（margin,padding）
每个HTML元素都可以看作装了东西的盒子 盒子具有宽度(width)和高度(height) 盒子里面的内容到盒子的边框之间的距离即填充(margin) 盒子本身有边框(border) 而盒子边框外和其 ...
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
- 标准盒子模型和IE盒子模型
标准盒子模型 ＝ margin + border + padding + content (content = width | height) IE盒子模型 ＝ margin + content ( ...
- 理解CSS盒子模型
概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...
- DIV+CSS两种盒子模型
盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 从上图可以看到标准 W3C 盒子模型的范围包括 margin.bord ...
- DIV + CSS 盒子模型
盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 图片看不清楚?请点击这里查看原图(大图). 从上图可以看到标准 W3C ...
- 盒子模型(Box Model)
盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...
- 【css】IE盒子模型和标准W3C盒子模型
其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型. 1.标准盒子 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 c ...
- 盒子模型--IE与标准
从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. 从上图可以看到 IE 盒子模型的范围也包括 ma ...
随机推荐
- Url解码和编码 escape()、encodeURI()、encodeURIComponent()区别详解
Server.UrlDecode;解码 Server.UrlEncode;编码 url编码是一种浏览器用来打包表单输入的格式.浏览器从表单中获取所有的name和其中的值 ,将它们以name/value ...
- Confluence 6 代理和 HTTPS 设置连接器
很多用户选择将 Confluence 运行在反向代理的后面,同时还启用了 HTTPS.将你的的 Confluence 反向代理配置正确就显得非常必要了,并且能够避免后期在使用 Confluence 遇 ...
- 最短路径之Floyd-warshall算法
哇咔咔,最喜欢这种算法了,算法简单,暴力解决: 可惜数据大点就解决不了问题了: 输入的数据是 第一行第一个数是city的数量n,第二个是路径数t, 接下来n行为a至b的距离 4 81 2 2 1 3 ...
- LeetCode（81）： 搜索旋转排序数组 II
Medium! 题目描述: 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,0,1,2,2,5,6] 可能变为 [2,5,6,0,0,1,2] ). 编写一个函数来判断给 ...
- Linux/Unix/Mac OS下的远程访问和文件共享方式
scp -P 20022 src.tar.gz zhouhh@192.168.12.13:/home/zhouhhscp -P 20022 zhouhh@192.168.12.13:/home/zho ...
- Java在线备份和还原MySQL数据库。
2018年6月29日14:00:48 阅读数:1534 今天整了整整一整天,终于使用Java在线备份和还原MySQL数据库了,哎,备份倒是很快,就是在还原的时候遇到了一个问题,也不报错,结果将sql语 ...
- oracle 12c ORA-01017：invalid username/password; logon denied
Oracle 12C 中,想通过操作系统认证登录Oracle 数据库,有一些要注意的地方.不然就会遇到 ORA-01017:invalid username/password; logon denie ...
- 区分TCP包的顺序
确认TCP包的顺序: 使用抓包工具抓包之后,通常按照时间先后排序的,而不是数据的内容逻辑先后.查找内容的先后的关键在于查看TCP中的Sequence number和Acknowledgment num ...
- 目标检测算法之YOLOv3
参考地址:https://blog.csdn.net/leviopku/article/details/82660381 YOLO v3结构图 DBL:卷积+BN+leaky relu,是v3的最小组 ...
- C# float与UInt16互转
//float拆分成两个UInt16 public static UInt16 FloatToTwoUInt16(float f) { byte[] bs = BitConvert.GetBytes( ...