1.margin负值的运用
- 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
- 鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则加z-index)
demo:
div {
position: relative;
float: left;
border: 2px solid;
height: 100px;
width: 100px;
}
.Box1 {
z-index: 1;
}
.Box2 {
margin-left: -2px;
border-color: brown;
}
<div class="Box1"></div>
<div class="Box2"></div>
效果:
2.文字围绕浮动元素
- 巧妙运用浮动元素不会压住文字的特性
demo:
div {
width: 100px;
}
img {
float: right;
padding-top: 10px;
height: 50px;
width: 50px;
}
span {
word-wrap: break-word;
}
<div class="Box1">
<img src="./t1.png" alt="#">
<span>111111111111111111111111</span>
</div>
效果:
* {
margin: 0;
padding: 0;
}
ul {
height: 35px;
text-align: center;
}
ul li {
display: inline-block;
list-style: none;
margin: 5px;
height: 35px;
width: 35px;
text-align: center;
line-height: 35px;
}
.px100 {
width: 100px;
}
.bd {
border: 1px solid gray;
}
<ul>
<li class="first px100 bd"><<上一页</li>
<li class="bd">1</li>
<li>2</li>
<li class="bd">3</li>
<li class="bd">4</li>
<li class="bd">5</li>
<li><span>...</span></li>
<li class="next px100 bd">下一页>></li>
</ul>
效果:
4.CSS 三角强化
原理:
- 利用盒子的各个边框的尺寸值大小不同来对三角形的角度进行调整
demo:
div {
width: 200px;
border-top: 50px solid red;
border-right: 30px solid blue;
}
<div></div>
效果:
5.文章参考链接
a. https://www.boxuegu.com/
b. https://www.cnblogs.com/lanleiming/p/5434314.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。