html布局盒子（html设置盒子位置）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
今天给各位分享html布局盒子的知识，其中也会对html设置盒子位置进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
html布局的常用的四种实现方式
需求 ：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应
将左右的div宽度设为300px,分别左右浮动，中间盒子不设宽度。注意：先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况
正常的渲染效果如下所示：
第二种：绝对定位（position:absolute）
设置父盒子position:relative（相对定位），
三个子盒子position：absolute,
左盒子left:0,
右盒子right:0;
中间盒子left:300px;right:300px
第三种：flex布局
父盒子 display:flex
左右盒子设置宽度：300px
中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩
第四种：grid布局
父盒子display: grid;
grid-template-columns:300px auto 300px;(分割成3列，宽度分别为300px auto 300px)
grid-template-rows:100px;(占一行，行高100px)
html布局，下面怎么使两个div在同一行显示？
实现两个DIV盒子并排，一行只显示两列DIV布局，使用width宽度+float浮动即可实现一行显示两列DIV布局。
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title两个DIV并排/title
style
.div-a{ float:left;width:49%;border:1px solid #F00}
.div-b{ float:left;width:49%;border:1px solid #000}
/style
/head
body
div class="div-a"第一个DIV盒子/div
div class="div-b"第二个DIV盒子/div
/body
/html
html怎么把盒子放在底部
、首先新建一个html页面，然后在这个html代码页面创建一个div标签，同时给这个div添加一个class类为footer。
2、然后设置footer类，把div固定在底部。创建style标签，在该标签内设置通过position: fixed;bottom:0设置footer类样式，把div固定在底部。
css样式代码：
.footer{
height: 100px;
width: 100%;
background-color: #ddd;
position: fixed;
bottom: 0;
}
3、保存html代码，然后使用浏览器打开即可看到不管如何放大缩小浏览器div都是固定在底部的。
html布局盒子的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html设置盒子位置、html布局盒子的信息别忘了在本站进行查找喔。
