HTML+CSS知识点-周2.md

一、状态伪类（链接）a 标签

   a:link{  // 链接未访问状态
       color: aqua; 
   }
   a:visited{  // 链接访问过后
       color: brown;
   }
   a:hover{  // 链接悬停状态
       color:yellow;
   }
   a:active{ // 链接的激活状态（鼠标按下）
       color: pink;
   }
   
hover不仅可以表示链接的悬停，其他的标签也可以使用

二、盒模型

• css中把每个标签看作是一个盒子，有四层结构，分别是内容、内边距（内填充）、边框、外边距。

   1.content 尺寸=width+height
   2.padding 盒子的边缘和内容之间的距离,这段距离会显示背景，不会显示内容
   3.border 边框是指盒子边缘的线条
   4.margin 是指盒子和相邻元素或者父元素之间的距离

   padding-top/bottom/left/right
   boder-top/bottom/left/right
   margin-top/bottom/left/right

   margin:0 auto;  /*块元素水平居中*/

边框简写属性 border:border-width border-style border-color
   border:30px solid black;      
   border-right: 0;   /*去掉边框两种写法*/
   border-left: none;

内边距：
       padding:10px;   上下左右四个方向内边距相同
       padding:10px 20px;  上下     左右
       padding:10px 20px 30px;  上   左右   下
       padding:10px 20px 30px 40px;  上   右  下   左
边框：
       border-width:2px;  设置边框宽度
       border-style:solid;设置边框风格  
           solid/dashed/dotted/double 实/虚/点/双实线  
       border-color:red;  设置边框颜色

       border-top-width: 2px;  设置上边框的宽度
       border-top-style: solid;  设置上边框的风格
       border-top-color: yellow;  设置上边框的颜色

       bottom、left、right三个方向和top同理
外边距：
       margin:10px;   上下左右四个方向外边距相同
       margin:10px 20px;  上下     左右
       margin:10px 20px 30px;  上   左右   下
       margin:10px 20px 30px 40px;  上   右  下   左

       margin:0 auto;  水平居中

   * margin可以设置负值，可以通过负值减少元素的占位，比如margin-top为负值（-50px），元素垂直方向会往上移动，并且减少50px的占位       

三、垂直外边距合并问题

1、垂直方向margin-top传递问题(父子关系)

   当父元素没有padding\border\float\position\overflow时，给子元素设置margin-top会把父元素一块儿带下来即父元素也会有margin-top
 解决: 
    1. 给父元素添加1px的上padding或者border,子元素margin-top少1px
    2. 可以用父元素的padding-top实现同样式的效果

2、相邻元素的外边距合并（兄弟关系）

   两同级标签，上一个设置margin-bottom:40px,下一个设置margin-top:60px，最后两者之间的外边距会合并为数值较大的那个值(60px)，不是数值相加(100px)

四、盒子