css布局（定位、浮动等）方法_css浮动文本高度怎么设置-优快云博客

本文链接：https://blog.youkuaiyun.com/sendear/article/details/115298192

本文讲解了居中效果的实现（line-height和text-align），版心布局的调整，以及绝对、相对、固定定位的区别，浮动元素的特性及清除浮动的方法，包括基础清除浮动、额外标签隔墙和伪元素技巧。深入探讨了标签权重和间距概念在前端开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

居中

1. 上下居中 line-height

.box{
	border: 1px solid red;
	height: 60px;
	line-height: 60px;
}

在这里插入图片描述

2. 左右居中 text-align

.box{
    border: 1px solid red;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

在这里插入图片描述

等级

标准文档流的标签分为两种等级

1. 块级元素

● 霸占一行，不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度，那么宽度将默认变为父亲的100%。

2. 行内元素

● 与其他行内元素并排
● 不能设置宽、高。默认的宽度，就是文字的宽度。

布局

1. 版心

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            height: 30px;
            line-height: 30px;
            background-color: #f1f1f1;
        }
         /* 版心 */
        .editionCenter { 
            width: 1210px;margin:0 auto;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="editionCenter">
            <div class="fl">
                hello
            </div>
            <div class="fr">
                hi
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

调小版心，改变布局

 /* 版心 */
.editionCenter { 
    width: 750px;margin:0 auto;
}

在这里插入图片描述

小技巧
ul>li*5.h10 快捷生成

<ul>
    <li class="h10"></li>
    <li class="h10"></li>
    <li class="h10"></li>
    <li class="h10"></li>
    <li class="h10"></li>
</ul>

div+p*3 快捷生成

<div></div>
<p></p>
<p></p>
<p></p>

2. 绝对定位

（1）绝对定位脱离文档流

在这里插入图片描述

（2）特性：

所有的标准文档流的性质，绝对定位之后都不遵守了；
绝对定位之后，标签就不区分所谓的行内元素、块级元素了; 行内元素也不需要display:block，就可以设置宽、高了；

（3）绝对定位的盒子(margin:0 auto失效), 该如何居中呢？

left: 50%;
margin-left: （负）盒子宽度的一半；

 .box1{
    background-color: rgb(241, 31, 31);
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

3.相对定位

（1）相对定位不脱离文档流，占用原来位置

在这里插入图片描述

在这里插入图片描述
（2）用途:

1）微调元素
2）做绝对定位的参考，子绝父相(用来给绝对定位的子元素占位)

4. 固定定位

（1）固定定位脱离文档流
在这里插入图片描述

在这里插入图片描述
（2）特性：

不随着浏览器的移动而滚动

5. 浮动

（1）浮动的元素脱离标准文档流

一个行内元素（如span标签）不需要转成块级元素，就能够设置宽度、高度了。浮动的元素脱离标准文档流，即所有标签已经不区分行内、块级了。

在这里插入图片描述

（2）浮动的元素互相贴靠
在这里插入图片描述

在这里插入图片描述

（3）浮动的元素有“字围”效果

在这里插入图片描述

清除浮动

0. 基础清除浮动法

给浮动的元素的祖先元素加高度

如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

在这里插入图片描述

clear:both;

这种方法有一个非常大的、致命的问题，margin失效了

在这里插入图片描述

1. 额外标签隔墙法

外墙法

.clr{
	clear: both;
}
.h16{
	height: 16px;
}

<div 浮动的></div>
<div class="clr h16"></div>
<div 浮动的></div>

内墙法

    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <div class="clr h16"></div>
        </ul>
    </div>

2. overflow:hidden

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。

在这里插入图片描述

3. 伪元素法

（1）网易的清除浮动写法参考：

访问网易
右击查看网页源代码->网易新闻样式表
在这里插入图片描述

在这里插入图片描述
旧版网易样式表：

.clear，.clearfix：after {
	display：block;
	overflow：hidden;
	clear：both;
	height：0;   
} 
.clearfix：after {
    visibility：hidden; 
	content：“。”
}

（2）淘宝的清除浮动方法参考：
在这里插入图片描述

4. 双伪元素法

.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{clear:both;}
.clearfix{
    *zoom:1;/*IE/7/6*/
}

权重

标签 1
类 10
id 100
行内 1000

其它

父子之间的间距用padding
兄弟之间的间距用margin

css布局（定位、浮动等）方法

目录

居中

1. 上下居中 line-height

2. 左右居中 text-align

等级

1. 块级元素

2. 行内元素

布局

1. 版心

2. 绝对定位

3.相对定位

4. 固定定位

5. 浮动

清除浮动

0. 基础清除浮动法

1. 额外标签隔墙法

2. overflow:hidden

3. 伪元素法

4. 双伪元素法

权重

其它