HTML的布局基础总结

最新推荐文章于 2025-05-21 22:19:12 发布

☞舍我¤其谁☜

最新推荐文章于 2025-05-21 22:19:12 发布

阅读量402

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： HTML

本文链接：https://blog.youkuaiyun.com/qq_44323621/article/details/86565833

前端专栏收录该内容

7 篇文章

订阅专栏

HTML的布局基础总结

开发工具与关键技术：DW网页设计
作者：李国旭
撰写时间：2019年1月20日

下面我们来看一下HTML的布局以及它的样式，我们可以在源码的的下方用一个写在这个样式标签里，这样写消耗内存大，所以我们都是建一个CSS，把样式写在里面；与标签是文档的开始点和结束点，在它们之间是文档的头部和主体。如下图所示：
在这里插入图片描述
样式的引入 <link rel=”stylesheet”href=”（css文件）”> 一般我是习惯在title上引入的，而的引用就是在body上进行引用；把内容写在body里面。
一、HTML的布局类型
1、自动居中布局 margin:auto;，如下图所示：
在这里插入图片描述
2、浮动布局
通过浮动来确定位置Float-left左浮动，Float-right右浮动
3、绝对定位布局
常用的有相对定位和绝对定位，relative是相对于自身原有位置进行定位，absolute是建立以包含块为基准的定位；如果是行内元素就要转换成行内的块级元素在，再进行定位。
在这里插入图片描述
4、盒模型
top上，右 right，下bottom ，左left，外边距margin，边框border，padding内边距
二、Flex布局，被译为“弹性布局”，简称“项目”；有六个属性分别是flex-direction决定主轴的方向,flex-wrap换行,flex-flow是前俩个属性的简写,justify-content对齐方式,align-items交叉轴对齐,align-content多根轴线的对齐,它可以随意地让客户缩放屏幕大小，后界面的样式不会乱。
我们再给最外层的盒子设置display:flex，的时候一定要记得给它最外层的盒子设置高度。
在这里插入图片描述
HTML中还有一些常用标签行内标签；

段落标签；

无序列表；下划线；斜体字；空格；placeholder文本框提示；
换行<input,type=“text”>,文本框<input,type=“password”>,密码框，<input,type=“checkbox”>,复选框，下拉框，<input,type=“submit”>,提交按扭，这里需要注意一下：把标签放到表单中，你会发现点击这个button变成了提交，相当于。