1、 伪元素(行级元素)
伪元素并不是真正的页面元素,但用法与表现行为和真正的页面元素一样。
常用来清除浮动和添加符号等等。
html
<span>123 </span>
css
span::before{
content:"前端";
display:inline-block;
width:200px;
height:200px;
background-color:red;
}
span::after{
content:"web";
display:inline-block;
width:200px;
height:200px;
background-color:black;
}
2、文字溢出容器处理
(1)单行文本
<p>
前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。
</p>
p{
height:50px;
width:300px;
line-height:25px;
border:1px solid black;
}
添加以下编码让溢出部分打点展示:
p{
white-space: nowrap; //不换行
overflow: hidden;//溢出部分隐藏
text-overflow: ellipsis;//截断部分打点展示
}
(2)多行文本截断展示
想让容器内展示n行文本,设置 line-height 为 1/n倍 的 height。
溢出部分设置overflow:hidden隐藏。
3、开发小经验
如何在无法加载css时,仍然能够点击链接,以淘宝logo为例:
<a href="https://www.taobao.com/" target="_blank">淘宝网</a>
a{
display:inline-block;
width:200px;
height:100px;
background-image: url(TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
background-size:center;
background-repeat: no-repeat;
background-size: 200px 100px;
}
此时有两种方法处理:
第一种:
a{
text-indent: 200px;//文本缩进到logo外
white-space: nowrap;//设置文本不换行
overflow: hidden;//溢出部分隐藏
}
未隐藏如图:
第二种:
a{
height:0px;//去掉容器内容的高度
padding-top:100px;//设置上内边距,让logo放在里面
overflow:hidden;//溢出部分隐藏
}
未隐藏如图:
2018.9.25