400-800-9385
网站建设资讯详细

网站前端开发之常用CSS分享

发表日期:2019-09-20 09:42:07   作者来源:志平   浏览:3117   标签:网站前端开发    
网站制作少不了前端开发,现在一般采用Html5进行开发,发挥空间很大。

在网页前端开发中常用的前端css有:

1.单行省略
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
 
2.多行省略
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;//超出3行显示省略
overflow: hidden;
 
3. 换行的方法
(1)<br />
(2)强制换行
word-break : break-all; 实现强制断行.
字母和单词换行设置:word-break:break-all;word-wrap:break-word;
4. 不换行的方法
white-space:nowrap;文本不会换行,在同一行上继续,直到遇到 <br> 标签为止。
字母和单词不换行设置:word-break:keep-all;word-wrap:normal;
 
5.图片剪裁防止图片变形
.img{
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
}
 
6. 消除input框选中时外边框
outline: none;
 
7. 图片和文字在同一行居中显示
(1)vertical-align:middle 给img添加这个属性。
(2)图片设置为背景图片
在css中使用“background”来设置该图片,再设置padding
(3)分别把图片和文字放入不同的div,div设置display: inline-block;
 
8 垂直居中
(1)父级元素设置display:table 、height:200px, 子级元素设置display:table-cell和vertical-align: middle 、text-align:center, 父级需要设置高度, table-cell 容易被float,position:absolute影响,对margin值无效果,响应padding属性。
(2)元素设置display:flex; align-items:center;justify-content:center; 适用于IE10+、chrome、Safari、Firefox,justify-content是定义水平方向的元素位置,align-items是定义垂直方向的元素位置。
(3)已知宽高,父级设置相对定位,子级设置绝对定位+margin:auto
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto
 
9. 利用伪元素清除浮动方法
 ::after{
       content:"";
       clear:both;   //如果想clear生效,必须是块级元素;
       display:block;
}
10. 隐藏元素none
display:none;会清除原本占用的布局空间.
visibility:hidden; 隐藏元素
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/5318.html