<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css-盒子模型</title>
<style>
/*盒子模型是css布局的基石，他规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以像一个盒子一样的外形的平面空间，即都可以像盒子一样的外形和平面空间，即包含边框、边界、补白、内容区、这就是盒子模型。*/
div{
width:500px;
height:300px;
background-color:yellowgreen;
text-align:justify;
padding:20px 30px 15px 25px;
}
/*padding内边距
1个值，4个方向一样；
2个值，上下，左右；
3个值，上，左右，下；
4个值，上，右，下，左；
*/
/*
1.背景颜色蔓延到内边距
2.padding-方向：top bottom left right
*/
.box1{
width: 100px;
height: 100px;
background-color: yellow;
border: 10px dotted red;
}
/*
border:边框
边框的样式：solid，double,dashed,dotted
背景色也能蔓延到边框
*/
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
border-top:5px solid red;
border-left:10px dashed pink;
}
.box3{
width: 100px;
height: 100px;
background-color: mediumpurple;
border-width:10px 20px 30px 40px;
border-color:yellow blue black red;
border-style:solid;
}
/*
border
border-width
border-style
border-color
*/
</style>
</head>
<body>
<!--<div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css-盒子模型2</title>
<style>
/*
margin:外边距
*/
/*div{
width:200px;
height: 200px;
}
.box1{
background-color: red;
border: 1px solid yellow;
margin: 50px;
float: left;
}*/
/*.box2{
background-color: green;
border:1px solid blue;
/*float:right;
}*/
/*.box3{
background-color: black;
margin: 0 auto;
}*/
/*
1.margin-方向，4个方向<可以有负值>
2.背景颜色没有蔓延
3.*{Margin:0}
4.外边距负值？支持
5.平目剧中？margin:0 auto;横向剧中
*/
/*
特性问题
1.兄弟关系，两个盒子处置外边距与水平外边距的问题
——垂直方向外边距取最大值。
——水平方向，外边距会进行合并处理.
2.父子各院系，给子加外边距，但作用于父身上了，则么解决？
--子的margin-top==>父的psdding-top,注意高度计算。
--给父盒子建边框
--加浮动
--overflow:hidden.BFC,
*/
/*.box1,.box2,.box3,.box4{
width: 200px;
height: 200px;
}
.box1{
background-color:red;
margin-bottom: 100px;
}
.box2{
background-color: yellow;
margin-top: 50px;
}
.box3{
float:left;
background-color: blue;
margin: 100px;
}
.box4{
float:left;
background-color: green;
margin: 100px;
} */
.box1{
width: 500px;
height: 500px;
background-color: yellow;
overflow: hidden;
/*float: left;*/
/*padding: 100px;*/
/*border: 1px solid transparent;*//*transparent透明的*/
}
.box2{
width:200px;
height: 200px;
background-color: red;
margin-top: 100px;
/*float: left;*/
}
</style>
</head>
<body>
<!-- <div class="box1"></div>-->
<!-- <div class="box2"></div>-->
<!-- <div class="box3">大家好</div>-->
<!-- <div class="box1"></div>-->
<!-- <div class="box2"></div>-->
<!-- <div class="box3"></div>-->
<!-- <div class="box4"></div>-->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
本文深入探讨了CSS中的盒子模型，包括内容区、边框、内边距以及外边距的设置。通过示例展示了如何使用padding调整元素内部空间，并解释了背景色如何扩展到内边距和边框。此外，还讨论了外边距合并现象，特别是当元素并排或垂直堆叠时，外边距如何相互影响。同时，提到了解决外边距重叠和元素定位的方法，如使用overflow属性或浮动元素。
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
