[散修弟子]JS-1526|2018年07月03日的日报-技能树.IT修真院

发表于： 2018-07-03 22:01:39

1 622

今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

完成Text6.

明天计划的事情：（一定要写非常细致的内容）
遇到的问题：（遇到什么困难，怎么解决的

屏幕宽度减小后，如何实现省略号效果:

1.overflow:hidden;

2.text-overflow:ellipsis;
3.-o-text-overflow:ellipsis;
4.white-space:nowrap;
5.width:100%;

代码如下：
.li { overflow:hidden;text-overflow:ellipsis; -o-text-overflow:ellipsis;white-space:nowrap;width:100%;}

white-space：nowrap;表示文本不会换行，在同一行继续，知道遇到<br>标签为止；
overflow：hidden;不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
text-overflow：ellipsis;当文本对象溢出是显示...，当然也可是设置属性为clip不显示点点点；
-o-text-overflow: ellipsis针对Opera；而宽度的设定主要是针对IE6；

收获：（通过今天的学习，学到了什么知识）

去除inline-block间距有哪几种方法？

1. 移除空格

元素间留白间距的出现原因即标签段间的空格，去掉空格间距自然没有了。
以下是几种写法：

    <div>
        <a href="">
        链接1</a><a href="">
        链接2</a><a href="">
        链接3</a><a href="">
        链接4</a>
    </div>

    <div>
        <a href="">链接1</a
        ><a href="">链接2</a
        ><a href="">链接3</a
        ><a href="">链接4</a>
    </div>

    <div>        <a href="">链接1</a><!--
        --><a href="">链接2</a><!--
        --><a href="">链接3</a><!--
        --><a href="">链接4</a>
    </div>

三种写法都能达到去除缝隙的效果：

2. 使用margin负值margin负值的大小与上下文字体和文字大小有关，由于外部环境的不确定性及最后一个元素多出的父margin值等问题，此方法不适合大规模使用:

<style>
        a {            background: pink;            display: inline-block; 
            padding: .5em 1em;            margin: -3px;
        }</style><body>
    <div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
    </div></body>

3. 删掉闭合标签

HTML5中可以很任性：虽然这样很怪但确实有效。

    <div>
        <a href="">链接1        <a href="">链接2        <a href="">链接3        <a href="">链接4      
    </div>

4. 使用font-size:0

<style>
        div{            font-size: 0;
        }        a{            font-size: 16px;            background: pink;
        }</style><div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a></div>

5. 使用letter-spacing

<style>
        div{            letter-spacing: -6px;
        }        a{            letter-spacing: 0;            background: pink;
        }</style><div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a></div>

6. 使用word-spacing

<style>
        div{            word-spacing: -6px;
        }        a{            word-spacing: 0;            background: pink;
        }</style><div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a></div>

作者：_Dot大师兄
链接：https://www.jianshu.com/p/99a63509bb4d
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

【CSS】哪些样式属性可以继承

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi

所有元素可继承：visibility和cursor

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

块状元素可继承：text-indent和text-align

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

表格元素可继承：border-collapse