服务热线 400-660-8066
珠海网站建设
网站制作少不了前端开发，现在一般采用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）分别把图片和文字放入不同的p，p设置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;
eft：0;top：0;
right：0;
bottom：0;
margin：auto
9.利用伪元素清除浮动方法
：：after{
content：;
clear：both;//如果想clear生效，必须是块级元素；
display：block;
}
10.隐藏元素none
display：none;会清除原本占用的布局空间.
visibility：hidden;隐藏元素
添加动力小姐姐微信
电话咨询
400-660-8066
