复习css基础 从头开始 认清自己 认真做一遍抵上简单看一遍
1.盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style rel="stylesheet" type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box1{
/*position: relative;*/
/*top: 50px;*/
/*left: 300px;*/
width: 400px;
height: 400px;
background-color: #d8f5f0;
margin: 200px;
padding-top: 60px;
}
.box2{
width: 200px;
height: 200px;
background-color: red;
margin-left: 60px;
padding: 40px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
</body>
</html>
2.overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style rel="stylesheet" type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 200px;
height: 200px;
margin: 200px;
background-color: #d8f5f0;
/*超出部分隐藏*/
/*overflow: hidden;*/
/*如果有超出部分显示滚动条*/
/*overflow: auto;*/
/*一直显示滚动条*/
/*overflow: scroll;*/
}
</style>
</head>
<body>
<div class="box1">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
(1)默认---超出情况下直接会超出盒子范围(等同于overflow:visible)
(2)overflow: hidden---超出部分隐藏
(3) overflow: auto---如果有超出部分显示滚动条 沒有超出则不显示滚动条
(4)overflow: scroll---一直显示滚动条 不管内容有没有超出
3.border边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#border1{
width: 200px;
height:200px;
background-color:red;
border-width: 4px;
border-color: black;
border-style: solid;
}
</style>
</head>
<body>
<div id="border1"></div>
</body>
</html>
border有3个属性:width粗细、color颜色、style样式
其中style可以是 solid 实线 、 dashed虚线 、double双线 、dotted点状线。。。。。
写法1:
写法2:
也可以单独控制一边:
4.margin 外边距
margin属性和padding属性可以取值的单位有:px和%(外层盒子的高度和宽度),上右下左四个取值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 100px;
height: 100px;
margin: 20px 15px 50px 40px;
border: 1px solid red;
}
#box3{
width: 400px;
height: 400px;
margin: 100px 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="box3">
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
</div>
</body>
</html>
使用margin属性时要注意,两个盒子在垂直方向上的margin会合并。
margin属性还可以设定盒子的水平居中,将左侧和右侧的值取值为auto