CSS解决盒子模型嵌套

最新推荐文章于 2024-07-04 14:16:26 发布

曾国潘

最新推荐文章于 2024-07-04 14:16:26 发布

阅读量7.2k

点赞数 5

本文链接：https://blog.csdn.net/qq_41177361/article/details/103566255

版权

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

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

<!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;

}

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

曾国潘

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
CSS解决盒子模型嵌套

一、实现一个超链接，鼠标点上去变色。要点：通过伪类来切换什么状态：总共有初始状态被访问鼠标移动点击四个状态<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w...
复制链接

扫一扫