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

1 623


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了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



返回列表 返回列表
评论

    分享到