首页 > 作文

html页面布局

更新时间:2023-04-07 10:13:38 阅读：评论：0

布局的常用方法有几下几种

一，float布局

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 css 中，任何中唐诗人元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

属性值：

float:left 元素向左浮动。

float:reght 元素向右浮动。

float:none 默认值。元素不浮动，并会显示在其在文本中出现的位置。

float:inherit 规定应该从父元素继承 float 属性的值。

float案例：

 <div style="width:100px; height: 40px; background-color: black;float: right;"> </div>       <div style="width:100px; height: 40px; background-color: #ff0000;float: left;"> </div>       <div style=" width: 100px; background-color: #0000ff; height: 40px; float: left;"> </div>

效果：（如果不用浮动div块将会一次垂直往下排列）浮动后的块元素可以用magin或pading来留白修饰来使其美观。

二、absolute布局

absolute译为绝对的，absolute是postion属性一个属性值。当一个元素使用绝对定位时，这个元素将不受页面的布局影响

可以根据自己的需求来改变其位置，来完成一些不规则的页面布局：

属性值：

postion：absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

postion：fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

postion：relative 生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20″ 会向元素的 left 位置添加 20 像素。

postion：static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

postion：inherit 规定应该从父元素继承 position 属性的值。

absolute中有一个值的注意的地方相对于 static 定位以外的第一个父元素进行定位在使用绝对定位时要注意他父元素数的定位，假若对父元素没有要求

可以给父元素设置一个相对定位relative。对于新手来说，定位之间的切换，父级和下一级之间的关系常常扰乱我们（我就是这样）所以要勤加练习更好的

掌握。

absolute案例：

<style type="text/css">            .div1{                width: 100px;                height: 40px;                background-color: #ff0000;                position: absolute;                top: 20px;                left: 30px;            }            .div2{                width: 100px;                height: 40px;                background-color: #0000ff;            }        </style>    </head>    <body>       <div class="div1"> </div>       <div class="div2"> </div&g江西学校排名t;       <div class="div3"> </div>    </body>

效果：（使用绝对定位将红色块定位到距离上边框20px左边框30px）如果想让蓝色的div块在上面，可以用在蓝色样式加绝对定位用z-index:1来设置

三、flex弹性布局

弹性布局东西太多不写了直接看别人的博客吧我看着蛮好

四、table布局 (链接：https://blog.csdn.net/bessicxie/article/details/78572424)

table布局的缺点是比其它html标记占更多的字节，会阻挡浏览器渲染引擎的渲染顺序，会影响其内部的某些布局属性的生效，

优点就是用table做表格是完全正确的

语法：display：table；

属性：常见 display:table相当于“table”标签；display:table-row相当于“tr”标签；display:table-cell相当于“td”标签；

案例：

五、grid布局（链接：）

内容来源作者：_leonlee

链接：https://www.jianshu.com/p/d183265a8dad
来源：简书

作为小白的我还是第一次来了解grid布局，刚刚百度了一下子看了几篇博文，了解到这是一个非常nb的东西

简介

css网格布局（又称“网格”），是一种二维网格布局系统。css在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是这些方法本质上是hack，遗漏了很多功能，例如垂直居中。后来出了，解决了很多布局问题，但是它仅仅是一维布局，而不是复杂的二维布局，实际上它们（flexbox与grid）能很好的配合使用。grid布局是第一个专门为解决布局问题而创建的css模块,2012 年11月06日成立草案。使用grid布局非常简单，你只需要给容器（container）定义：display:grid，并设置列（grid-template-columns）和行（grid-template-rows）的大小，然后用grid-column和grid-row定义容器子元素（grid-item项目）的位置。与flexbox布局类似，一开始项目的排列顺序并不重要，可以放置在容器的任何位置，这也使得你非常容易通过媒体查询重新排列你的项目。想象一下，当你定义整个页面的布局时，你只需要几行css就可以完成页面重排以便适应各种屏幕宽度，这得有多么神奇！

好东西总是来的晚，不要焦躁，不要沮丧。活好每一天，自然就等到了。

目前浏览器还不支持grid布局，ie10和ie11支持老的语法。如果你想体验grid布局的强大，推荐使用开通过“体验新功能”的chrome, opera 或 firefox， chrome:打开浏览器，输入，找到”experimental web platform features”，启用并重启浏览器；opera：输入，与chrome一样；firefox:输入layout.css.grid.enabled。
属性：
1. display: grid | inline-grid | subgrid
grid: 生成块级网格

inline-grid: 生成行内网格

subgrid: 如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。 2. grid-template-columns: <track-size> … | <line-name> <track-size> … ；
track-size: 轨道大小，可以使用css长度，百分比或用分数（阅兵式用fr单位）。
line-name: 网格线名字，你可以选择任何名字。
3.grid-te物业小区停车管理mplate-areas

grid-area-name: 网格项的grid-area属性值（名字）

‘.’ : 空网格单元
none: 不定义网格区域
4. grid-column-gap：<line-size>; 和 grid-row-gap: <line-size>

line-size: 网格线间距,设置单位值。
5. grid-gap：<grid-row-gap> <grid-column-gap>;

是grid-column-gap 和 grid-row-gap简写。
6. justify-items: start | end | center | stretch（默认） ;

start: 左对齐
end: 右对齐。
center: 居中对齐。

stretch: 填满（默认）
7. align-items: start | en家族史d | center | stretch ;

start：顶部对齐。
end：底部对齐。

center：居中对齐。

stretch：填满（默认）。
此处省略一万字…………………

grid
内容原文链接(链接 https://www.jianshu.com/p/d183265a8dad) 本来就想写刚刚会的两个的，但是一百度居然有这么多我没用过的布局，所以记下来留个印象，好歹以后有点印象
内容若侵权请告知