web前端全系列 教程
1839个小节阅读:2243.1k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
CSS margin(外边距)属性定义元素周围的空间
在CSS中,它可以指定不同的侧面不同的边距
xxxxxxxxxx
div{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
为了缩短代码,有可能使用一个属性中margin指定的所有边距属性
所有边距属性的简写属性是 margin
xxxxxxxxxx
div{
margin:100px 50px;
}
margin属性可以有一到四个值
xxxxxxxxxx
margin:25px 50px 75px 100px; // 顺序:上 右 下 左
margin:25px 50px 75px; // 顺序:上 (左右) 下
margin:25px 50px; // 顺序:上下 左右
margin:25px; // 顺序:所有方向
margin需要注意的问题
外边距合并问题
垂直方向上外边距相撞时,取较大值
xxxxxxxxxx
<div class="one"></div>
<div class="two"></div>
xxxxxxxxxx
<style>
.one,.two{
width: 200px;
height: 200px;
}
.one{
background-color: red;
margin-bottom: 50px;
}
.two{
background-color: blueviolet;
margin-top: 100px;
}
</style>
xxxxxxxxxx
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
x<style>
.box {
width: 1240px;
margin: 0 auto;
}
.box>div {
width: 303px;
height: 375px;
background-color: red;
float: left;
margin-bottom: 10px;
margin-right: 9px;
}
.box>div:nth-child(4n) {
margin-right: 0;
}
</style>
实时效果反馈
1.设置一个容器,宽度为1000px,并且在网页中左右居中:
A {width:1000px;margin:0}
B {width:1000px;margin:0 auto;}
C {margin:0 auto;}
D {width:1000px;margin:auto;}
答案
1=>B