用css3做一个关闭icon，
Posted anthonyliu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用css3做一个关闭icon，相关的知识，希望对你有一定的参考价值。
1. 用css3做一个关闭icon
html代码：
<div class="nav-icon"> <div>合作机构授权<span class="close"></span></div> </div>
css3代码：
.nav-icon{ position: relative; padding: 24px 0; background:#ffffff; width: 100%; font-family: PingFangSC-Regular; font-size: 18px; color: rgba(0,0,0,0.75); letter-spacing: 0; text-align: center; } .close { position: absolute; right: 10px; line-height: 20px; font-size: 30px; color: #C0C0C0; } .close::before { content: "\\00D7"; }
对于按钮中的叉按钮，用的是Unicode中的一种标识，以下这些也可以使用，标识 编码(16进制) Name
✖ \\2716 粗体乘法
✗ \\2717 交叉
✘ \\2718 粗体交叉
× \\00D7 乘法符号
⨯ \\2A2F 向量乘积
x \\78 小写字母
X \\58 大写字母
效果：
2.场景：文本一行右对齐，多行左对齐
.parent { flex:1; //左右撑大 overflow: visible; //都是可见的 white-space:normal //默认，可以换行 text-align:right //一行向右对齐 } .child { display:inline-block //一行显示行类，多行为块级元素 text-align: left; //多行左对齐 word-break: break-all; 文本打散，解决中英文，中文一行，英文一行 } <div class="parent"> <p class="child">显示的文本</p> </div>
3.sticky foot
在浏览器中，无论是内容超过一屏还是没有超过一屏，底下的按钮始终在页面底部而不是在浏览器底部。 可以通过一个div放在页面底部：
position:absolute;
width: 100%;
bottom:0;
4.利用伪类弹框居中
借助伪类设置一个行内元素，设置height=100% vertical-align: middle; 弹出框相对伪类元素的样式显示，可以让弹出框居中。
<style> .container{ position: fixed; top:0; left:0; bottom: 0; right: 0; background: rgba(0,0,0,.5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container::after { content: \'hello world!\'; display: inline-block; height: 100%; vertical-align: middle; } .dialog { display: inline-block; width: 10rem; height: 10rem; vertical-align: middle; text-align: left; font-size: 14px; white-space: normal; background: #ffffff; padding: 10px; } </style> <body> <div class="container"> <div class="dialog"> 基于vertical-align的水平垂直居中 ---css精选 </div> </div> </body>
5.通过hover伪类来控制div的显示和隐藏
.mgf_tips_icons:hover .float_tips_area{ display:block; border: 1px solid #dedede; }
以上是关于用css3做一个关闭icon，的主要内容，如果未能解决你的问题，请参考以下文章