今天开始学盒子模型了,感觉有点绕,有挺多还不明白的地方。先记录下我学到的东西吧!
盒子这个模型有边框border、内边距padding、外边距margin属性。边框可以设置宽度、样式和颜色,内边距和外边距都是有上下左右四个方向的。一个盒子就像一个装着电脑的快递盒,边框就相当于快递盒的厚度、样式、颜色。内边距就是电脑和快递盒之间的距离,而外边距就是快递盒之间的距离。
边框
border:值有宽度、样式(solid实线 、 double双线、dashed虚线、dotted点状线)、颜色,如果直接用border,上下左右的边框都会设置成一样。
也可以设置单方向上的边框值:
border-top: 设置上边框,值有宽度、样式、颜色,将几个样式写在一起;
border-left: 设置左边框,值有宽度、样式、颜色,将几个样式写在一起;
border-right: 设置右边框,值有宽度、样式、颜色,将几个样式写在一起;
border-bottom: 设置下边框,值有宽度、样式、颜色,将几个样式写在一起;
也可以将宽度、样式、颜色拆分来设置边框值:
border-width:设置边框宽度,可以设置上右下左四个方向宽度。
border-style:边框样式,solid实线 double双线 dashed虚线 dotted点状线,可以设置四个方向的样式。
border-color:边框颜色,可以设置四个方向颜色。
内边距
padding:四个值设置在一起,可以设置不同数量的值代表不同方向的内边距
- padding 1个值,4个方向一样
- padding 2个值,上下 左右
- padding 3个值,上 左右 下
- padding 4个值,上 右 下 左
也可以按单个方向设置边距:
- padding-top:上边距
- padding-bottom:下边距
- padding-right:右边距
- padding-left:左边距
padding不支持负值~
外边距
外间距和内间距大同小异
margin:四个值设置在一起,可以设置不同数量的值代表不同方向的内边距
- margin 1个值,4个方向一样
- margin 2个值,上下 左右
- margin 3个值,上 左右 下
- margin 4个值,上 右 下 左
也可以按单个方向设置边距:
- margin-left:左外边距
- margin-right:右外边距
- margin-bottom:下外边距
- margin-top:上外边距
有一个比较特别的经常会用到:margin:0 auto;可以使盒子居中
margin支持负值~
外边距有很多特别的属性:
1.兄弟盒子。两个盒子上下排列时,div1设置下边距,div2设置上边距时,垂直方向外边距取两个盒子设置的最大的那个边距,而不是两个边距之和。
两个盒子左右排列时,水平方向取外边距之和,div1设置右边距,div2设置左边距时,div1和div2之间的边距为外边距之和。
2.父子盒子。设置在子盒子的外边距,将会作用于外面的父盒子上。
解决:
- 子margin-top=父的padding-top,注意高度计算
- 给父盒子加边框
- 给子盒子加浮动
- 加overflow:hidden
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
#box{
width: 241px;
height: 335px;
background: white;
margin: 0 auto;
padding:11px 11px 18px ;
}
.title{
width: 235px;
height: 19px;
padding-left: 4px;
border-left:2px solid #254282;
color:#254282;
line-height:19px;
font-size: 14px;
font-weight: bold;
margin: 12px;
}
.bigpic{
width: 241px;
height: 170px;
margin-bottom: 12px;
}
.bigpic p{
width: 241px;
height: 26px;
background-color: #f6f7f8;
line-height: 26px;
text-align:center;
font-size: 12px;
}
.bigpic img{
width: 241px;
}
.smallpic{
width: 241px;
height: 120px;
}
.smallpic img{
width: 112px;
}
.pic1 p,.pic2 p{
width: 112px;
background-color: #f6f7f8;
line-height: 14px;
text-align:justify;
font-size: 12px;
overflow: auto;
}
.pic1{
float:left;
}
.pic2{
float:right;
}
</style>
</head>
<body>
<div id="box">
<div class="title">百家号</div>
<div class="bigpic">
<img src="img/裁员.png" alt="">
<p>腾讯、阿里被传将裁掉几万人</p>
</div>
<div class="smallpic">
<div class="pic1">
<img src="img/总裁.png">
<p>任天堂前总裁雷吉称Facebook并非创新公司</p>
</div>
<div class="pic2">
<img src="img/抛售.png">
<p>NFT遭遇大规模抛售</p>
</div>
</div>
</div>
</body>
</html>