css知识点总结

一.说一下垂直水平居中的方式有哪些？

    方法1:

            设置绝对定位,四个属性为0,margin:auto;

    方法2:

            设置绝对定位

            left:50%;

            top:50%;

            margin-left:负数宽度的一半

            margin-top:负数高度的一半

    方法3:

            最常用的：

            设置绝对定位

            left: 50%;

            top: 50%;

            平移负的50%

            transform: translate(-50%,-50%);

    方法4:

            display: flex;

            align-items:center;

            justify-content: center;

二.清除浮动的方法？【浮动导致父元素高度塌陷问题解决方法】

    1、给父级直接设置高度

    2、隔墙法：在最后一个浮动标签后，新加一个标签，给其设置clear：both

    3、overflow:hidden;：通过触发BFC，实现清除浮动

    4、伪类清除法：推荐使用

        .clearfix:after{

            //内容为空

            content: "";

            //转成块元素

            display: block;

            //清除左右浮动

            clear: both;

        }

三.说一说哪些属性可以被继承？  

    color

    font-xxx

    line-xxx

    text-xxx

四.css3新特性

    特殊选择器：属性选择器、表单伪类选择器、结构伪类选择器、伪元素选择器

   特殊效果：渐变、圆角border-radius、文字阴影text-shadow/盒阴影box-shadow、滤镜filter

    特殊动效：过渡transition、变换transform（倾斜skew、平移translate、缩放scale、旋转rotate）、动画animation

五.说一说如何实现6px字体？

        font{

                font-size: 12px;

                transform: scale(.5);

            }

六.说一说移动端如何画一个0.5px的边框？

    1、通过缩放0.5倍

        border: 1px solid red;

        transform: scaleY(.5);

    2、通过50%背景渐变实现

        height: 2px;

        background-image: linear-gradient(0deg, red 50%, transparent 50%);

七.文本超出固定行数显示省略号   

    .text-es{

     /* -webkit-:浏览器内核,加上浏览器内核的意义就是兼容 */

     /* 你想最大显示几行 */

     -webkit-line-clamp: 5;

     /* 超出隐藏 */

     overflow: hidden;

     /* 显示省略号 */

     text-overflow: ellipsis;

     /* 将对象作为弹性盒子显示 */

     display: -webkit-box;

     /* 设置盒子的排列方式 */

     -webkit-box-orient: vertical;

    }

八.修改滚动条的样式

    .exam-left::-webkit-scrollbar {

        width: 4px;

    }

    .exam-left::-webkit-scrollbar-thumb {

        border-radius: 10px;

        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        background: rgba(0, 0, 0, 0.2);

    }

    .exam-left::-webkit-scrollbar-track {

        /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */

        border-radius: 0;

        background: #fff;

    }

建立这个平台的初衷：

• 打造一个专注于前端功能问题的问答平台，让大家高效搜索处理同样问题。

• 遇到有共鸣的问题，与众多同行朋友们一起讨论，一起沉淀成长。