css---盒子模型---外边距

最新推荐文章于 2022-11-02 20:08:50 发布

chen_zan_yu_

最新推荐文章于 2022-11-02 20:08:50 发布

阅读量390

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/chen_zan_yu_/article/details/89405477

版权

CSS 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset=ut"utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				border:10px solid red;
				/*
				 * 外边距指的是当前盒子与其他盒子之间的距离
				 * 	它不会影响可见框的大小，而是影响到盒子的位置
				 * 盒子有四个方向的外边框
				 * 	margin-top
				 * 	margin-bottom
				 * 	margin-left
				 * 	margin-right
				 * 
				 * 由于页面中的元素都是靠左靠上摆放的
				 * 所以注意当我们设置上和左外边框时，会导致自身的位置发生变化
				 * 而如果设置右和下外边框则会改变其他盒子的位置
				 * 
				 * 外边距可以指定负值
				 * 如果外边距设置的是负值，则元素向反方向移动
				 * 
				 */
				/*
				 * 上外边距
				 */
				margin-top: 100px;
				/*
				 * 左外边距
				 */
				margin-left: 100px;
				/*
				 * 下外边距
				 */
				margin-bottom: 100px;
				/*
				 * 右外边距
				 */
				margin-right: 100p;
				
				/*
				 * margin还可以设置为auto，auto一般只设置给水平方向的margin
				 * 	如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
				 * 
				 * 垂直方向外边距如果为auto，则外边距默认就是0
				 * 
				 * 如果将left和right同时设置为auto，则会将两则的外边距设置为相同的值
				 * 就可以使元素自动在父元素中居中，所以我们经常将外边距设置为auto
				 * margin-left:auto;
				 */
				/*
				 * 外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距
				 * 规则和padding一样
				 * margin:10px 20px 30px 40px;
				 * 
				 * margin:0 auto;便是上下0，左右居中
				 */
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color:royalblue ;
			}
		</style>
	</head>
	<body>
		<div class="box1">
		</div>
		<div class="box2">
		</div>
	</body>
</html>

chen_zan_yu_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css---盒子模型---外边距

<!DOCTYPE html><html> <head> <meta charset=ut"utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; back...
复制链接

扫一扫