服务热线
15617359779
网站制作少不了前端开发，现在一般采用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. 换行的方法
word-break : break-all; 实现强制断行.
字母和单词换行设置：word-break:break-all;word-wrap:break-word;
4. 不换行的方法
white-space:nowrap;文本不会换行，在同一行上继续，直到遇到
标签为止。
字母和单词不换行设置：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; 隐藏元素
河南亿宏世纪网络科技有限公司，专注于互联网+品牌整合营销，公司拥有专业的互联网管理、运营策划、UI设计、技术开发等团队，专业从事于工业互联网的开发建设。我司拥有成熟的网络技术开发团队，针对网站开发、技术服务、网站风格定位、网站功能优化、网站推广维护等都具备很强的专业技术水平，旨在为客户提供专业的互联网应用解决方案。公司始终秉持着诚信经营、质量为先的经营理念，我们不仅提供优质的网络技术和云端供应链服务，而且还在产品的选择、应用等方面提供专业的咨询与售后服务。
