css的一些技巧收藏

1.设置了display:absolute和float后,会从内部把元素转成inline-block。

2. 当文字溢出容器,要用打点表示:

    针对单行文本:white-space:nowrap;                    //不换行

                            overflow:hidden;                          

                            text-overflow:ellipsis;                   //溢出部分用点展示


    针对多行文本:手写...或者用height和line-height按比例截取

3.图片不显示时,文字出现

    1) text-indent:200px;       //首行缩进盒子的width,让文字出去

           white-space:nowrap;

           overflow:hidden;

    2) padding-top:90px;         //padding可撑开盒子,但不能写文字进去

           height:0;

           overflow:hidden;

4.行级元素套行级,块级元素可以套任何元素。但p标签不可以套块级元素,a标签不可以套a标签。

5.:not()伪类的运用

    为body添加行高。文本元素容易继承body的样式,这样就不用为每个p标签,h标签添加line-height。

   css的一些技巧收藏_第1张图片

   

     逗号分隔列表。使列表每一项都由逗号分隔

    css的一些技巧收藏_第2张图片


6.垂直居中任何元素

 css的一些技巧收藏_第3张图片


7.使用负的nth-child可以选择1至n个元素

css的一些技巧收藏_第4张图片


8.创造格子等宽的表格

css的一些技巧收藏_第5张图片


9.




你可能感兴趣的:(前端,css)