CSS解决盒子模型嵌套

一、实现一个超链接，鼠标点上去变色。

要点：通过伪类来切换什么状态：总共有初始状态   被访问    鼠标移动   点击  四个状态

    
    
    
    


    这是第一个链接
    

    

    这是第二个链接

a {
    color:yellow;
    
}
a.link{
     color：blue;
}
a.visited {
    color: red;

}
a.hover{
    background-color: tomato;
    font-size: 30px;

}
a.active{
    color:green;

}

file:///E:/google%E4%B8%8B%E8%BD%BD/demo2.html#12

以上为实验结果

none  不实现项目符号  disc:实心圆    circle:空心圆   square:实心方块   

ol->  demical :阿拉伯数字   

盒子：

所有的元素   类比鞋盒装了鞋子  堆在一起

内容：鞋子

内边距：报纸   空间

盒子框：鞋盒  纸盒子

外边距：鞋盒  鞋盒之间的距离

.box1{

    /*盒子框*/

    border:5px solid red;

    /*内边距*/

    /*上下左右  10px*/

    padding:10px;

    /*上下20px,左右50px*/

    padding:20px 50px;

    background: hotpink;

    /*上20px,左右50px,下40px,左50px,顺时针  上  右下  左  

    或者设置  padding-top:  padding-bottom:  padding-right:  padding-left

    背景不包含边框以及外边距，背景包含了盒子里面装的东西，包含内边距padding和本身自己的内容*/

    /*外边距,可以设置盒子与盒子之间的留白*/

    margin:30px;

    }

.box2{

    border:5px solid greenyellow;

}

效果如上图

问题思考：

上下margin重叠的问题：

1.平级的元素    最大值  60px

        1.float 方法

        2.inline-block

2.嵌套关系

当两个盒子嵌套的时候，默认是没有封口的，通过加上封口来实现嵌套

       1.给父元素加border或者padding

        2.给父元素加上overflow:hidden