首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

重学前端之BFC、IFC、FFC、GFC

在 IFC 中,内联元素按照水平方向依次排列,当一行排不下时会进行换行处理,并且在垂直方向上,它们的对齐方式遵循一定的规则,比如基线对齐、顶部对齐、中部对齐等。...在垂直方向上,默认是基线对齐(以元素内文字的基线为基准对齐),不过也可以通过 vertical-align 属性来改变对齐方式,如设置为 top(顶部对齐)、middle(中部对齐)、bottom(底部对齐...-文本排版:在处理一段包含多个内联元素(比如不同样式的文字、链接等混合在一起)的文本内容时,IFC 规则决定了它们如何在一行内排列以及垂直方向上的对齐情况。...对于不同屏幕宽度(如桌面端、移动端等)的适配,FFC 可以方便地调整导航栏、内容板块等元素的布局,让它们在不同设备上都能合理展示。...页面整体布局:对于复杂的网页页面,如电商网站的商品展示页面、新闻资讯网站的文章列表页等,使用 GFC 可以清晰地划分不同的板块区域,像头部导航、侧边栏、主体内容区、底部版权信息区等,将它们按照网格结构进行布局

18810

CSS 入门指南:轻松掌握网页布局与样式设计的艺术

对齐元素(重点) align-items、align-content 和 text-align 是 CSS 中用于对齐元素的属性,但它们应用于不同的场景和布局上下文。...text-align 属性 应用场景:text-align 主要用于文本对齐,它决定了 行内元素 或 块级元素中的文本 如何在水平方向对齐。...text-align 适用于块级元素的文本内容,而不是用于整个容器内的子元素对齐。 作用对象:对齐的是 文本或行内元素,例如文本、图片、按钮等。 典型值: left:文本或行内元素左对齐(默认)。...示例: p { text-align: center; } 在这个例子中,所有 标签中的文本会在水平方向上居中对齐。...text-align:用于 文本或行内元素的水平方向对齐,一般适用于块级元素中的文本内容,而不是布局中的子元素。 示例对比: <!

14610
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS基础

    p{color:red;} 三年级时,我还是一个胆小如鼠的小女孩。 可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。...中英文混排时,可以对不同的语言添加标签,分开调整; text-align:属性规定元素中的文本的水平对齐方式; text-align:center/right/left(默认)/justify...(两端对齐) 例子: div>[站外图片上传中……(3)]div> 此时在嵌入式样式中应这样写: div{ text-align:xxx; } 解释: 该属性通过指定行框与哪个点对齐...,从而设置块级元素内文本的水平对齐方式。...一般来说,把各个元素的内边距和外边距 浮动 因为 div 元素是块级元素,独占一行的。如何在一行显示多个 div 元素?显然默认的标准流已经无法满足需求,这就要用到浮动。

    1.7K50

    CSS——可视化格式模型

    more text div> div生成了一个块框,包含了另一个块框p以及文本内容some inline text,此时文本内容会被强制加到一个匿名的块框里面,被div.../div> div元素生成一个块框,其中有几个行内框(如em)以及文本some和text,此时会专门为这些文本生成匿名行内框; display属性的影响 display的几个属性也可以影响不同框的生成...FC内部的渲染); 内部的规则可以是:如何定位、宽高计算、margin折叠等等 不同类型的框参与的FC类型不同,譬如块级框对应BFC,行内框对应IFC 注意:并不是说所有的框都会产生FC,而是符合特定的条件才会产生...,与普通元素重合),除非这个元素也创建了一个新的BFC; BFC特点: 内部box在垂直方向,一个接一个的放置; box的垂直方向由margin决定,属于同一个BFC的两个box间的margin会重叠...水平方向上的margin,border和padding在框之间得到保留,框在垂直方向上可以以不同的方式对齐; 它们的顶部或底部对齐,或根据其中文字的基线对齐 行框: 包含那些框的长方形区域,会形成一行

    98020

    Web - CSS3基础语法与盒模型

    还介绍了文本与字体属性,如段落和行相关属性、字体文本属性。最后阐述了盒子模型,如元素隐藏、行内与块元素转换、盒子构成及相关属性等。...css3 层叠样式表css全名叫做层叠样式表,层叠性是它很重要的性质,多个选择器可以同时作用于同一个标签,效果叠加。...p::selection { background-color: yellow; color: black;}5、::placeholder用于设置表单输入框中占位文本的样式,可调整占位文本的颜色、...p { line-height: 1.5; }3、text-align设置段落文本的水平对齐方式,left(左对齐)、right(右对齐)、center(居中对齐)、justify(两端对齐)等。...1、行内元素转换为块元素span { display: block;}2、块元素转换为行内元素块元素如div>、等,默认会独占一行。

    10410

    HTML概念和相关标签指南

    文本标签:和文本有关的标签 案例:个人简历 图片标签 列表标签 链接标签 块标签div和span: 语义化标签:html5中为了提高程序的可读性,提供了一些标签。...开发、安装,部署,维护 麻烦 B/S: Browser/Server 浏览器/服务器端 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序 优点: 1....如:文本,图片,音频、视频, HTML,CSS,JavaScript 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源。...超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。 标记语言: 由标签构成的语言。 如 html,xml;标记语言不是编程语言。...用于指定html文档的一些属性。引入外部的资源 title:标题标签。 body:体标签 :html5中定义该文档是html文档 文本标签:和文本有关的标签 注释:<!

    1.3K20

    【Web APIs】JavaScript 操作元素 ⑥ ( 关闭对话框案例 | display 属性简介 | 页面标签结构和样式 | 盒子模型细节 | 绝对布局要点 - 设置负值即可超出父容器模型 )

    | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 ) 博客中介绍了 使用 innerText 属性 innerHTML 属性 修改 DOM 元素标签内容的..., 开发了一个 密码输入框案例 , 点击右侧按钮可 显示 / 隐藏 密码文本内容 , 实际上就是 切换 input 表单的类型 type 在 text / password 之间进行类型切换 ; 在 【...属性简介 标签元素 的 display 属性 可用于定义一个元素如何在页面上显示 , 该属性 控制了元素的盒模型特性 , 如 : 尺寸、布局方式和如何处理与其他元素的关系 ; display 属性的不同值可以影响页面的...div 标签元素 只是 用于显示一行字 , 没有其它作用 , 设置 50 x 50 像素 居中显示文本即可 ; .box .inner_box { width:.../* 外部的 box 有 1 像素边框 按钮也有 1 像素边框 为了使按钮与盒子对齐 */ top: -1px; /* 将按钮放在 盒子的 左侧 多出的

    12310

    前端入门学习--CSS

    样式可以规定在单个的HTML元素中,在HTML的头元素中,或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。...:”rgb(255,0,0)” 颜色名称 - 如:”red” 下面的例子中,h1,p,div元素拥有不同的背景颜色。...为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中,背景颜色的属性简写为background。...下面的例子是设置100%的宽度,50像素的th元素的高度的表格: table { width:100%; } th { height:50px; } 表格文字对齐 表格中的文本对齐和垂直对齐属性。...使用 clear 属性往文本中添加图片廊: .text_line { clear:both; } CSS 布局 - 水平 & 垂直对齐 元素居中对齐 要水平居中对齐一个元素(如 div), 可以使用

    27.7K20

    面试题必备-web页面基础

    form表单事件 onblur:当元素失去焦点时触发 onchange:在元素的元素值被改变时触发 onfocus:当元素获得焦点时触发 onreset:当表单中的重置按钮被点击时 onselect:在元素中文本被选中后触发...div标签中,这个div标签的作用就是相当于一个容器。...什么是逻辑部分,它是页面上相互关联的一组的元素,如网页中的独立的栏目版块,就是一个典型的逻辑部分。...网页由上到下,由内到外 div,header,footer,nav,article,aside等标签多用于模块划分 css全称为层叠样式表,它主要用于定义HTML内容在浏览器内的显示样式,如文字的大小,...vertical-align baseline默认 sub垂直对齐文本的下标 super垂直对齐文本的上标 top对象的顶端与所在容器的顶端对齐 text-top对象的顶端与所在行文字顶端对齐

    2.5K10

    ACM MM2021 HANet:从局部到整体的检索!阿里提出用于视频文本检索的分层对齐网络HANet!代码已开源!

    有些工作通过分解句子来利用局部细节,但忽略了相应视频的分解,导致了视频-文本表示的不对称性。 为了解决上述限制,作者提出了一个层次对齐网络(HANet)来对齐不同层次的视频文本匹配表示。...除了语音识别,视频文本检索是上述场景中的一项关键技术,其目的是搜索给定自然语言句子作为查询的相关视频。这项任务具有挑战性,因为视频和文本是两种不同的模态,如何在共享空间中编码和匹配它们是关键。...方法 在本文中,作者提出了用于视频文本检索的层次对齐网络(HANet),其目标是对齐不同层次的视频-文本特征,并度量不同公共空间中的相似性。...三种层次的文本表示被用于在层次对齐中与相应的视频表示对齐。形式上,给定句子,作者使用预训练的模型来提取单词嵌入 image.png 然后在文本解析之上生成三种不同层次的表示。...3.4 Hierarchical Alignment 在上述文本编码和视频编码之后,我们得到了三个层次的表示,即个体、局部和全局层次。在本节中,将介绍如何在三个不同的层次上分层对齐表示。

    2.5K10

    8.图片样式-CSS基础

    一、图片大小 在CSS中,我们可以使用width、height属性来定义图片的大小。 1.实际开发 在实际开发中,需要使用多大的图片,就用Photoshop制作多大的图片。...为img设置边框-整体样式.png 三、图片对齐 1.水平对齐(text-align) 在04-文本样式.md中,我们知道使用text-align属性来控制文本在水平方向上的对齐方式,那么对于图片该如何在水平方向向上对齐呢...(1)语法格式 text-align:取值; ① text-align属性值 属性值 说明 left 左对齐(默认值) center 居中对齐 right 右对齐 这和之前学习文本样式中的都是一样的...(3)图片水平对齐定义在何处? 图片是在父元素中进行水平对齐,因此要在图片的父元素中定义。而不是在img元素中进行定义。...图片样式垂直对齐(vertical-align)示例1.png 四、文字环绕(float) 在CSS中,可以使用float属性实现文字环绕图片的效果。

    2.2K20

    BootStrap基础知识

    使用行来创建水平的列组。 内容需要放置在列中,并且只有列可以是行的直接子节点。 预定义的类如 .row 和 .col-* 可用于快速制作栅格布局。 列通过填充创建列内容之间的间隙。...根据不同荧幕设备在尾部显示弹性子元素 (右对齐) justify-content-*-center 根据不同荧幕设备在 flex 容器中居中显示子元素 justify-content-*-between...左对齐 / .text-center 居中 / .text-right 右对齐 / .text-justify 设定文本对齐,段落中超出荧幕部分文字自动换行。.../ .list-unstyled 移除预设的清单样式,清单项中左对齐 ( 和 中)。...内联表单需要在 元素上添加 .form-inline 类 所有内联表单中的元素都是左对齐的 在荧幕宽度 小于 576px 时为垂直堆叠,如果荧幕宽度 大于等于 576px 时表单元素才会显示在同一个水平线上

    33410

    前端基础篇之CSS世界

    “流体布局”是html默认的布局机制,如你写的html不用css,默认自上而下(块级元素如div)从左到右(内联元素如span)堆砌的布局方式。 块级元素和内联元素 这个大家肯定都知道。...如存在src=""属性的 元素和可以输入文本的 元素等。...line-height的作用: line-height属性用于设置多行元素的空间量,如多行文本的间距。 对块级元素来说,line-height决定了行框盒子的最小高度。...下图中和上图唯一不同之处就是多了个display: inline-block的span元素,但是此处的span元素并没有影响div元素的高度,而只是靠着vertical-align: middle属性将自身中心点对齐了字母...top bottom使元素及其后代元素的底部与整行或整块的底部对齐。) 文本类:text-top text-bottom(使元素的顶部与父元素的字体顶部对齐。)

    2.1K50

    HTML基础知识

    left:左对齐(我是默认值哦);right:右对齐;center:居中对齐   (2)bgcolor属性:我的作用是添加一个背景颜色 三  文本元素 1 b元素: 我的作用就是 加粗文字; 2.br...21.time元素: 我的作用从语义上来看就是表示日期和时间,例如 2015-9-18 22.span元素: 我的作用就是表示一般性的文本,没有特殊效果 四 超链接 目录语法:   同一个目录:直接写文件名称...div元素和布局 div元素是通用的块元素,内部可以包含其他各种元素包括其他div元素;并且可以通过CSS设置样式来完成复杂的页面的布局 通过一个简单的实例了解div布局是如何实现的   十一  通用属性...id属性:id属性用于指定元素的识别名称,相当于一个人的身份证,是唯一的,同一个文档中不能有重复的id;一般配合CSS和JavaScript来选择元素。        ...2 class属性:class属性用于指定元素的类别名称,可以使用class元素给同一个文档中的多个元素进行归类,CSS就可以通过class个同一类元素设置统一的样式。

    2.2K30

    【CSS】309- 复习 CSS盒模型

    二、知识点 2.1 标准模型和IE模型的区别 计算宽度和高度的不同。 标准盒模型:盒子总宽度/高度 = width/height + padding + border + margin。...如以上代码:父元素不加 overflow: hidden,则父元素的实际高度为 100px;如加上 overflow: hidden 父元素高度为 110px,给父元素创建了 BFC,块级格式化上下文。...2.5.2 BFC原理(渲染规则|布局规则): (1)内部的 Box 会在垂直方向,从顶部开始一个接着一个地放置; (2)Box 垂直方向的距离由 margin (外边距)决定,属于同一个 BFC 的两个相邻...,清除内部浮动(原理:触发父 div 的 BFC 属性,使下面的子 div 都处在父 div的同一个 BFC 区域之内) 4、去除边距重叠现象,分属于不同的 BFC 时,可以阻止 margin 重叠 2.6...都有效; (3)Box 垂直对齐方式:以它们的底部、顶部对齐,或以它们里面的文本的基线(baseline)对齐(默认,文本与图片对其),例:line-heigth 与 vertical-align。

    1.5K30

    CSS技术入门

    这是为了避免在不同的浏览器中的可视化差异。IE8 和早期有一个问题,当使用 float 属性时。如果一个容器元素(在本例中div class="container">)指定的宽度,!...media 规则媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。 @media 规则允许在相同样式表为不同媒体设置不同的样式。...,不适合在一个区域内,它扩展到外面,CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字允许长文本换行,如:word-wrap:break-word;word-break:单词拆分换行属性指定换行规则...如:div{border:2px solid;padding:10px 40px; width:300px;resize:both;overflow:auto;}可以拖拉文本框的大小。...并在打包产物中,将哈希值作为类名使用。并且打包工具会保证 ,即使是不同的 CSS 文件中,存在同名的类,生成的哈希值也是不同的。从而保证了局部作用域。

    2.9K61

    【Web前端】深入CSS 布局

    一个例子展示了这些不同的​​display​​​值的效果: div style="display: block;">这是一个块级元素div> <span style="display: inline...三、弹性盒子(Flexbox) 弹性盒子(Flexbox)是CSS3引入的一种布局模式,用来为不同尺寸的屏幕设计复杂的布局。...设置 ​​flex​​ 属性 ​​flex​​属性是弹性盒子的核心,用于设置弹性项如何在弹性容器中分配空间。... div> 在这个例子中,图片浮动到左侧,文本则环绕在图片右侧。 需要注意的是,浮动元素之后的内容通常会出现“塌陷”问题,即元素的父容器高度会变为0。...这种布局方式非常适合用于展示较长的文本内容,如新闻文章或博客文章。 div> 文本被分成了三列,并且列与列之间有20px的间隔。

    10410

    内容 AI:建立统一的跨媒体多模态内容理解内核

    随着深度学习技术的发展,不同的研究人员在进行内容理解任务的时候,会加上更多模态的特征,并且尝试通过网络结构的改进获得更好的数据表现。...模型层面可以在如下几个方向深入:1.表征:多个模态同时存在的情况下,针对具体任务动态进行模态内不同级别特征信息使用(如文本中句义、句法、字词特征;视觉中语义、边缘、色彩特征),利用注意力机制选择特征;利用生成对抗网络对形式和内容进行表征解耦的能力...在获得图像与文本间的联合概率分布后,我们在应用阶段,输入图片,利用条件概率 P(文本|图片),生成文本特征,可以得到图片相应的文本描述;而输入文本,利用条件概率 P(图片|文本),可以生成图片特征,通过检索出最靠近该特征向量的两个图片实例...技术方案: 对齐(Alignment): 从来自同一个实例的两个甚至多个模态中寻找子成份之间的关系和联系。 相关任务: 给定一张图片和图片的描述,找到图中的某个区域以及这个区域在描述中对应的表述。...Bert 框架,联合了文本和图片特征 co-attention 来获得多模态描述特征,进行下一步的 VQA 等任务。

    4.9K30
    领券