<!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>