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

 

转载于:https://www.cnblogs.com/beallaliu/p/9286588.html