一.盒子模型:
目录
盒子模型分别由标签内容,内边距,边框和外边距组成。
1.功能:在模型中,它规定了 标签处理内容,内边距,外框和外边距的方式。
2.组成:最内是内容,保卫内容的是内边距,内边距的边缘是边框,边框的外围是外边距。
3.特点:边框以外是外边距,外边距默认是透明的。
一.内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒模型-内容</title>
<style>
#content{
width: 300px;
height: 200px;
background-color: hotpink;
font-size: 20px;
overflow: auto;
}
</style>
</head>
<body>
<div id="content">
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit dicta harum soluta non, nisi architecto aliquam ex amet voluptatibus. Nemo pariatur dignissimos reprehenderit. Iure aliquam repellat, architecto sequi aperiam corporis?
</div>
</div>
</body>
</html>
效果如下:
二.内边距
顺时针
<style>
#content{
width: 300px;
background-color: pink;
font-size: 20px;
padding: 20px;
}
</style>
效果如下:
三.边框
围绕元素内容和内边距的一条线,它规定元素边框的样式,宽度和颜色,语法格式:
border-bottom-style:dotted;
四.外边距
auto块元素水平居中
效
<title>外边距</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: pink;
margin-top: 200px;
}
.child{
width: 100px;
height: 100px;
background-color: aqua;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="div1">
<div class="child"></div>
</div>
</body>
效果如下:
解决方案;
/* 解决父元素没有内容导致子元素的上外边距溢出的问题 */
border: 1px solid transparent;/padding-top: 1px;
效果如下:
ps: