【图解】HTML元素定位、对齐、排列

最新推荐文章于 2021-11-19 18:15:01 发布
最新推荐文章于 2021-11-19 18:15:01 发布
阅读量278 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cml_l/article/details/111829887
版权

在我们编写HTML结构时，HTML原本的文档流并不能满足我们贾方的需求。
这时候就需要对元素重新进行排版。

在操作之前我们想要想好：1.是否需要脱离文档流，2.是否可以不用定位，用对齐方式来解决。

一般的如果我们有定位需求时都需要脱离文档流的。
如果不需要脱离文档流我们可以采用margin和padding来完成对齐，也许会更好。

下面进入正题：

1.对齐

圈点Studio
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html元素排序,HTML中的table里面的元素排序
weixin_42351102的博客
06-07 802
我们在上网中都能看到很多能够排序的，如大小，时间等现在我们也试一下排序功能：排序的函数代码：里面含有点击之后排序--还原，和排升序和降序function sortAge(){//对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个(从0 开始)的大小进行排序var tabNode = document.getElementById("tabid");var rows0 = tabNode...
SpringBoot 整合 Redis缓存
weixin_30933531的博客
10-08 41
在我们的日常项目开发过程中缓存是无处不在的，因为它可以极大的提高系统的访问速度，关于缓存的框架也种类繁多，今天主要介绍的是使用现在非常流行的NoSQL数据库（Redis）来实现我们的缓存需求。 SpringBoot整合Redis是非常方便快捷的，我用的是Mybatis，这里就不说Springboot整合Mybatis了网上有很多，同样非常简单。 下面进入正题： 转载于:h...
html元素排序,通过拖拉对多个html元素进行排序
weixin_35785186的博客
06-07 206
JavaScript语言：JaveScriptBabelCoffeeScript确定$(function(){var cols_ = document.querySelectorAll('.column');var dragSrcEl_ = null;handleDragStart = function(e) {e.dataTransfer.effectAllowed = 'move';e.dat...
【Html】段落排版--对齐
O(∩_∩)O
12-10 3934
想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。(那么什么是块状元素呢？在后面会讲到。) h1{ text-align:center; } 了不起的盖茨比 同样可以设置居左： h1{ text-align:left; } 了不起的盖茨比 还可以设置居右： h1{ text-align:right;
为什么清除浮动？
hahahaha__init__的博客
09-09 331
因为最大的父元素不方便给高度，子元素不确定多少 所以应该让子元素撑开父元素 但是会使父元素变为0 会影响下一个元素 这时候就需要清除浮动了 因为浮动不占有位置，需要清除浮动，来占位置 ...
图解html图解html
05-15
图解HTML，特别全，不好包退，
html笔记含http协议图解
04-11
1-基础标签 2-表单元素 3-css引入 4-类选择器 5-文本样式 6-盒子种类 7-定位 8-伸缩盒
图解CSS中position属性的定位用法
09-24
主要介绍了图解CSS中position属性的定位用法,重点讲解了相对定位和绝对定位在页面布局中的作用,需要的朋友可以参考下
JavaScript中的一些定位属性[图解]
10-29
JavaScript获取页面中的一些定位属性说明，需要了解，页面定位控制的朋友可以参考下。
html块状元素横向排列,水平居中-不定宽块状元素（收藏答案+整理）
weixin_30969157的博客
07-12 612
不定宽块状元素水平居中.container{text-align:center;}.container ul{list-style:none;margin:0;padding:0;/消除文本与div边框之间的间隙/display:inline;}.container li{margin-right:8px;/设置li文本之间的间隔/display:inline;}123一些情况：一，contion...
html实现js格式化,对齐
12-09
html实现js格式化，整理JS代码，规整
按钮在页面上相对定位排列
farmss的博客
11-19 411
//在父级div上加style="position: relative"，代表绝对定位 <div class="us-details" style="position: relative"> //在子级div上加style="position: absolute;right:20px;bottom:56px"， //其中position: absolute代表相对定位，right:20px;bottom:56px"代表在父级div框架中靠右下排列 <...
html 让三个元素对齐,使用jQuery和CSS控制元素对齐
weixin_39578867的博客
06-07 268
上节在《自定义表单——jQuery制作个性化Checkbox》介绍了用jQuery美化表单中的checkbox。今天和大家一起探讨另一个表单制作中的对齐问题，这个我想大家在平时制作表单之时，关于对齐一定有碰到过，那么在这个简短的教程中主要尝试另一种解决方法，希望大家会喜欢。在Web页面中创建一个Web表单时(比如说注册信息表单，或者联系表单)，你都必须做出一个功能和视觉对齐的布局。如下图所示：我们...
html vertical-align:middle垂直居中 的方法
HiveMe_Hitech
01-25 7424
 今天我在用vertical-align：middle让图片居中发现无论怎么样的无法垂直居中，所以我感觉很奇怪。大家肯定会选择用line-height：center这个做吧。行高对文字效果很好但是对图片居中效果不好需要你自己慢慢去配对。 因为vertical-align：middle用的比较少。去网上搜了搜答案。但是网上有一些贴出了代码却讲解不详细。所以我这篇文章是对自己遇到问题的总结，也希望能...
HTML元素横向排列的方法以及该方法存在问题的解决方案
cicheng1407的博客
04-24 1万+
在CSS中，div、p、header等元素是块级元素，默认占据一整行；两个同一级别的兄弟块级元素，会自动换行显示。如果需要两个兄弟块级元素横向排列显示，需要设置CSS属性。 一：使用浮动 1、使用浮动float，方法如下： CSS代码： .f { width: 100px; ...
实现HTML页面元素从上往下，从左往右排序
java的涟漪
08-06 1万+
从上往下，从左往右 html,body{ margin:0; border:0; padding:0; width:100%; height:100%; } .parent{ display:block; background:gray; width:100%; height:100%; } .parent{ -webkit-column-width:68px; -moz-col
html的垂直布局,HTML&CSS：垂直流布局(柱状),如何实现？
weixin_36313344的博客
06-19 237
“流动”元素的标准CSS /HTML定位是水平(基于行)=>浮动：左;.我需要做什么,定位他们就像下面的例子(柱状).有没有任何CSS标签设置在某个地方？ (理想情况下,我不想设置一个网格,这应该发生在float中自动执行的相同方式：left style …)+---------------------------+| DivBox1 || DivBox...
【干货】：怎么让元素水平排列
HouYing
05-31 1万+
出自：http://www.myexception.cn/HTML-CSS/2099946.html         块级元素默认是垂直排列的，而行内元素是水平排列的，而在布局时基本上都是用块级元素，如div等常用块级标签，那么如何让块级元素也进行水平排列呢？我有100种方式（准确说是100-94种）让元素水平排列，你知道几种呢？ 第一种：display：inl
CSS 元素的定位之相对定位 position: relative
热门推荐
歪脖先生的博客
02-21 1万+
定位在CSS中，通过 position属性来对元素进行定位，可选的定位类型有 static | relative | absolute | fixed，默认值为 static，表示没有定位，元素保持在它原本应该在的位置上。要对页面元素使用定位技术，必须 position属性设置为 static 之外的其它 3 个属性值，即相对定位、绝对定位、固定定位。相对定位当一个元素的 position属性设置...
内存对齐图解
最新发布
05-24
内存对齐是指将数据存储在内存中时，按照一定规则将数据的起始地址调整到特定的位置上，以提高数据访问的效率。常见的内存对齐规则是按照数据类型的大小进行对齐。 以下是一个内存对齐的示例图解： 假设有一个结构体如下： ``` struct Student { char name[10]; int age; double score; }; ``` 其中，`name` 是长度为 10 的字符数组，`age` 是整型，`score` 是双精度浮点型。 按照内存对齐的规则，结构体的起始地址必须是对齐值的倍数。对于本例中的结构体，假设对齐值为 4 字节，那么结构体的起始地址必须是 4 的倍数。 如下图所示，内存中的地址从 0 开始，因此结构体的起始地址为 0。但是，由于 `name` 的长度为 10，不是对齐值的倍数，因此需要在 `name` 后面填充 2 个字节，使得 `age` 能够对齐在 4 字节的边界上。 因此，`age` 的起始地址为 12，而不是 10。而 `score` 的长度为 8 字节，已经满足对齐要求，因此不需要填充字节。最终结构体的大小为 24 字节，如下图所示： ![内存对齐示例图解](https://img-blog.csdn.net/20180725112844718?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rlc3Qy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/80)

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

圈点Studio

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值