1盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
/*设置盒子的模型，长宽高*/
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
border-width: 10px;
/*单独加距离*/
/*border-top-width: 10px;*/
border-color: red;
/*多种颜色 上左下右*/
/*border-color: red yellow orange blue;*/
border-style: solid;
/*边框*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
运行结果：
image.png
2.边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #bfa;
/*border-width: 10px;*/
/*border-color: yellow;*/
/*border-style: solid;*/
/*简便方法*/
border: yellow solid 10px;
/*一边没有用none*/
/*border-right: none; */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
运行结果
image.png
3.内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内边距</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px yellow solid;
padding: 100px 200px 300px 400px;
}
.box2{
width:100%;
height:100%;
background-color:red;
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
运行结果：
image.png
4.外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: #bfa;
border: yellow solid 10px;
/*移动位置*/
margin-top: 100px;
margin-left: 100px;
}
.box1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
运行结果：
image.png
5.外边距重叠
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距重叠</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: #bfa;
}
.box1{
width:200px;
height: 200px;
background-color: yellow;
}
.box2{
width:200px;
height: 200px;
background-color: red;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
padding-right: 100px;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="box">
<<div class="box3"></div>
</div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
运行结果：
image.png
6.内联元素的盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联元素的盒子模型 </title>
<style type="text/css">
span{
background-color: blue;
}
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div class="box"> </div>
</body>
</html>
运行结果：
image.png
7.display和visibility
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display和visibility </title>
<style type="text/css">
a{
background-color:#bfa;
/*隐藏*/
display:none;
width: 300px;
height: 300px;
}
.box{
width: 100px;
height: 100px;
background-color:blue;
/*能给上面代码隐藏*/
/*display: none;*/
visibility: hidden;
}
</style>
</head>
<body>
<div class="box"></div>
<a href="#">我是一个超链接</a>
<span>笑话</span>
</body>
</html>
运行结果：
image.png
8.overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow </title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: yellow;
/*能滑动*/
overflow: auto;
}
.box1{
width: 100px;
height: 400px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
运行结果：
image.png
9.文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档流 </title>
<style type="text/css">
</style>
</head>
<body>
<div style="background-color: blue;">a
</div>
<div style="width: 100px; height: 100px; background-color:#ffa;">
</div>
<span style="background-color: red">我是一个span</span>
<span style="background-color: red">我是一个span</span>
<span style="background-color: red">我是一个span</span>
</body>
</html>
运行结果：
image.png
10.浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动 </title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: blue;
/*这句话让竖着变成横着*/
/*display: inline-block;*/
/*右移动float:right*/
/*左移动float:left*/
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
/*display: inline-block;*/
}
.box3{
background-color:yellow;
width: 200px;
height: 200px;
/*display: inline-block;*/
}
</style>
</head>
<body>
<div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body>
</html>
运行结果：
image.png
11.文字绕图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字绕图 </title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box1{
width: 50px;
height: 50px;
background-color: red;
float: left;
}
.p1{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p class="p1">
法国红酒看来，改变你们，改变你妈隔壁你们该不会回家看了加纳喀麦隆了，1环保节能喀麦隆，1吧今年考了比较忙，。壹加纳喀麦隆
</p>
</body>
</html>
运行结果：
image.png
12.内联元素的浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联元素的浮动 </title>
<style type="text/css">
.box{
background-color: #bfa;
}
.s1{
float: right;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">小俊是傻子吧</div>
<span class="s1"> 我的天啊 你咋知道的</span>
</body>
</html>
运行结果：
image.png
网友评论