发表于： 2019-10-11 23:23:15
1 877
导航调整遇到问题：结构混乱
显示：
原因：网格布局冲突
思路：先把网格布局摘除，做出折叠导航栏
导航栏语法：
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">折叠后显示文本</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible名称">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsible名称">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
总结：就是在原来的导航栏上，添加绿色代码，然后 <div class="collapse navbar-collapse" id="collapsible名称">
包裹<ul>... ...</ul>
但是，注意盒子ID识别是data-target="#collapsible名称；id="collapsible名称
而不是data-target="#名称；id="名称
没有添加collapsible代码无效
遇到问题：为什么在整个导航栏中设置字体颜色，不识别？
原因：导航栏内有默认白色，但是权限有点高，class没有覆盖掉
遇到问题：为ui添加右对齐justify-content-end，浏览器不识别，无效
原因：添加的容器不对
思考： .container (固定宽度) 和.container-fluid (全屏宽度) 类的容器的区别？
<div class="container" style="background-color: aqua; height:10rem">
<h1>container-fluid</h1>
</div>
<div class="container-fluid" style="background-color: brown; height: 10rem">
<h1>container-fluid</h1>
</div>
<div class="container-fluid" style="height: 100rem"></div>
container固定宽度
container-fluid全屏宽度
如图显示：全屏时
container padding:0 15px，margin:0 48px;
container-fluid padding:0 15px 没有外边距
结论:
1.container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin。
2.container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。
思考：不同分辨率下边距的变化
效果：
1. .container类在屏幕宽度小于等于767px的时候，宽度=屏幕宽度的，也就是100%，container-fluid类不管屏幕宽度大小，一直是100%屏幕宽
2.屏幕宽768px：.container类的div左右出现了外边距margin=9px（左右padding依然是15px），container-fluid类宽度不管屏幕宽度大小，一直是100%。
3.屏幕宽<1000px：.container类的div左右外边距margin一直增大，padding值和子div的宽度不变，屏幕拉大的部分都作用于margin上了。
.container-fluid类宽度不管屏幕宽度大小，一直是100%。
结论：
.container类左右内边距一直是15px，屏幕小于等于767px的时候没有margin值，
屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，
margin值相对最小，分别是9px和15px，其他时候margin值随着屏幕的增大而增大。
.container-fluid类宽度不管屏幕宽度大小，一直是100%。
思考：为什么.container-fluid里添加row，没有被row自带的margin：0 -15px，叠加到宽度中超过100%出现水平滚动条
而导航栏里添加的row却叠加了row自带的margin：0 -15px，超过100%出现水平滚动条？
原因：.container-fluid的宽度是width;100%;row自带的margin：0 -15px备覆盖了，
而导航栏是width;auto属性全屏宽度，margin的左右-15px为它添加了30px的宽度，
并且，当元素不存在width或者width:auto的时候，负margin会增加元素的宽度
所以，导航栏左边的负边距向左移动15px，还剩15px的margin：-15px，填充进容器宽度
ps：正常外边距是透明的内容之外，此处算作内容
显示：
ps：当宽度设置成100vw或相同属性时，容器没有超过视口高度，相当于width:100%;
当容器高度超过视口出现滚动条时，会补捕捉滚动条宽度，出现水平的滚动条
遇到问题：为ul设置<ul class="navbar-nav justify-content-end">
导航栏无效，
原因：ul没有默认宽度，是子元素撑开的，所以justify-content-end没有生效
解决：为ul设置width：100%使之占据剩余父元素剩余的所有宽度
遇到问题：
优秀学员展示页面，设置外边距，offset就会失效
原因：
.offset-sm-2 {
- margin-left: 16.666667%;
}
offset属性就是外边距，再设置就会覆盖
解决：想要几个模块外边距生效的同时有阴影效果，只需要在内容外再嵌套一个盒子，把阴影设置在盒子上，col自带的内边距作用在盒子上就可以了
.main-3-content {
box-shadow: rgb(230 230 230) 0rem 0.2rem 0.4rem 0.1rem;
/*阴影*/
padding: 0 1.2rem;
/*文本水平居中*/
}
.main-3-ioc {
/*图标为圆形*/
width: 5rem;
height: 5rem;
border-radius: 50%;
}
.main-3-ioc-container {
/*包裹图标*/
padding: 2rem 0;
/*垂直居中*/
text-align: center;
/*水平居中*/
}
<div class="container-fluid">
<div class="row ">
<div class="col-sm-2 offset-sm-2">
<div class="main-3-content">
<div class="main-3-ioc-container">
<img class="main-3-ioc" src="8.png" />
</div>
<h5 class="main-3-h">技术顾问：罗大佑</h5>
<p class="main-3-p">百度技术总监：互联网基础服务领域，从事虚拟主机、
云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。
</p>
</div>
</div>
遇到问题：没有排成一行
<div class="container-fluid">
<div class="row">
<div class="col-8 offset-2">
<div class="row">
<img class="col footer-logo" src="a.png" />
<img class="col footer-logo" src="b.png" />
<img class="col footer-logo" src="c.png" />
<img class="col footer-logo" src="d.png" />
<img class="col footer-logo" src="e.png" />
</div>
</div>
</div>
</div>
思路：在8/12中嵌套栅格布局，嵌套栅格布局，
在col后面不设置数字，使5个logo等宽排列，并且栅格属性自带弹性布局，强制一列，等比例缩小，默认占满整个容器的高度
结果;如上图所示，当缩小到一定宽度时，图片自动换行
原因;是col自带的flex-basis：0属性导致的
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex-basis属性，当在实际应用中，取值为0时或者小于图片本身宽度时，浏览器识别宽度就是图片原本的宽度大小，当取值大于图片原本宽度时，浏览器识别它的取值
应用效果是，自适应放大的图片，当缩小到flex-basis的取值时，就会换行，col中，取值为零，宽度就是图片原本宽度大小，当视口缩小，图片自适应，缩小到原本的宽度大小，
就会自动换行
还差两个;
1.是伪类元素，下划线
2.用媒体或者栅格，设置不同乱度下的不同效果
收获：如上
遇到问题;头脑思路僵硬，一些问题，其实只要多设个盒子，或者分别设个属性，就自然而然的解决了，而我，有点死脑筋，就憋在那里，非要用一个设置解决所有的问题，
反而增加了代码的难度，还浪费了时间
原因：还是代码写的少了，遇到问题多转一道弯，就会陷入死胡同，纠结很多时间，其实解决很简单
明天计划：调整任务8
返回列表
评论