常见问题讲解
css边距重合问题
通过box父盒子包裹box1，实现边框不重合的目的
overflow：hidden; 或者 border:1px solid transparent; 增加透明边框或者隐藏边距达到父盒子罩住子盒子的目的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keyword" content="" />
<meta name="description" content="" />
<title>css边距重合案例</title>
<link href="" rel="stylesheet" />
<style type="text/css">
.box1,.box2{
width: 150px;
height: 150px;
background: skyblue;
}
.box1{
margin-bottom:30px;
}
.box2{
margin-top:50px;
background: pink;
}
.box{
overflow: hidden
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
</script>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCOFeSMw-1577065758775)(http://img0.ph.126.net/cYZ-SyiQbM738667y6_Hzg==/6632357492842262628.png)]
CSS优先级问题
#box .list li{
border:5px solid #E1E471;
}
#box li {
border:1px solid green;
}
5px的显示出来
- 优先级原则一：选择器谁多应用谁的
<style type="text/css">
ul li{
border:5px dashed green;
}
li {
border:1px solid red;
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
可以看出绿色优先覆盖了红色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-key3G9l7-1577065758776)(http://img1.ph.126.net/qYP9_hDe5HubunnBt1XmfQ==/6632239845095881861.png)]
.list li{
border:5px solid #E1E471;
}
ul li {
border:1px solid green;
}
这次边框选择的是5px的
- 优先级原则二： id选择器 > class选择器 > 标签选择器
div.box{} 首先选择div class名字有box的div
快捷键，对一段内容加整体标签
alt+shift+w 对选定内容加p标签，可以修改
crtl+alt+enter 对选定内容加div标签，可以修改
jquery引用地址
http://www.bootcdn.cn/jquery/
https://cdn.bootcss.com/jquery/3.1.1/jquery.js 原生代码
https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js 压缩代码
扫一扫
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
