H5CSS3笔记-三大布局方式

最新推荐文章于 2024-07-08 12:57:16 发布
最新推荐文章于 2024-07-08 12:57:16 发布
阅读量2.9k 收藏 4
点赞数
分类专栏： HTML5CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c87171399/article/details/80032872
版权
本文主要介绍了HTML中的三种布局方式：标准流、浮动和定位。标准流是默认的顺序布局；浮动常用于创建多列布局；定位通过position属性实现元素精确定位。此外，还提到了HTML中的两大元素类型——块级元素和内联元素，块级元素独占一行，内联元素则可以同处一行。
摘要由CSDN通过智能技术生成

一.HTML中的三种布局方式

1.标准流：默认的布局方式，即顺序布局

2.浮动:

最低0.47元/天 解锁文章
tamakisakura
关注
专栏目录
《Web前端技术H5+CSS3》笔记--第六章 盒子模型[云图智联]
07-20 486
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 1.1 盒子模型 在学习盒子模型之前，先来看一个生活中的例子。假如墙上排列着几幅画。对于每幅画来说，都有一个边框，在英文中称为border；每个画框中，画和边框通常都会有一定的距离，这个距离称为内边距，在英文中称为padding；每一幅画间也不是紧挨着
html5+css3页面布局
08-23
简单的HTML5与CSS3页面布局。
前端三种布局方式
m0_47431585的博客
03-17 1104
前端三种布局方式
html5和css3入门知识点概括
最新发布
2303_78660417的博客
07-08 1091
按钮
前端css——css三大布局模型
m0_48930261的博客
08-18 629
在网页中，标签有三种布局模型：1、流动模型（Flow）2、浮动模型（Float）3、层模型（Layer）1、绝对定位(position:absolute)2、相对定位(position:relative)3、固定定位(position:fixed) 1、流动模型（Flow） 流动（Flow）是默认的网页布局模式，也就是说网页在默认状态下的html网页元素都是根据流动模型来分布内容的 流动布局模型具有2个比较典型的特征（就是html的三种元素的布局特征）： 第一点，块状元素都会在所处的包含元素内自上而下按顺序
如何使用html5进行布局,H5如何布局？这个才是入门篇…
weixin_42520796的博客
06-29 1326
saying：1.感谢基友K，给了很多温馨提示。想叫他Lee吧，很尴尬，那我该叫什么？本家的痛。2.感谢工作。活很多，自己也下海了。很多年前就接触H5了，一直没什么机会深挖。这次做了个移动端的网站，so easy。3.感谢生活。虽然三十好几了，还是喜欢鼓捣些技术方面的玩意，谈不上热爱，只能说是一种习惯。会点技术，混口饭还是很方便的。H5布局如何下手？所谓H5布局，说简单点，就是用H5特有的新标签(...
前端流行的三种布局详解
qq_43121828的博客
07-26 1257
目前比较流行的布局有三种 1.流式布局： 含义：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示 设计原理：使用百分比定义宽度，高度大都是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。 缺点：在过大或者过小的屏幕下，元素不会正常显示，会错位 正常屏幕效果： 过小屏幕下： 2....
H5+CSS学习资料+笔记+项目资料
07-13
本资料包是针对H5和CSS3的学习资源集合，旨在帮助初学者快速入门并逐步提升技能。 HTML5是超文本标记语言的最新版本，它在HTML4的基础上做了很多改进和扩展。其中一些重要的知识点包括： 1. **新标签**：HTML5引入...
-CSS-笔记-
April_Aimer的博客
02-07 2176
目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程 从HTML被发明开...
css布局笔记.docx
03-26
CSS布局在网页设计中扮演着至关重要的角色，特别是在H5（HTML5）开发中，良好的布局设计能确保页面在不同设备上展示得美观和功能完备。本文主要探讨了CSS布局中的几个关键概念和技术，包括视口、背景缩放、移动端...
移动h5自适应布局
weixin_33841503的博客
02-11 205
问题一，分辨率Resolution适配：不同屏幕宽度，html元素宽高比和字体大小，元素之间的距离自适应，使用rem单位。 问题二，单位英寸像素数PPI适配：使用rem单位，文字会发虚。段落文字，使用px单位，用media query或js来适配。标题文字可以直接使用rem单位。 问题三，设备像素比例DPR适配：1物理像素在<meta name="viewport" content="i...
前端的布局方式
hmxxhbjt的博客
02-23 2230
前端的布局方式有以下几种：文档流、浮动布局、流式布局、定位布局、弹性布局、自适应布局和响应式布局。 1、文档流：就是将窗体自上而下分成一行一行，其中块级元素就是自上而下的排列，撑满一行，宽度是父元素的100%，而高度就是根据内容撑开；而行内元素则从左到排列，撑满一行在换行，它的高度和宽度就是根据内容撑开的。 2、浮动布局：它就是可以让块级元素显示在同一行，但是浮动的话就不会再撑开父级的高度了，这就会造成高度塌陷，有兄弟标签时就会出现布局重叠问题，因此如果用了浮动，同级兄弟标签也要浮动，或者清除浮动。用了
CSS3布局模型分析
加油~么么哒~~
03-08 1894
布局模型html部分 absolutemargin 方法步骤 严重缺点 floatmargin 方法步骤 缺点 圣杯布局 float负margin 推导步骤 总结 双飞翼布局 flex弹性盒子布局模型布局模型中经典布局有：三栏或者二栏布局中主内容自适应宽度且侧栏主栏可随意换位置，本文将针对这个需求进行分析。 这次布局模型将从absolute+margin–>float+margin–>圣杯布局–
css3基础100问之三大布局中浮动是怎样使用的呢？（7）
weixin_45147894的博客
06-14 281
浮动(float) 1.1 CSS 布局的三种机制 > 网页布局的核心——就是**用 CSS 来摆放盒子**。 CSS 提供了 **3 种机制**来设置盒子的摆放位置，分别是**普通流**（标准流）、**浮动**和**定位**，其中： 1. **普通流**（标准流） - **块级元素**会独占一行，**从上向下**顺序排列； - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table - **行内元素**会按照顺序，**从左到右**顺...
一篇文章彻底搞定css3布局
qq_42803004的博客
07-20 319
一篇文章彻底搞定css3布局 为了方便你的阅读,你可以先看整个文章的提纲,挑着看,选着看,这样更节省时间,如果对各类的标签都比较熟悉,阅读起来会更方便 1.了解布局必须要的基础 1.元素的三种显示模式 块级 , 行内, 行内块 2.css3的三大特性 继承,优先,层叠性 3.盒子外扩和内减模型 2.布局手段 浮动 定位布局 伸缩布局 布局的本质(个人理解) : 所有的...
CSS3中更灵活的布局方式
tenyit的专栏
12-02 686
flex是一个灵活性强的布局方式,它能够很好的控制内部元素的宽度,高度或者剩余的空间部分,来适应不同的显示设备和不同的屏幕尺寸,而真正达到一种自适应效果. flex布局与常规布局截然不同,常规布局虽然在页面上显示很好,但对于大而复杂的项目,在方向改变,自适应大小,伸展和收缩等方面缺乏灵活性,flex最适合作为应用程序的组件,小规模布局使用;网格布局适用大规模布局.
用JS简单实现图片瀑布流 + 无限瀑布流效果
qq_26705343的博客
02-20 567
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l
H5学习之11(html中的浮动布局)
热门推荐
晏金煜的博客
12-24 2万+
html中的浮动布局 float
理解CSS布局：视口与Flex布局解析
"该文档是关于CSS布局的笔记，主要涉及移动端布局、视口概念、背景缩放以及Flex布局的相关知识。" 在Web开发中，CSS布局是构建网页界面的关键部分，尤其在移动设备日益普及的今天，理解移动端布局至关重要。视口...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值