标准流布局

最新推荐文章于 2023-12-08 23:32:02 发布
原创 最新推荐文章于 2023-12-08 23:32:02 发布 · 224 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #html

本文介绍了默认的CSS布局方式——标准流，它规定了元素从左到右、从上到下的排列顺序。在标准流中，元素间的margin和padding可以用来调整位置，但负margin和padding的使用可能会影响其他元素的定位，导致不便实现层叠效果。文章探讨了这一布局方式的优缺点，并强调了其在实际布局设计中的应用挑战。

默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布

  • 从左到右、从上到下按顺序摆放好
  • 默认情况下，互相之间不存在层叠现象
    在这里插入图片描述

margin-padding位置调整

在标准流中，可以使用margin、padding对元素进行定位

  • 其中margin还可以设置负数

比较明显的缺点是

  • 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
  • 不便于实现元素层叠的效果
CSS网页布局：标准流、浮动流与定位流
Luckyfif的博客
10-24 1800
在实际开发中，一个页面往往包含了这三种布局方式的组合使用。通过理解和掌握这三种布局方式，我们可以更加灵活和高效地设计网页布局，创造出美观且功能强大的网页。
标准流、浮动、flex布局
最新发布
lan_da_wang的博客
05-13 1058
* 默认值 */*/*/*//* 把父级剩余尺寸分配成间距，间距相等 */*//* 间距出现在弹性盒子两侧， *//* 视觉效果：弹性盒子之间的间距是两端间距的2倍 */*//* 个个间距都相等 */
CSS实战基本功上——标准流布局
zxdznyy的博客
10-29 2019
文章目录前言一、CSS的三个重要性质1.1 层叠性1.2 继承性1.2.1 java中的继承性*1.2.2 CSS中的继承1.2.3 行高的复习1.2.4 行高的继承1.3 优先级 前言 学习本节首先需要了解，HTML，CSS的基础部分 HTML基础知识 CSS基础知识 了解了最最基础的知识之后，我们想要仿照京东或者小米官网写界面，还需要了解CSS的三个性质，具体了解盒子模型，以及浮动（布局）。 本博客将细致为您拆解相关知识点 一、CSS的三个重要性质 CSS的三个性质分别是：层叠性，继承性以及优先级 实则
常规流布局
QHQLemon的博客
09-17 372
视觉格式化模型 盒模型：规定单个盒子的规则 视觉格式化模型（布局规则）：页面中的多个盒子排列规则 视觉格式化模型大体上将页面中盒子的排列分为三种 常规流 浮动 定位 1. 常规流布局 又称为：常规流、文档流。普通文档流、常规文档流 所有元素，默认情况下，都属于常规流布局 总体规则：块盒独占一行，行盒水平依次排列 包含块（containing block)：每个盒子都有它的包含块，包...
CSS——标准流、浮动、Flex布局
weixin_48719464的博客
12-08 1353
标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。
day11 - 标准流布局和标准流网页布局
weixin_44616136的博客
09-03 497
1.标准流布局 标签在没有布局相关的属性的时候，默认的布局方式就是标准流布局。 a.块级标签：一个占一行；默认宽度是父标签的宽度，默认高度是内容的高度；设置宽高有效。 h1~h6、p、div、列表相关… b.行内标签：一行可以显示多个；默认大小是内容的大小；设置宽度无效。 a、span、label、font… c.行内块标签：一行可以显示多个；默认大小是内容的大小；设置宽高有效。 img、输入框 2.display属性（css） block： 将标签修改成块级标签 inline： 将标签修改成行内标签 i
RecyclerView瀑布流布局项目参考
12-14
瀑布流布局（Waterfall Layout），又称流式布局，通常用于展示图片或者商品，这种布局方式使得屏幕空间得到充分利用，视觉效果更加美观。本项目参考着重于在Android Studio环境下如何实现RecyclerView结合瀑布流布局...
jQuery手机端瀑布流布局代码.zip
07-11
瀑布流布局是一种常见的网页设计方式，它以一种不规则、多列的方式展示内容，每列的高度根据内容自动调整，使得视觉效果如同瀑布般流淌而下。这种布局在手机端尤其受欢迎，因为它能有效地利用有限的屏幕空间，为用户...
图片瀑布流布局分类筛选代码
03-17
瀑布流布局是一种常见的网页设计方式，特别是在展示图片或者商品列表时尤为常见。它将不同大小的图片排列成多列，每一列的图片顶部对齐，形成一种类似瀑布的效果。在这个"图片瀑布流布局分类筛选代码"中，我们可以...
CSS-标准文档流（Normal Flow）
It一zhai男
06-04 1039
目录1 定义2 脱离文档流3 相对定位文章参考 1 定义 文档流中：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。 2 脱离文档流 文档一旦脱离文档流，则元素不再按照文档流的排列方式进行排列，如块级元素脱离文档流后，该块级元素不再接着上个元素从上到下排列，而是成为第一个元素，从顶部开始排列。 脱离文档流的方...
流式布局
zyanna的博客
04-15 662
自定义ViewGroouppublic class XCflowLayout extends ViewGroup { //储存所有子View List<List<View>> mAllChildViews = new ArrayList<>(); //每行的高度 List<Integer> mLineHeight=ne...
1.文档流（标准流）、浮动布局
不羁放纵爱自由的博客
07-20 610
文档流概念元素自上而下，自左而右，块元素独占一行，行内元素在一行显示，碰到父元素的边框换行。浮动布局（大盒子在同一行显示） float: left | right
前端web入门-CSS-day06-标准流和flex布局
来自想要赚大钱的小周同学
06-17 1684
学习目标：1. 了解标准流概念 2.学会使用flex布局
网页布局（标准流、浮动流、定位流）
qq_35381464的博客
04-29 624
定位流 相对定位 1.定位流分类 1.1相对定位 1.2绝对定位 1.3固定定位 1.4静态定位 2.什么是相对定位? 相对定位就是相对于自己以前在标准流中的位置来移动 3.相对定位注意点 3.1相对定位是不脱离标准流的, 会继续在标准流中占用一份空间 3.2在相对定位中同一个方向上的定位属性只能使用一个 3.3由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行...
移动式布局(流式布局)
shrimper
06-19 746
二倍图 物理像素&物理像素比  物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334  我们开发时候的1px 不是一定等于1个物理像素的  PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同  一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比 对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊  在标准的viewport设置中，
网页布局(标准流布局+浮动布局+flex布局)
rainbowyx的博客
06-15 614
【1】标准流 标签按照固定的方式进行排列 1.块级元素独占一行，从上往下排列 常用元素：div,hr,p,h1-h6,ul,ol,form,table 2.行内元素会按照顺序从左至右排列，碰到父元素边缘则自动换行 常用元素：span,a,em 【2】浮动 1.浮动的元素会脱离标准流，浮动的盒子不再保留原来的位置，这个盒子让其他标准流的盒子来占用。 2.设置浮动，是将盒子的上沿自动平齐，浮动的元素仅仅贴在一起，中间不会有间距，如果屏幕变小，屏幕装不下的话，盒子会往下挤，想要给浮动之间的元素设置
【css】最全布局总结
热门推荐
qq_45406325的博客
08-13 1万+
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
web前端开发基础----标准流布局和非标准流布局
m0_64148419的博客
11-24 847
web前端开发关于标准流和非标准流的内容
flex布局脱离标准流
01-18
flex布局是一种用于网页布局的弹性盒子模型。它可以让容器中的子元素按照一定的规则进行排列和对齐。在flex布局中，子元素默认是不脱离文档流的，即它们仍然占据着文档中的位置。 要使flex布局的子元素脱离标准流，可以使用`position`属性来改变它们的定位方式。常用的定位方式有`absolute`和`fixed`。 下面是一个示例，展示了如何使用flex布局并使子元素脱离标准流： ```html <style> .container { display: flex; position: relative; } .item { position: absolute; top: 0; left: 0; } </style> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> ``` 在上示例中，`.container`是一个使用flex布局的容器，`.item`是容器中的子元素。通过将`.item`的`position`属性设置为`absolute`，它们就脱离了标准流，并可以使用`top`和`left`属性来控制它们的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值