HTML页面布局

最新推荐文章于 2023-09-01 17:25:35 发布

叽里咕噜丨

最新推荐文章于 2023-09-01 17:25:35 发布

阅读量344

点赞数

本文链接：https://blog.csdn.net/Yor_h/article/details/78865364

版权

内容不定期更新，最新补充2018-05-23

在用使用MUI的同时，发现了一些页面布局的问题

1.在嵌套多个DIV后，使用margin:0 auto;text-align:center无法使最后一层div中的文字居中的问题：

在最后一层包裹的div中，使用style="display:flex;justify-content:center;align-items:center;"

2.一层div内，两个div并列的并列问题

<div style="margin:2%;background: gainsboro;text-align: center;height: 36%;position: absolute;width: 96%;">
    <h3 style="padding: 5%;">路线ID</h3>
    <div class="centerDiv" style="float: left;background-color: #EE8262;height:50%;width: 40%;margin-left: 5%;">
    <span>5.6KM</span>
</div>
<div class="centerDiv" style="background-color: #EE8262;height: 50%;width: 40%;margin-left: 55%;">
    <span>330</span>
</div>

3.关于布局规范

其实关于javascript写在哪个位置中说纷纭，而且Html顺序加载的，有的时候javascript也需要也在body后

<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>

</body>
</html>

4.关于position的多个参数

absolute 当父级元素含有定位属性时，受限于父级元素

fixed 无论父级元素是否含有定位属性，均不受限于父级元素

inherit 继承父级元素定位属性

z-index 可以修改元素的层级关系，不赋值时，默认为0

作用于带有定位属性的元素，当元素有static时，z-index不起作用

当父元素的z-index的值大于相邻元素时，其子元素不论大小z-index也大于父元素相邻的元素