CSS解决盒⼦模型嵌套⼀、实现⼀个超链接，⿏标点上去变⾊。
要点：通过伪类来切换什么状态：总共有初始状态  被访问    ⿏标移动  点击  四个状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="#1">这是第⼀个链接</a>
<br>
<br>
<a href="#12">这是第⼆个链接</a>
</body>
</html>
a {
color:yellow;
}
a.link{
color：blue;
}
a.visited {
color: red;
}
a.hover{
background-color: tomato;
font-size: 30px;
}
a.active{
color:green;
}
以上为实验结果
none  不实现项⽬符号  disc：实⼼圆    circle：空⼼圆  square：实⼼⽅块
ol->  demical ：阿拉伯数字
盒⼦：
所有的元素  类⽐鞋盒装了鞋⼦  堆在⼀起
内容：鞋⼦
内边距：报纸  空间
盒⼦框：鞋盒  纸盒⼦
外边距：鞋盒  鞋盒之间的距离
.box1{
/*盒⼦框*/
border:5px solid red;
/*内边距*/
/*上下左右  10px*/
padding:10px;
/*上下20px，左右50px*/
padding:20px 50px;padding是外边距还是内边距
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。