发表于： 2020-03-13 23:29:31
1 1437
今天：
首先是自适应高度
思路：首先是以百分比来达到自适应
查了些资料，子元素的百分比高度宽度是根据父元素的高宽来的，根据师兄提示，高度在网页里高度没有设定的话一般没有具体数值，所以不设定父元素高度子元素设置百分比是不显示的。
因为页面根元素的html元素的高度为auto(实际上为0)，body的height也为0，所以，当你让一个元素的高度设定为百分比高度时，父级的高度如果是auto，那你的子级设置%高度，就无法取到实际值。
在父元素里添加了height=100vw；结果就是占满窗口，缩小了一下并没有自适应，尝试使用padding-top撑起高度，把父元素宽度高度都设置为auto，此时盒子又变成长条状。
主要是想达到高度自适应，查到了可以由padding撑开高度
当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的
因为padding的百分比是按照容器宽度计算的，所以由padding来撑开容器高度，而不是height，保证了容器的宽高比例
尝试添加，高度被撑开，但是与预期差距很大。
想法：padding是根据父元素宽度来设置的，那么我设定父元素padding，width：100%实现长宽一致的正方形，
子元素按照宽高度来设定padding-left，和padding-bottom替代宽度和高度，float-left实现九宫格。
发生排列问题，以为是父元素的padding-bottom问题，尝试删除，依然没有变化。
开发者工具看了下内容是被子元素的盒子撑开的，然而父元素的padding撑开了空白空间。
在删除了父元素的padding后，添加height-auto，多余的空白确实是删掉了，但是九宫格又不能呈现了。空间足够，盒子却一行没有排满三个
.box{
width: 300px;
height: auto;
border: 1px solid #FF0000;
overflow: hidden;
}
.box-left{
background-color: orange;
padding-bottom: 30%;
padding-left: 30%;
margin-left: 1%;
margin-top: 1%;
border-radius: 20%;
float: left;
}
奇怪的是调整子元素padding-left到28%又可以了。我计算了一下，三个30%的盒子90%，边距1%也撑不破宽度。无法理解，未知是否我计算错误。
开发者模式调试了一下，手机模式缩小边框，子元素又被挤成竖行。
看了搜索到的别人的代码，父元素是添加了padding的，但是在我这里变成多余的空白，
查了不少资料，这并不属于溢出，了无头绪，直接搬了别人一段代码对照自己的，发现只要把我的.box-left换成.box>div，就可以实现自适应了。。但是没能理解为什么。是我的box-left没有应用到吗？还是必须使用>div?
而且我的父元素里面的padding还是属于多余元素。我对照了一下别人的代码，基本上没有区别。还请师兄指教。
以下是我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子尝试</title>
<style>
* {margin: 0;
padding: 0;}
.box{
width: 50%;
padding-bottom: 50%;
border: 1px solid #FF0000;
overflow: hidden;
}
.box>div{
background-color: orange;
padding-bottom: 28%;
padding-left: 28%;
margin-left: 1%;
margin-top: 1%;
border-radius: 20%;
float: left;
}
</style>
</head>
<body>
<div class=box>
<div class="box-left">1</div>
<div class="box-left">2</div>
<div class="box-left">3</div>
<div class="box-left">4</div>
<div class="box-left">5</div>
<div class="box-left">6</div>
<div class="box-left">7</div>
<div class="box-left">8</div>
<div class="box-left">9</div>
</div>
</body>
</html>
下面是别人的代码：而且没看见他的代码中清除浮动元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css01-九宫格</title>
<style>
* { padding: 0; margin: 0; }
.main {
background-color: #fff;
width: 90%;
padding-bottom: 90%;
}
.main>div {
width: 26%;
padding-bottom: 26%;
border: 1% solid #fff;
background-color: #E78326;
border-radius: 3%;
float: left;
margin: 1%;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
而且他的父元素显示padding为0，理解不了。
而且对照了下他的内容宽度高度是980x882，
而我的宽度x高度是480x488.700
我的高度这个数值有点大的不可思议，或者这是小数点？
今天姑且算是解决了高度自适应的问题，但是产生更多问题。
明天
继续下一步任务配置nginx。解决今天的问题就可以向第二步任务前进了。
返回列表
评论