css- 4

欧冶渃

已于 2024-04-01 23:32:21 修改

阅读量1k

点赞数 14

文章标签： css 前端

于 2024-04-01 22:11:50 首次发布

本文链接：https://blog.csdn.net/weixin_59868842/article/details/137246457

版权

1.浮动

1. 浮动最初用于实现文字环绕效果
2. 现在，浮动是主流的布局方式之一

1.1元素浮动之后的特点

元素浮动之后，称为浮动元素，具有如下特点：

1. 浮动元素脱离文档流
2. 多个浮动的元素会水平排列，一行放不下自动换行
3. 不论元素原来的显示模式是什么，设置成浮动之后，就是浮动元素，具有自己的显示特点：
① 水平排列，自动换行，不存在外边距的塌陷和合并，设置左右外边距auto不会居中（与块级区别）
② 设置宽高、内外边距都没有问题（与行内区别）
③ 不会被父元素作为文本去处理（与行内块和行内区别）

文档流：文档流里的元素会按照顺序从上到小，从左到右排列。

1.2浮动元素产生的影响

1.2.1 对后面的元素的影响

后面兄弟元素会占据浮动元素原来的位置，可能造成位置的重叠，浮动元素显示在上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .me{
            margin-top: 20px;
            padding: 20px;
            border: 2px solid #eda;
            width: 600px;
            height: 400px;
            background: rgb(221, 240, 255);
        }

        .box{
            width: 150px;
            height: 120px;
        }
        .box1{
            
            background: #900;
        }
        .box2{
            background: #080;
            float: left;
        }
        .box3{
            width: 180px;
            background: #ff0;
            
        }
    </style>
</head>
<body>
    <div class="me">
        <div class="box box1">三才洪。</div>
        <div class="box box2">三才洪。</div>
        <div class="box box3">三才洪。</div>
    </div>
</body>
</html>

解决：

方案一：给紧邻这浮动元素的后面的兄弟元素设置 clear:both
方案二：兄弟元素要浮动都浮动，浮动元素不要跟不浮动的元素做兄弟

解决方案一：

 .box3{
            clear: both;
            width: 180px;
            background: #ff0;
            
        }

1.2.3对父元素的影响

子元素浮动之后，不能撑起父元素高度，造成高度塌陷

1.2.3.1解决对父元素的影响：

方案一：父元素设置固定高度
方案二：父元素设置浮动
方案三：父元素设置 overflow, 值只要不是 visible 都可以
方案四：给父元素添加个子元素，放在所有浮动元素的后面，该元素要求是块级元素，设置 clear:both
方案五：原理同方案四相同，使用伪元素给父元素添加子元素，设置 clear:both (推挤)

父元素::after {
    content: "";
    display: block;
    clear:both;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .me{
            margin-top: 20px;
            padding: 20px;
            border: 2px solid #eda;
            /* width: 600px;
            height: 400px; */
            background: rgb(221, 240, 255);
        }
        .me::after{
            content: "";
            display: block;
            clear: both;
        }
        /* 这种写法是为了兼容老版本的浏览器 */
        .me:after{
            content: "";
            display: block;
            clear: both;
        }


        .box{
            width: 150px;
            height: 120px;
        }
        .box1{
            
            background: #900;
            float: left;
        }
        .box2{
            background: #080;
            float: left;
        }
        .box3{
            clear: both;
            width: 180px;
            background: #ff0;
            float: left;
        }
    </style>
</head>
<body>
    <div class="me">
        <div class="box box1">三才洪。</div>
        <div class="box box2">三才洪。</div>
        <div class="box box3">三才洪。</div>
    </div>
</body>
</html>

1.3 浮动相关的 CSS 属性

CSS 属性	功能	属性值
float	设置浮动	left、right、none
clear	清除浮动的影响	left、right、both

2.行内元素或行内块元素在布局中的特点

父元素设置的文本属性可以作用于行内元素和行内块元素

2.1行内块居中

让行内块元素在父元素中水平居中

给父元素设置 text-align:center

让行内块元素在父元素中纵向居中

1. 给父元素设置行高
2. 给行内块元素设置 vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .me{
            width: 600px;
            height: 400px;
            border: 2px solid #a36060;
            text-align: center;
            line-height: 400px;
        }
        .box{
            display: inline-block;
            vertical-align: middle;
            /* 行高要与子元素一致才可以将文字居中 */
            line-height: 80px;
            width: 100px;
            height: 80px;
            background: #900;
        }
    </style>
</head>
<body>
    <div class="me">
        <div class="box box01">行内块</div>
        <!-- <div class="box box02"></div>
        <div class="box box03"></div> -->
    </div>
</body>
</html>

2.2 行内元素或行内块元素之间的空白问题

2.2.1元素之间的空白（左右）

产生原因：

代码中，元素之间的换行

2.2.2解决方案：

方案一：代码中，元素之间不写换行（不推荐）
方案二：父元素设置字体大小为0；如果行内块元素中还有文字单独设置字体大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .me{
            width: 600px;
            height: 400px;
            border: 2px solid #a36060;
            font-size: 0;
        }
        .box{
            display: inline-block;
            vertical-align: middle;
            font-size: 16px;
            width: 100px;
            height: 80px;
            background: #900;
        }
        .boxx{
            display: inline;
            width: 100px;
            height: 80px;
            background: blue;
            font-size: 16px;
        }
        .boxxx{
            display: inline;
            width: 100px;
            height: 80px;
            background: palegreen;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="me">
        <div class="box box01">行内块</div>
        <div class="boxx box02">行内1</div>
        <div class="boxxx box03">行内2</div>
    </div>
</body>
</html>

2.2.3底部的空白（图片的幽灵空白）

产生原因：

行内块元素与文字基线对齐，底部的空白就是基线与底线的距离

解放方案：

方案一：父元素设置字体大小 0
方案二：给行内块元素设置 vertical-align:bottom (推荐)
方案三：经典解决方案，针对图片，将图片设置成块级元素

2.2.4文字内容个数不同的行内块元素水平排列无法对齐

产生原因：

1. 如果行内块元素中没有文字，该元素的底部与基线对齐
2. 如果行内块元素中有一行文字，文字与外面的基线对齐，进而影响行内块元素的位置
3. 如果行内块元素中有多行文字，最后一行文字与外面的基线对齐，进而影响行内块元素的位置

解决方案

给行内块元素设置 vertical-align, 值不是 baseline 都可以解决问题

当出现为了换行导致元素掉下来时可以设置

 .last{
            margin-right: 0;
        }

欧冶渃

关注

14
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
css- 4

1. 浮动最初用于实现文字环绕效果2. 现在，浮动是主流的布局方式之一。
复制链接

扫一扫

css- 4

1.浮动

1.1元素浮动之后的特点

1.2浮动元素产生的影响

1.2.1 对后面的元素的影响

1.2.3对父元素的影响

1.2.3.1解决对父元素的影响：

1.3 浮动相关的 CSS 属性

2.行内元素或行内块元素在布局中的特点

2.1行内块居中

2.2 行内元素或行内块元素之间的空白问题

2.2.1元素之间的空白（左右）

2.2.2解决方案：

2.2.3底部的空白（图片的幽灵空白）

2.2.4文字内容个数不同的行内块元素水平排列无法对齐

“相关推荐”对你有帮助么？