美文网首页Web前端之路让前端飞
深入理解流体框、矩形框、浮动

深入理解流体框、矩形框、浮动

作者: 8a0cbdf46620 | 来源:发表于2017-04-16 01:07 被阅读27次

盒子模型是描述html元素在文档布局上、空间占据情况的一种模型。

盒子模型的核心是:元素实体大小、内填充大小、边框大小,外补白大小

我们一般关心的是元素实体大小和最终大小(外补白边缘到边缘确定的距离)

盒模型类型可分为:流体框、矩形框

裸文本:没有行内元素包裹的文字、图片等

裸文本或者裸文本外有行内元素作为包裹层时都会形成流体框。

流体框的特征是大小完全由实体元素撑起不能设置宽高但可以通过内填充和外补白来影响宽度

矩形框特征:略

流体框和矩形框的关系:流体框位于矩形框之上,矩形框承载流体框

浮动:

元素设置浮动属性,就意味着放弃矩形框(如果有矩形框),也就失去矩形框的文档空间占据

但是!没有放弃流体框,流体框也不可能被放弃!

具体过程:元素放弃矩形框后,后续元素自然而然地占领其矩形框空间,元素原有的流体框和后续元素的流体框按行内元素的排版规则进行自适应调整。

相关文章

  • 深入理解流体框、矩形框、浮动

    盒子模型是描述html元素在文档布局上、空间占据情况的一种模型。 盒子模型的核心是:元素实体大小、内填充大小、边框...

  • 矩形框的理解笔记(读<<大话设计模式>>)

    矩形框的理解 矩形框顶端表示类名,抽象类的字体是斜体,第二行代表类的特性,通常就是字段以及属性,第三层为类...

  • python 之 opencv 画矩形框,写文字,保存

    python 之 opencv 画矩形框,写文字,保存 安装 给定图片,以及矩形框坐标,画图 原图: 结果图1: ...

  • CSS葵花宝典——盒模型

    CSS假定每个元素都会生成一个或者多个矩形框,这称为元素框(规范的将来版本可能允许非矩形框,不过对现在来说,框都是...

  • 【PPT营销力】锦囊7:高桥流水文字-聚光效果

    1 小白三步曲 2 输入文字”优秀是一种习惯“ 字体:高桥流水 3 插入矩形框,大大的矩形框 插入圆形框 先选中...

  • OCR-通过识别线条算矩形框

    1、通过opencv已经识别到线条数组了 2、清除矩形框线条 把矩形框里面的线条还有比较靠近边缘的线条清理 3、拼...

  • UML类图不同符号代表的含义

    类图: 描述一组类、接口以及它们之间关系的图,用来显示系统中各个类的静态结构。 符号含义矩形框类< >矩形框接口(...

  • day09海报赏析

    版式:以人物为背景,矩形框横跨人物的眼睛,文字排版在矩形框内部 色彩:框釆用浅绿色的。 文字:采用几何体文字,上面...

  • 鼠标悬停,导航,评价功能的实现(一)

    一、鼠标悬停时背景改变的实现有三种方式: 1,通过矩形框,添加悬停时改变矩形框的属性来实现变化 2,通过image...

  • float

    --- float浮动 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框...

网友评论

    本文标题:深入理解流体框、矩形框、浮动

    本文链接:https://www.haomeiwen.com/subject/lpboattx.html