一些常用CSS样式整理

1.文字超出显示省略号

// 单行超出显示省略号
.over{width: 9rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}// 多行超出
// 两行超出
.overhide {display: -webkit-box !important;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}
// 三行超出
.overhideline1 {display: -webkit-box !important;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
}

2.水平垂直居中

// 文字水平垂直居中，让line-height与height相等即可垂直居中，在使用text-align: center;即可水平居中
.center{text-align: center;height: 20px;line-height: 20px;
}// 水平居中
// 1.text-align: center;
// 2. margin: 0 auto;//div水平垂直居中
// 1.不确定宽度、高度，使用position定位(父元素设置relative)与transform即可
div{      background-color: palevioletred;padding: 20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}// 2.确定了当前div的宽高，margin值为当前div宽度、高度一半的负值
div {background-color: palevioletred;width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;
}// 3.绝对定位下top left right bottom 都设置0， margin: auto
div {background-color: palevioletred;width: 200px;height: 200px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;
}// 4.flex布局，需要注意兼容问题
<!--html-->
<div class="box"><div class="child">child</div>
</div>/**css**/
.box {height: 300px;display: flex;align-items: center;justify-content: center;background-color: skyblue;
}
.child{width: 100px;height: 100px;background-color: plum;
}// 5.　table-cell实现水平垂直居中: table-cell middle center组合使用
<!-- html -->
<div class="table"><p>哈哈哈</p>
</div>/** css **/
.table{display: table-cell;text-align: center;vertical-align: middle;width: 200px;height: 200px;border: 1px solid skyblue;
}// 6.绝对定位：calc() 函数动态计算实现水平垂直居中，(外部宽度-内部宽度)/2
<!-- html -->
<div class="calc"><div class="child1">yoohoo~</div>
</div>/** css **/
.calc {position: relative;border: 1px solid skyblue;width: 400px;height: 160px;
}.child1 {position: absolute;width: 200px;height: 50px;text-align: center;background-color: skyblue;left: calc((400px - 200px)/2);top: calc((160px - 50px)/2);
}

3.清除浮动

.clearfix:before,.clearfix:after {  /*清除浮动*/content:"";display:table;
}
.clearfix:after{clear:both;
}
.clearfix{*zoom:1;/*IE/7/6*/
}

4.文本两端对齐

.wrap {text-align: justify;text-justify: distribute-all-lines;  //ie6-8text-align-last: justify;  //一个块或行的最后一行对齐方式-moz-text-align-last: justify;-webkit-text-align-last: justify;
}

5.cursor属性

.wrap {cursor：pointer; //小手指；cursor：help; //箭头加问号；cursor：wait; //转圈圈；cursor：move; //移动光标；cursor：crosshair; //十字光标
}

6.实现三角形

.wrap {border-color: transparent transparent green transparent;border-style: solid;border-width: 0px 100px 100px 100px;height: 0px;width: 0px;
}

7.移除被点链接的边框

a {outline: none;}
a {outline: 0;}
8.修改input框光标颜色input {caret-color: red;
}

9.修改input 输入框中 placeholder 默认字体样式

//webkit内核的浏览器
input::-webkit-input-placeholder {color: #c2c6ce;
}
//Firefox版本4-18
input:-moz-placeholder {color: #c2c6ce;
}
//Firefox版本19+
input::-moz-placeholder {color: #c2c6ce;
}
//IE浏览器
input:-ms-input-placeholder {color: #c2c6ce;
}

10.字体与边框颜色相同

.color {width: 200px;height: 200px;color: skyblue;font-size: 30px;/* border: 10px solid currentColor; */border: 10px solid;
}

一些常用CSS样式整理相关推荐

11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
web前端入门到实战：11种常用css样式之滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/是否对内容的左/右边缘进行裁剪/overflow-y: hidden;/是否对内容的上/下边缘进行裁剪/overflow:scroll;/左右滚动/ ...
dwcss样式中英对照_DW中常用css样式四种类型详细解析说明
css 样式加载 css 样式类型有以下四种一.外部样式格式: 路径 " /> 举例: 用处:这种形式是把 css 单独写到一个 css 文件内,然后在源代码中以 link 方 ...
前端常用CSS样式，前端笔记
java开发之----前端知识总结 1.盒子模型 2.表格的属性 3.二维码的生成 4.常用标签及属性 5.HTML5新属性 6.表单 7.css 8.javascript Servlet的原理与生命 ...
常用css样式-input
常用关于input的css样式 1.修改input输入框的默认样式 input{background:none;outline:none;border:0px; } 2.修改placeholder的默 ...
图文样式css样式,初学解惑：常用CSS样式图文设置教程
注:在论坛中记得有人问过,做了网页之后字体特别大?如何控制网页中的字体呢?答案是用CSS来控制,今天给大家编写这个教程主要是面对初学者的! 一个有链接的文本,鼠标ON.OVER不同状态下的响应是不同的 ...
常用CSS 样式清单整理
1.文字超出部分显示省略号单行文本的溢出显示省略号(一定要有宽度) p{width:200rpx;overflow: hidden;text-overflow:ellipsis;white-spac ...
1062- 49 个常用 CSS 样式清单整理
1.文字超出部分显示省略号单行文本的溢出显示省略号(一定要有宽度) p{width:200rpx;overflow: hidden;text-overflow:ellipsis;white-spac ...
工作中常用且容易遗忘的css样式整理，建议收藏
1. 文字超出部分显示省略号单行文本的溢出显示省略号(一定要有宽度) p{width:200rpx;overflow: hidden;text-overflow:ellipsis;white-spa ...
web前端---49个工作中常用的CSS样式整理汇总
1.文字超出部分显示文字单行文字的文字显示忽略号(一定的文字) p{width:200rpx;overflow: hidden;text-overflow:ellipsis;white-space: ...

一些常用CSS样式整理

一些常用CSS样式整理相关推荐

最新文章

热门文章