css
foolman_pc
成长中的蜗牛,不怕自己弱小,只怕自己放弃。
展开
-
html+css 实现文本固定长度,超出显示省略号
——html代码divid="d1">div>——css代码#d1{width:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;/*兼容性*/ -webkit-text-overflow:ellipsis;}注:关键是给容器指定宽度,并且利用wh原创 2016-05-23 21:40:31 · 7215 阅读 · 1 评论 -
css display属性详解
CSS display属性用于指定在页面上使用哪种盒模型来渲染指定的元素。通俗来讲就是某个元素在页面中的显示方式none:元素完全从页面中移除。它的所有后代元素同样被移除。文档渲染的过程中就好像在文档树中这个元素不存在一样。inline:显示为内联元素。inline-block:显示为块级内联元素。它可以设置元素的宽度和高度,其它的行为和内联元素相同。block:显示为块级元素。lis转载 2016-06-17 16:29:50 · 933 阅读 · 0 评论 -
去除inline-block元素间距
现象 : 当使用inline-block的时候,元素间会出现4px的间距(在chrome里面 是8px),如下图原因 : 元素间留白间距出现的原因就是标签段之间的空格解决方法一:既然间距是因为标签间的空格造成的,那么消除空格就可以消除间距,但是这一类方法都不符合常规的代码书写习惯,所以不推荐1、 春天夏天秋天冬天2、 春天 夏天原创 2016-06-20 21:53:37 · 415 阅读 · 0 评论 -
修改<hr/>的颜色
hr{ border-color: red;}或者hr{ background: red; height: 1px; border: none;}原创 2017-05-02 22:08:01 · 532 阅读 · 0 评论 -
修改用户选中文本的样式
::selection{ color: XXX; background: XXX; cursor: XXX; outline: XXX;}注: 只能向::selection添加以上css属性原创 2017-05-02 22:10:41 · 312 阅读 · 0 评论 -
文字间距、首行缩进
p { letter-spacing: 10px; /* 字间距 */ text-index: 30px; /* 首行缩进 */}原创 2017-05-25 22:33:29 · 484 阅读 · 0 评论 -
垂直居中的几种方法
1、display: flex;span{ display: flex; align-items:center;} 2、display: table-cell;display: table-cell;vertical-align: middle; 3、 line-height这种方法只适用于已知高度的情况div{ height: 30px; line原创 2017-05-09 20:40:26 · 259 阅读 · 0 评论 -
css两端分散对齐
准备一段html<ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li></ul>css样式ul{ text-align: justify;}li{ display: inline-block; list-style: none;}ul:after { content: ""原创 2017-04-06 11:58:24 · 1805 阅读 · 0 评论