CSS解决盒子模型嵌套

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

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




    
    
    
    Document


    这是第一个链接
    

这是第二个链接
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;

}CSS解决盒子模型嵌套_第1张图片

效果如上图

问题思考:

上下margin重叠的问题:

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

        1.float 方法

        2.inline-block

CSS解决盒子模型嵌套_第2张图片

2.嵌套关系

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

       1.给父元素加border或者padding

        2.给父元素加上overflow:hidden

CSS解决盒子模型嵌套_第3张图片

CSS解决盒子模型嵌套_第4张图片

CSS解决盒子模型嵌套_第5张图片

 

 

你可能感兴趣的:(CSS解决盒子模型嵌套)