内边距
- 内边距指的就是元素内容区与边框以内的空间。
- 使用
padding属性来设置元素的内边距。
默认情况下
width和height不包含padding的大小。
- 例如:
padding:10px 20px 30px 40px
这样会设置元素的上、右、下、左四个方向的内边距。
padding:10px 20px 30px;
分别指定上、左右、下四个方向的内边距。
padding:10px 20px;
分别指定上下、左右四个方向的内边距。
padding:10px;
同时指定上左右下四个方向的内边距。
- 同时在css中还提供了
padding-top、padding-right、padding- right、padding-bottom分别用来指定四个方向的内边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #aaffaa;
border: 20px solid red;
padding: 40px 100px;
}
.box1{
width: 100px;
height: 100px;
background-color: #ff414e;
}
</style>
</head>
<body>
<div class="box">box
<div class="box1">box1
</div></div>
</body>
</html>
效果
示意图
外边距
- 外边距是元素边框与周围元素相距的空间。
- 使用
margin属性可以设置外边距。 - 用法和
padding类似，同样也提供了四个方向的margin-top/right/bottom/left。 - 当将左右外边距设置为
auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: blue;
margin-left:20px;
margin-bottom: 40px;
margin-top: 40px;
margin-right: 20px;
/*居中*/
/*margin-left: auto;*/
/*margin-right: auto;*/
/*border: aqua solid 20px;*/
}
.box1{
width: 200px;
height: 200px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
示意图
- 居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: blue;
/*margin-left:20px;*/
/*margin-bottom: 40px;*/
/*margin-top: 40px;*/
/*margin-right: 20px;*/
/*居中*/
margin-left: auto;
margin-right: auto;
/*border: aqua solid 20px;*/
}
.box1{
width: 200px;
height: 200px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
效果
外边距的重叠
- 垂直外边距的重叠
- 在网页中相邻的垂直方向的外边距会发生外边距的重叠
- 外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
- 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距的重叠</title>
<style type="text/css">
.box{
width: 400px;
height: 400px;
background: aqua;
margin-bottom: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: silver;
/*padding: 1px;*/
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
/*margin-top: 100px;*/
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
<div class="box1"></div>
</body>
</html>
效果
浏览器的默认样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览器默认样式</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
background-color: blue;
width: 100px;
height: 100px;
}
p{
background-color: aqua;
}
</style>
</head>
<body>
<div class="box"></div>
<p>一个段落</p>
<ul>
<li>列表</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>
效果
disply 和 visibility
display
- 我们不能为行内元素设置
width、height、 margin-top和margin-bottom。 - 我们可以通过修改display来修改元素的性质。
- 可选值:
- block：设置元素为块元素
- inline：设置元素为行内元素
- inline-block：设置元素为行内块元素
- none：隐藏元素（元素将在页面中完全消失）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display和visibility</title>
<style type="text/css">
a{
background-color: aqua;
display:inline-block;
width: 100px;
height: 100px;
/*display: none;*/
}
</style>
</head>
<body>
<a href="#">工信网</a>
</body>
</html>
效果
visibility
-
visibility属性主要用于元素是否可见。 - 和
display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然 保持，不会被其他元素覆盖。 - 可选值
- visible：可见的
- hidden：隐藏的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display和visibility</title>
<style type="text/css">
a{
background-color: aqua;
/*display:inline-block;*/
width: 100px;
height: 100px;
/*display: none;*/
/*visibility: visible;*/
visibility: hidden;
}
</style>
</head>
<body>
<a href="#">工信网</a>
<p>为了验证</p>
</body>
</html>
效果
内联元素的盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联元素的盒模型</title>
<style type="text/css">
span{
background-color: aqua;
}
.s1{
padding-left: 100px;
border: solid;
}
.box{
width: 200px;
height: 200px;
background-color: blue;
padding-left: 20px;
}
</style>
</head>
<body>
<span class="s1">SPAN</span>
<span>SPAN</span>
<span>SPAN</span>
<div class="box"></div>
</body>
</html>
效果
overflow
- 当相关标签里面的内容超出了样式的宽度 和高度是，就会发生一些奇怪的事情，浏览器会让内容溢出盒子。
- 可以通过
overflow来控制内容溢出的情况。 - 可选值：
- visible：默认值
- scroll：添加滚动条
- auto：根据需要添加滚动条
- hidden：隐藏超出盒子的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #ffff77;
overflow: scroll;
/*overflow: auto;*/
}
.box1{
width: 300px;
height: 100px;
background-color: silver;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
</div>
</body>
</html>
效果
文档流
-
文档流指的是文档中可现实的对象在排列时所占用的位置。 - 将窗体自上而下分成一行行，并在每行中按从左至右的顺序排 放元素，即为文档流。
- 也就是说在文档流中元素默认会紧贴到上一个元素的右边，如 果右边不足以放下元素，元素则会另起一行，在新的一行中继 续从左至右摆放。
- 这样一来每一个块元素都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较麻烦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档流</title>
</head>
<body>
<div style="background-color: #FF0000">
a<div style="width: 60px;height: 50px"></div>
</div>
<div style="width: 50px;height: 50px;background-color: aqua"></div>
<div style="background-color: blue;width: 50px;height: 50px">
<!--<span>我是SPAN</span>-->
</div>
<span style="background-color: purple">SPAN</span>
<span style="background-color: purple">SPAN</span>
<span style="background-color: purple">SPAN</span>
</body>
</html>
效果
浮动
- 所谓浮动指的是使元素脱离原来的文本流，在
父元素中浮动起来。 - 浮动使用
float属性。 - 可选值：
none：不浮动left：向左浮动right：向右浮动
- 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他 浮动元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.box1{
width: 300px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 300px;
height: 100px;
background-color: yellow;
float: left;
/*float: right;*/
}
.box3{
width: 300px;
height: 100px;
background-color: blue;
float: left;
}
.box4{
width: 300px;
height: 100px;
background-color: aqua;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
效果
