CSS难点及巧用 | 前端笔记（五）

前端学习记录之路

已于 2023-04-30 11:47:36 修改

阅读量48

点赞数 1

文章标签：前端 html css

于 2023-04-02 11:12:23 首次发布

本文链接：https://blog.csdn.net/weixin_55901142/article/details/129908364

版权

18.元素显示与隐藏

举例：网站的广告，点击关闭就没有，一刷新就重新出现。

类型	含义
display	显示隐藏元素，不保留位置 display:none;(隐藏） display:block;(显示)
visibility	显示隐藏元素，保留位置 visibility:visible;(可视) visibility:hidden;(隐藏)
overflow	溢出显示隐藏，只对溢出部分处理

备注：

1.overflow(溢出时会怎样)：

样式	含义
visible	不切内容不加滚动条
hidden	不显示超出内容
scroll	一直有滚动条
auto	超出有滚动条，不超出没有

2.一般不让溢出内容显示，但如果有定位的盒子，慎用overflow：hidden（会隐藏多余部分）。

19.精灵图sprites

1.用处：

主要用于背景图片，把多个小背景图片整合到一张大图片，减少服务器接收和发送请求的次数，提高页面加载速度。

2.做法：

先量要的小图的大小，确定盒子的大小，然后left、top移动。

background: url(images/sprites.png) no-repeat -155px -106px;（一般为负值，往左/上为负值，往右/下为正值）

备注：移动背景图片位置，用background-position，移动距离为目标图片的x和y坐标。

20.字体图标iconfont

网站：icomoon/iconfont

本质：字体，文本

21.鼠标样式 cursor

cursor：default（默认三角）/pointer（小手）/move（移动即十字架）/text（文本I）/not-allowed（禁止）;

22.轮廓线outline和防拖拽文本域 resize

        input, textarea {
            /* 取消表单轮廓，去掉默认表单蓝边框 */
            outline: none;
        }
        textarea {
            /* 防止拖拽文本域 */
            resize: none;
        }
        
    <!-- 1. 取消表单轮廓 -->
    <input type="text">
    <!-- 2. 防止拖拽文本域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>

23.vertical-align

作用：设置图片或者表单（行内块元素）和文字垂直对齐，去掉图片底侧空白。

属性	含义
baseline	默认，放基线
top	与最高元素顶端对齐
middle	放父元素中间
bottom	与最低元素对齐

备注：只对行内（块）元素有效。

24.溢出的文字省略号显示

1.单行：

            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;

2.多行：

            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;

25.三角做法和巧用

1.三角做法

盒子宽高为0，给4条边框transparent，再给其中一条加颜色。大盒子装小盒子，绝对定位。

    <style>
       .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }

        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
     </style>

    <div class="jd">
        <span></span>
    </div>

2.三角巧用

想做直角三角形，且两条直角边不一样长。

先把左边和下边的边框宽度设为0，再把上边框宽度加大。

    <style>
       .box1 {
            width: 0;
            height: 0;
            /* 把上边框宽度调大 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid skyblue; */
            /* 左边和下边的边框宽度设置为0 */
            /* border-bottom: 0 solid blue;
            border-left: 0 solid green; */
           /* 1.只保留右边的边框有颜色 */
           border-color: transparent red transparent transparent;
            /* 2. 样式都是solid */
            border-style: solid;
            /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
            border-width: 100px 50px 0 0 ;

        }
     </style>

26.其他巧用

1.margin负值的巧妙运用

    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        /* ul li:hover {
           1. 如果盒子没有定位，则鼠标经过添加相对定位即可
        position: relative;
        border: 1px solid blue;

       } */
        ul li:hover {
            /* 2.如果li都有定位，则利用 z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>