小工具      在线工具  汉语词典  css  js  c++  java

HTML的原始排版float和position

前端开发,html,css,css3 额外说明

收录于:158天前

了解float和position属性,可方便我们对元素快速布局和定位,不管用什么框架有能快速设计框架。
html的各种标签分为两大类:block元素(块级元素)和inline元素(内联元素)。他们的区别在于:

  1. 块元素:
  • 块元素通常实现为一个独立的块,占据自己的行;
  • 多个块元素会各自另起一行,默认的块元素宽度会自动填充其父元素的宽度,即100%。
  • 其所有属性都可以被css样式改变
    2.inline元素:
  • 一般用于填充文本,其大小随文本动态变化;
  • 宽度、高度和某些边距无法通过 css 更改
  • 多个内联元素将从左到右、从上到下排序。

这两种元素稍有区别但都是按浏览器的文件流排列的。文档流指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。
有时不想按照默认的排布方式就需要float和posioton属性该改变默认的排版方式。

  1. float浮动定位
    float浮动定位就是实现文本环绕的效果,就像是插队将其他内容挤开,被挤开的元素再按文档流排版(从左到右,从上到下)
    在这里插入图片描述
  2. position 属性规定元素的定位类型。
    在这里插入图片描述
    absolute:绝对定位
    绝对定位不受任何父容器的影响,可以定位在html的任何地方:
<html>
<head>
<style type="text/css">
h6
{
    
/* position:absolute; left:100px; top:0px */
}
</style>
</head>

<body>
<div style="width:700px;height:600px;border:solid 1px red">
<div style="margin-top:100px; width:600px; height:300px;border:solid 1px red">
<button>button</button>
<h6>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 0px。</h6>
</div>
</div>
</body>

</html>

fixed相对浏览器窗口定位
使用该元素定位会固定在浏览器的窗口的某位置,就像广告那样:

<html>
<head>
<style type="text/css">
.one
{
    
background-color:red;
height:1000px;
}
.two
{
    
position:fixed;
right:0px;
bottom:0px;
left:0px;
background-color:blue;
height:100px
}
</style>
</head>
<body>

<div class="one">文本显示区<p style="padding-top:800px;background-color:green;">结尾</p></div>
<div class="two">底部栏</div>

</body>
</html>

请添加图片描述
fixed将底部栏固定在底部。

  • relative相对定位
    该元素是以默认的文档流为参照对象,相对原位置来改变。
. . .

相关推荐

额外说明

语义检索系统【四】:基于ERNIE-Gram的Pair-wise和基于RocketQA的CrossEncoder训练的单塔模型实现数据精排

搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术细节以及项目实战(含码源) 专栏详细介绍:搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、

额外说明

2020计算机专业保研夏令营面经:复旦计算机(含机考题目详细题解)

目录 整体安排 机考 第1题 题目 题解 测试用例 代码 第2题 题目 题解 测试用例 代码 第3题 题目 题解 测试用例 代码 英语口试 专业面试 整体安排 7.13号各个实验室通过腾讯会议介绍,晚上登陆系统填写志愿。7.14号上午机考,下午英语口试,

额外说明

rabbitmq实现秒杀中订单流量削峰

前言 在Redis秒杀功能设计与实现一篇中,我们使用redis实现了商品的秒杀抢购功能,在当前的设计中,只涉及到商品抢购,即用户锁定名额,并将成功抢购到的用户信息保存到redis中了 但是一个完整的抢购流程在业务流程中看到,包括锁定名额和下单,在超卖问题

额外说明

VC++屏幕捕获并保存成图片(附源码)

目录 1、屏幕捕获(截取桌面) 2、将内存中的位图保存成图片文件 3、完整功能的屏幕截图

额外说明

MySQL数据库: 添加列、修改列、删除列、修改列属性、修改表名(包括MySQL、SQLServer、Oracle)

我们针对数据库的增删改查语句比较熟悉了,但是今天建立数据库的时候想在固定位置通过语句添加一列,做以下总结: ALTER TABLE:添加,修改,删除表的列,约束等表的定义。 查看列:desc 表名; 修改表名:alter table t_book ren

额外说明

Linux#在Centos7中网络连接不上,配置出错

在VMware Workstations Pro虚拟机上安装的系统 网络总是出现莫名其妙的错误 每次重启开机都连不上网 需要重启网络服务才行 一开始连不上   好 改一下配置文件 vi /etc/sysconfig/network-scripts/ifc

额外说明

Leetcode 590: N-ary树的后序遍历

想法: 后序遍历指先拜访左右子树,然后再拜访根。 我们可以利用深度优先算法遍历这个N-ary树。 注意,N-ary树有不止一个子树,我们可以利用一个for loop遍历所有的子树。 我们可以利用一个list把后序遍历的结果储存起来。 代码: """ #

额外说明

django2中关于时间处理策略

一、django中数据模型关于时间字段的认识 1、DateField:可以记录年月日,映射到数据库是date类型 2、DateTimeField:可以记录年月日时分秒,映射到数据库是datetime类型 3、TimeField:可以记录时分秒,映射到数据

额外说明

Windows系统缺少UIAutomationCore.dll文件如何解决?

其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下载这个UIAutomationCo

额外说明

mfc110fra.dll文件丢失找不到如何解决?

其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或者损坏了,这时你只需下载这个mfc110fra.dll文件进行安装(前提是找到适合的版本)

ads via 小工具