HTML + CSS 扩展
2017-09-06 本文已影响0人
yuxiaohu
1 min-width
给div设置 min-width: 1200px, (最小宽度1200像素,同主宽度)
可以解决在网页缩放时背景或者图片两边留白的问题.特别是上面导航和下面介绍.
2 做三角形
// html
<div></div>
// css
div{
width: 0;
height: 0;
/*设置四周边框颜色透明 rgba(0,0,0,0) */ transparent 也是透明
border: 20px solid rgba(0,0,0,0);
/*改变上部边框颜色为red*/
border-top: 20px solid red;
}
3 clip-path 裁剪
/* 多边形 */
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
/* 圆 */
clip-path: circle(30px at 35px 35px); // at 后面是圆心的值 x y
/* 椭圆 */
clip-path: ellipse(65px 30px at 125px 40px); // at 后面是椭圆圆心的值 x y
// css
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
animation:yxh 3s infinite;
}
@keyframes yxh {
0%{clip-path: polygon(15% 15%, 100% 0%,100% 30%,80% 30%,80% 50%,100% 50%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);}
50%{clip-path: polygon(0 0, 100% 0, 100% 30%,100% 30%,100% 50%,100% 50%,100% 100%, 75% 100%, 75% 100%, 50% 100%, 0% 100%);}
100%{clip-path: polygon(15% 15%, 100% 0%,100% 30%,80% 30%,80% 50%,100% 50%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);}
}
</style>
// html
<body>
<div></div>
</body>
4 垂直对齐图像的方法
- align="center"
// html
<a href="#">我是a标签</a>
- vertical-align 属性
// ccs
<style>
img{vertical-align: middle;}
</style>
// html
<body>
<a href="#">我是a标签</a>
</body>
image.png
5 文本换行
两种方式 :
1. word-wrap : break-word; // 写在文本父级
2. word-break : break-all; // 写在文本父级
6 超出文本省略号
// html
<div>
<p>....long.....</p>
</div>
// ccs
<style>
div {
width: 200px;
height: 50px;
border: 1px solid red;
}
p {
/*单行省略号*/
/*text-overflow: ellipsis ;*/
/*overflow: hidden;*/
/*2行省略号*/
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
