CSS定位机制-文档流定位

最新推荐文章于 2024-11-06 17:07:32 发布

kenny.feng

最新推荐文章于 2024-11-06 17:07:32 发布

阅读量373

点赞数 1

本文链接：https://blog.youkuaiyun.com/fenganhai/article/details/105523657

版权

本文深入解析CSS中的三种布局模型：文档流、浮动定位与层定位。详细阐述了块级元素、内联元素及内联块状元素的特点与应用，包括它们的默认行为、属性设置以及如何解决元素间的间隙问题。

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

CSS定位机制（布局模型）：

（1）文档流：默认方式，从左到右，从上到下

（2）浮动定位：脱离文档流，浮动起来但不层叠

（3）层定位：相互层叠

如图：

文档流定位

概念：元素的位置“可层叠”。也称为“层布局模型”

本质：相对于谁定位，且先浮动起来，再定位

分类：

（1）块级元素：block

（2）内联元素：inline。行内元素

（3）内联块状元素：inline-block。同时具备内联元素、块状元素的特点

属性：display

一、块级元素

例如：<div> 、<p>、<h1>、<ul>、 <ol>、 <li>、 <table>、<form>等

特点：

1.每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行,即使设置宽度不够也还是独占一行）

2.元素的高度、宽度、行高以及顶和底边距都可设置。

3.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

二、内联元素

例如：<span>、<a>、<label>、 <strong>和<em>等。

特点：

1.和其他元素都在一行上；

2.height（高度）、width（宽度）及margin-top和margin-bottom不可设置，margin-left、margin-right和padding不受影响

3.width（宽度）取决于它包含的文字或图片的宽度，不可改变。

4.同行元素之间存在间隙问题：

思路：由于inline元素不能设置margin-left和margin-right，所以即使设置这两个属性为0px也不能去掉间隙（其实就是能设置，也去不了，如：inline-block元素也存在此问题，它可以设置margin-left和margin-right都为0，但无济于事，毕竟这是一种浏览器默认的“通病”）

解决：将需要在同一行显示inline元素全部放在一个块级标签中

（1）如果是图片，则直接对此块级标签设置font-size: 0;

<style type="text/css">
    div {
        font-size: 0;      /* 取消其里面的“行内元素”之间默认的间隙 */
    }
</style>
<body>
<div>
    <img src="images/kenny_feng.jpg">
    <img src="images/kenny_feng.jpg">
</div>
</body>

效果：

（2）如果是文字，则还要设置文字的font-size大小：

<style type="text/css">
    div {
        font-size: 0;
    }

    a {
        font-size: 15px;    /* 缺少则默认使用父标签的font-size */
        padding: 10px;      /* inline元素可以设置padding属性 */
        background-color: pink;
    }
</style>
<body>
<div>
    <a href="https://blog.youkuaiyun.com/fenganhai">链接1</a>
    <a href="https://blog.youkuaiyun.com/fenganhai">链接2</a>
</div>
</body>

效果：

如果不设置a标签的font-size，则会将父元素中的font-size:0;作为子元素的字体大小，即该文字会消失：

三、内联块状元素

例如：<img>、<input>标签就是这种内联块状标签。

特点：

1.和其他元素都在一行上；

2.height（高度）、width（宽度）、margin-top、margin-bottom、margin-left、margin-right和padding均可设置

3.同行元素之间存在间隙问题

相互转化

实战：设置导航栏的超链接

一、超链接分行显示

思路：由于a标签是inline标签，所以要将每个a标签都要放在块级标签中，可让每个a标签处于不同行（也可以避免同在一行带来的间隙问题）：

<!-- 第一种方法 -->
<ul>
<li><a>链接1</a></li>
<li><a>链接2</a></li>
</ul>

<!-- 第二种方法 -->
<p><a>链接1</a></p>
<p><a>链接2</a></p>

二、超链接同行显示（请自行完成）

效果：

微信搜索：静夜一思