CSS盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )
Posted 韩曙亮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )相关的知识，希望对你有一定的参考价值。
文章目录
一、插入图片
1、简介
插入图片 :
- 插入图片方式 : 在 html 中 , 使用
<img> 标签可以插入一张图片 ; - 插入图片适用场景 : 显示 内容 , 按钮 , 一般都使用 插入图片 的方式 展示图片 ,
- 设置插入图片大小 : 通过设置 盒子模型 内容尺寸 而设置图片大小 ;
width 设置图片内容宽度 ;height 设置图片内容高度 ;
- 设置插入图片显示位置 : 通过设置 盒子模型 左边距 和 上边距 而设置图片的位置 ;
margin-left 设置图片的 左外边距 ;margin-top 设置图片的 上外边距 ;
代码示例 :
img
width: 200px;
height: 200px;
margin-left: 50px;
margin-top: 50px;
2、代码示例
在该示例中 , 使用
<img src="images/image.jpg">
标签 , 插入图片 ,
通过设置 <img> 标签的宽高
width: 200px;
height: 200px;
来设置图片大小 ,
通过设置 <img> 标签的 外边距
margin-left: 50px;
margin-top: 50px;
来设置图片的位置 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>插入图片</title>
<style type="text/css">
img
width: 200px;
height: 200px;
margin-left: 50px;
margin-top: 50px;
</style>
</head>
<body>
<div class="pic">
<img src="images/image.jpg">
</div>
</body>
</html>
展示效果 :
二、背景图片
1、简介
背景图片 :
- 设置背景图片方式 : 在 CSS 中 , 为 盒子 设置
background 属性 , 设置背景图片 ;
background: pink url(images/image.jpg) no-repeat;
- 背景图片适用场景 : 显示 小图标 或 超大背景 , 一般都使用 背景图片 的方式 展示图片 ;
- 设置背景图片大小 : 通过设置 背景图片的尺寸 而设置图片大小 ;
- 设置背景图片显示位置 : 通过修改 背景位置
background-position 修改图片显示位置 ;
代码示例 :
div
width: 400px;
height: 400px;
background: pink url(images/image.jpg) no-repeat;
background-position: 50px 50px;
2、代码示例
在该示例中 , 使用
background: pink url(images/image.jpg) no-repeat;
CSS 样式 , 设置背景图片 ,
通过修改 背景位置 background-position 修改图片显示位置
background-position: 50px 50px;
来设置图片的位置 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>背景图片</title>
<style type="text/css">
div
width: 400px;
height: 400px;
background: pink url(images/image.jpg) no-repeat;
background-position: 50px 50px;
</style>
</head>
<body>
<div></div>
</body>
</html>
展示效果 :
CSS盒子模型中外边距（margin）折叠详解
最近写项目过程中遇到一个CSS盒子模型中外边距（margin）折叠的情况，搞得我焦头烂额，之后再网上查阅了大量的资料，现做一个整理和总结，方便以后忘记的时候查阅，同时也供广大网友参考。如有错误或者总结方面不全的地方，欢饮广大网友指出。
外边距折叠的概念：所谓外边距折叠就是相邻的两个或多个元素（含有子元素的情况）的外边距会在垂直方向上合并成一个一个外边距。
CSS盒子模型中外边距（margin）折叠的常见情形有如下2种：
情况1、无子元素的相邻兄弟元素
触发margin折叠的条件：两个元素之间没有被其他非空元素隔开时触发外边距折叠。
情形说明：
1）如果两个元素的margin均为正值，则两个元素之间的margin=max(margin1,margin2)；
附图说明：
2）如两个元素的margin负值，则两者之间的margin=min(margin1,magin2)，如图2 所示;
附图说明：
3）如果两个元素中有margin为正值，有一个为负值，则两者之间的margin=margin1+margin2，如图三中所示margin=-50px+25px=-25px;
情况2、子元素与父元素发生外边距折叠
触发条件：父元素无外边框(border)、无内边距(padding)，且父元素与子元素之间无非空元素或文本信息时（子元素上边与父元素上边之间无非空元素文本信息，子元素下边与父元素下边之间可可以有非空元素和文本信息），折叠的基线为父元素最上的边或最下的边。
情形说明：
1）若父元素与子元素的margin值均为正，则折叠后的margin=max(margin1,margin2)，如图四所示。
附图说明：
2）若父元素与子元素的margin值均为负，则折叠后的margin=min(margin1,margin2)，如图五所示。
3）若父元素与子元素的margin其中有一个为正值，一个为负值，则折叠后的margin=minmargin1+margin2，如图六所示。
以上是关于CSS盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )的主要内容，如果未能解决你的问题，请参考以下文章
css中的盒子模型
盒子模型
改变盒子模型外边距的是
HTML5+CSS——11盒子模型-边框、内边距、外边距
css盒子模型的深入理解，在块级、行内元素的区别和特性
css中怎么在不放大盒子的情况下放大盒子中的图片?