CSS —— 一些布局技巧

最新推荐文章于 2024-10-02 12:08:27 发布

逃逃日塔灰

最新推荐文章于 2024-10-02 12:08:27 发布

阅读量227

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/Sokoooo/article/details/114517459

版权

前端专栏收录该内容

26 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS中的一些实用布局技巧，包括解决图片底部空白缝隙、单行及多行文本溢出显示省略号、负margin的运用、文字围绕浮动元素、行内块的居中对齐、创建三角形以及CSS初始化。这些技巧对于优化网页布局和提升用户体验至关重要。

摘要由CSDN通过智能技术生成

CSS —— 一些布局技巧

1. 解决图片底部默认空白缝隙

1.1 产生原因：行内块元素和文字的基线对齐；

1.2 解决方法：

① 给图片添加 vertical-align : middle | top | bottom 等；

② 将图片转换为块级元素；

2. 单行文本溢出显示省略号

2.1 满足条件：

① 强制一行内显示文本；

② 超出部分隐藏；

③ 文字用省略号替代超出的部分；

① white-space : nowrap; 
② overflow : hidden;
③ text-overflow : ellipsis;

2.2 使用：

            width: 200px;
            height: 20px;
            background-color: skyblue;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

3. 多行文本溢出显示省略号

3.1 满足条件：

① 弹性伸缩盒子模型显示；

② 限制在一个块元素显示的文本的行数；

③ 设置或检索伸缩盒对象的子元素的排列方式；

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

3.2 使用：

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

4. margin负值运用

4.1 解决盒子与盒子挨在一起是边框加倍的问题；

4.2 方法：

① 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子的边框；

② 鼠标经过某个盒子时，提高当前盒子的层级 ：

a. 没有定位：使用相对定位，保留位置；

b. 有定位：使用 z-index 提高盒子的层级；

       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;
        }

5. 文字围绕浮动元素

5.1 使用原理：运用浮动元素不会压住文字的特性；

5.2 方法：给图片添加浮动；

    .box img {
            float: left;
            height: 60px;
            width: 120px;
            margin-right: 5px;
        }

6. 行内块的巧妙运用

6.1 使同一个大盒子里的许多行内块元素同时居中对齐；

6.2 方法：给行内块元素的父盒子添加 text-align : center ；

        .box {
            text-align: center;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

7. 三角强化

7.1 实现直角三角形；

7.2 方法：

若要实现 右下为直角，则需要上和右有边框宽度（上边框的宽度要大于右边框），但只有右边边框有颜色其余全为透明；

        div {
            width: 0;
            height: 0;
            line-height: 0;
            border-color: transparent skyblue transparent transparent;
            border-width: 100px 50px 0 0 ;
            border-style: solid;
        }