1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*设置边框*/
border: 10px red solid;
/*
内边距（padding），指的是盒子的内容区与盒子边框之间的距离，一共有四个方向：
padding-top
padding-right
padding-bottom
padding-left
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
*/
/*设置上内边距*/
/*padding-top: 100px;*/
/*设置右内边距*/
/*padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;*/
/*
使用padding可以同时设置四个边框的样式，规则和border-width一致
*/
/*padding: 100px;*/
/*padding: 100px 200px;*/
/*padding: 100px 200px 300px;*/
padding: 100px 200px 300px 400px;
}
/*创建一个子元素box2占满box1*/
.box2{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red;
margin: 0 auto;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距的重叠</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: red;
/*为上边的元素设置一个下外边距*/
margin-bottom: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
margin-top: 100px;
}
.box3{
width: 200px;
height: 100px;
background-color: yellow;
padding-top: 100px;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览器默认样式</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>将进酒，杯莫停。</p>
<p>智商太低会传染？离我远点！</p>
<p>大小姐驾到，通通闪开。</p>
<ul>
<li>我靠，I服了YOU</li>
<li>干嘛这么认真冲动呢</li>
<li>周日被我射熄火了，所以今天是周一</li>
<li>大河之剑天上来</li>
</ul>
</body>
</html>
5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联元素的盒模型</title>
<style type="text/css">
span{
background-color: #bfa;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.s1{
padding-left: 100px;
padding-right: 100px;
border: 1px blue solid;
margin-left:100px;
margin-right: 100px;
}
.s2{
margin-left: 100px;
}
</style>
</head>
<body>
<span class="s1">我是一个span</span>
<span class="s2">我是一个span</span>
<span>我是一个span</span>
<div class="box1"></div>
</body>
</html>
6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display和visibility</title>
<style type="text/css">
a{
background-color: #bfa;
/*
将一个内联元素变成块元素
通过display样式可以修改元素的类型
可选值：
inline：可以将一个元素作为内联元素显示
block: 可以将一个元素设置块元素显示
inline-block：将一个元素转换为行内块元素
- 可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
none: 不显示元素，并且元素不会在页面中继续占有位置
*/
display: none;
/*为其设置一个宽和高*/
width: 500px;
height: 500px;
}
.box{
width: 100px;
height: 100px;
background-color: orange;
visibility: hidden;
}
</style>
</head>
<body>
<div class="box"></div>
<a href="#">我是一个大大的超链接</a>
<span>Hello</span>
<img src="" alt="" />
</body>
</html>
7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
通过overflow可以设置父元素如何处理溢出内容：
可选值：
- visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
- hidden, 溢出的内容，会被修剪，不会显示
- scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容
- auto，会根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加*/
overflow: auto;
}
.box2{
width: 100px;
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
（此处自行插入长段子）
</div>
</body>
</html>
8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档流</title>
</head>
<body>
<div style="background-color: #bfa;">
<div style="height: 50px;"></div>
</div>
<div style="width: 100px; height: 100px; background-color: #ff0;"></div>
<span style="background-color: yellowgreen;">zzzzzzz</span>
<span style="background-color: yellowgreen;">xxxxxxx</span>
<span style="background-color: yellowgreen;">ccccccc</span>
<span style="background-color: yellowgreen;">vvvvvvv</span>
<span style="background-color: yellowgreen;">bbbbbbb</span>
<span style="background-color: yellowgreen;">nnnnnnn</span>
</body>
</html>
网友评论