6.1.2.6 盒子
margin:外边距。
body有默认的margin:8px
margin: 20px;
margin-top: 40px;
margin-left: 50px;
margin-bottom: 100px;
padding:内边距,边框与内容之间的距离. padding的区域是有背景颜色,并且背影颜色和内容区域颜色一样。
也就是说,background-color这个属性将填充所有的border以内的区域。
padding有四个方向。所以说我们能分别描述4个方向的padding
方法有两种:
1. 写小属性
padding-top, padding-right,padding-bottom,padding-left
2. 写综合属性,用空格隔开
padding: 20px 30px 40px 50px #上 右 下 左
padding: 20px 30px 40px # 上(20px) 左右(30px) 下(40px)
padding: 20px 30px # 上下(20px) 左右(30px)
padding: 20px #上下左右(20px)
一些标签默认是有padding的. ul>li 8px
* 效率不高,所以应该使用并集选择器。已经有人写好清除默认的padding 【reset.css】,导入reset.css即可。
*{
padding:0;
margin:0
}
border:指的是盒子的边框,有三个要素:粗细,线性,颜色
border: 1px solid red;
如果颜色不写,黑夜是黑色
如果粗细不写 不显示。只写线性样式,默认的有上下左右 3px的宽度 solid默认的黑色
1. 按照3要素
border-width: 5px 或:border-width: 5px 10px
border-style:solid; 或:solid dotted double dashed
border-color:red; 或: red green yellow
2. 按照方向
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
border-right-width: 20px
border-bottom-width:
border-left-width:
3. 设置border没有样式
border: none;
border-left: none;
border-left: 0;
例子: 使用border制作小三角形
div{
width:0;
height:0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
width: 指的是内容的宽度,而不是整个盒子真实的宽度
height:指的是内容的高度,而不是整个盒子真实的高度
盒子的宽度=内容的宽度+(边框+padding+[margin])*2