【css基础学习三之div+css盒子模型】

div+css盒子模型
内边距 padding
外边距 margin
边框   border

1.边框写法  border:1px solid pink;//1px粉色边框的实线
          border:1px dashed pink;//1px粉色边框的虚线
上边框 border-top
下边框 border-bottom
左边框 border-left
右边框 border-right

表格细线边框
table{border-collapse:collapse;}表格边框合并在一起

圆角边框
border-radius:左上角 右上角 右下角 左下角;

2.内边距（padding）

padding 属性用于设置内边距 是指 边框与内容之间的距离

padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

padding 
1个值:padding: 3px --->上下左右3px
2个值:padding: 3px 5px--->上下3px 左右5px
3个值:padding: 3px 5px 10px --->上3px 左右5px 下10px
4个值:padding: 3px 5px 10px 20px -->顺时针 上3px 右5px 下10px 左20px

3.外边距(margin)
margin属性用于设置外边距 。设置外边距会在元素之间创建空白
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
取值顺序跟内边距相同

外边距实现盒子居中
   必须满足两个条件
       1.必须是块级元素
       2.盒子必须指定宽度(width)
  然后左右外边距都设置为auto,就可使块级元素水平居中
  eg: .header{width:960px;margin:0 auto;}

文字水平居中是 text-align:center
盒子水平居中 左右 margin 改为auto

清楚默认的内外边距
*{
    padding:0; 
    margin:0;
}

4.外边距合并问题
相邻块级元素垂直外边距合并(外边距塌陷)
   当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，
   则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者

嵌套块元素垂直外边距合并
   对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，
   合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决措施：1. 可以为父元素定义1像素的上边框或上内边距。

      2. 可以为父元素添加overflow:hidden。

  外盒尺寸宽度： content width + padding + border + margin
  内盒尺寸宽度： content width + padding + border

5.圆角边框
   border-radius: 50% //让一个正方形变成圆圈
6.盒子阴影
   box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
 
   box-shadow: 5px 5px 3px 4px rgba(0,0,0,.4);

  注意：1. 前两个属性是必须写的。其余的可以省略。
        
2. 外阴影 (outset) 但是不能写    默认 想要内阴影  inset