详细分析css float 属性以及position:absolute 的区别

详细分析css float 属性以及position:absolute 的区别

CSS Float 属性

CSS Float 属性常用于制作文字环绕效果。设置浮动属性后,元素会跳出常规的文档流,根据浮动元素的宽度,向左或向右移动至其的包含块的边缘,其他内容会填补其旁边的可用空间。使用 Float 属性的元素被称为浮动元素。

Float 常见取值及应用

float 取值:
* left:元素向左浮动
* right:元素向右浮动
* none:元素不浮动

常见应用场景:
1. 图片环绕文字
html
<div style="width: 500px;">
<img src="xxx.jpg" style="float: left; margin: 10px;">
<p style="text-align: justify;">此处为段落文字。</p>
</div>

2. 清除浮动

在浮动布局中,为了防止下一元素影响浮动元素的位置而采用清除浮动。最常用的清除浮动的方式为添加 clear 属性。

```css
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
```

```html
<div class="clearfix">
    <div style="float: left;">左侧</div>
    <div style="float: right;">右侧</div>
</div>
<div>下方非浮动元素</div>
```

CSS position 属性

CSS position 属性用于指定元素的定位方式。使用 position 属性,可以将元素从文档流中删除,并相对于其父元素或文档的窗口进行定位。

position 属性常见取值及应用

position 取值:
* static:默认值,元素被定义为常规元素,处于文档流中
* relative:元素相对于自身的位置进行定位
* absolute:元素相对于其第一个具有定位方式的祖先元素进行定位
* fixed:元素相对于浏览器窗口进行定位
* sticky:元素在滚动过程中固定在位置

常见应用场景:
1. 固定顶部/底部导航栏

```css
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #f5f5f5;
}
```
  1. 底部信息栏

    css
    .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #f5f5f5;
    }

Float 和 Position 的区别

Float 和 Position 都可以定位元素,但定位方式不同:

Float 定位:
* 将元素从文档流中删除,影响其后面的元素布局
* 过度使用 float 可能会导致代码难以维护

Position 定位:
* 定位方式有多种,可以根据需求选择
* 对其他元素的影响较小,常用于局部定位

综上,Float 和 Position 有各自的特点和适用场景,合理使用可以提高网页布局效果。

示例说明

  1. Float 示例
    html
    <div style="width: 500px;">
    <div style="float: left; width: 200px; height: 200px; background-color: #f5f5f5;"></div>
    <p style="text-align: justify;">此处为段落文字。</p>
    </div>

    上面的代码中,左侧的 div 元素向左浮动,并占据了一部分空间。段落文字则在剩余空间中填充,实现了图片环绕文字的效果。

  2. Position 示例
    html
    <div style="position: relative; width: 500px; height: 300px;">
    <div style="position: absolute; top: 50px; left: 50px; width: 200px; height: 100px; background-color: #f5f5f5;"></div>
    <p style="text-align: justify;">此处为段落文字。</p>
    </div>

    上面的代码中,左侧的 div 元素被设置为相对于其父元素进行定位,左上角定位在 (50, 50) 的位置。段落文字则在其下方填充。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详细分析css float 属性以及position:absolute 的区别 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • CSS 在IE6, IE7 和IE8中的差别

    CSS在不同的浏览器中会有不同的表现,其中IE6、IE7和IE8是老旧的IE版本,它们对CSS的支持存在一些差异。在本篇攻略中,我们会详细讲解这些差异,以及如何解决这些问题。 IE6、IE7和IE8的CSS差异 1. 盒模型的差异 在标准盒模型中,元素的尺寸包含内容、内边距和边框,而在IE6、IE7和IE8中,元素的尺寸只包含内容和边框,而不包括内边距。这意…

    css 2023年6月9日
    00
  • create-react-app开发常用配置教程

    下面是针对“create-react-app开发常用配置教程”的完整攻略: 1、create-react-app是什么? create-react-app 是 React 官方推出的一个用于创建 React 项目的 CLI 工具,它可以帮助我们快速构建一个完整的 React 项目,无须进行配置,只需一条命令即可生成整个应用架构。create-react-ap…

    css 2023年6月9日
    00
  • css实现div自动添加滚动条(图片或文字等超出时显示)

    CSS实现在div中显示超长内容后自动添加滚动条可以通过以下方式实现: 方法1:使用overflow属性 设置overflow属性为auto或scroll,当内容超出div的高度或宽度时,会自动添加滚动条。比如: div { width: 200px; height: 100px; overflow: auto; } 以上代码用于对200×100大小的div…

    css 2023年6月10日
    00
  • css 评分效果的星星示例

    以下是关于“CSS评分效果的星星示例”的完整攻略,包含两个示例说明。 步骤一:创建HTML结构 首先,需要创建一个HTML结构。可以按照以下步骤操作: 在文本编辑器中创建一个新文件。 在文件中添加以下代码: <div class="rating"> <input type="radio" name=&…

    css 2023年5月18日
    00
  • SpringBoot无法访问/static下静态资源的解决

    当使用SpringBoot开发web应用时,我们可以把静态资源文件放在项目中的“/static”或“/public”或“/resources”或“/META-INF/resources”目录下,在应用运行时就可以通过相应的URL来访问静态资源。然而,有时候我们会遇到这样的问题:通过URL访问静态资源时,却发现无法获取到资源,出现404错误,这通常是因为Spr…

    css 2023年6月10日
    00
  • 深入浅析CSS 选择器分组

    深入浅析CSS选择器分组的完整攻略如下: 什么是CSS 选择器分组 在CSS中,选择器是一种用于选择指定 HTML 元素的标识符。通过选择器,我们可以为 HTML 元素应用样式。而CSS选择器分组则是将多个选择器组合在一起,用逗号分隔。这样就可以将多个选择器应用到同一个样式上,从而避免重复的代码,简洁代码量,并提高代码的可读性和可维护性。例如,以下代码将h1…

    css 2023年6月10日
    00
  • ie9崩溃现象当js设置tr元素样式为display:none

    问题描述: 在使用ie9浏览器浏览网页时,当使用JS代码修改某个tr元素的display属性时,页面会出现崩溃现象。 原因分析: IE9浏览器中存在一个叫做“样式未提前计算的bug”,当某个元素的display属性被修改为none时,该元素的后代元素的样式计算不会被首先执行,导致后代元素的样式计算出现异常,最终导致浏览器崩溃。 攻略: 针对这个问题,我们可以…

    css 2023年6月10日
    00
  • CSS3等相关属性制作分页导航实现代码

    下面我将为您详细讲解“CSS3等相关属性制作分页导航实现代码”的完整攻略。 1. 布局设计 首先,我们需要为分页导航设计一个基本的布局。一般情况下,我们可以采用<ul> <li>标签组合的方式来实现分页导航,如下所示: <ul class="pagination"> <li><a hr…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部