发表于： 2019-10-14 23:39:36
1 983
今日完成
看深度思考的资料，
什么是外边距重叠？重叠的结果是什么？
（1）背景介绍：
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界 (其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
初衷是为了使得排版更好看。
（2）知识剖析：
三种情况，相邻元素之间；父元素与子元素之间；空的块级元素。
条件：
特殊情况： 垂直方向上，根元素的盒子，不会发生坍塌。
水平方向上的外边距。
怎么使用？
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
1.两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容
2.当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容
3.当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话， 后面的元素覆盖前面的元素
不设置宽度时，负margin会怎么样？
margin-right负值会加宽而且出现横拉条
。。。 。。。
开始编辑第三个页面：
需要注意的标签默认属性：
<p>
margin-top:0
margin-bottom:1rem
<h>
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
1. margin-bottom: .5rem;
2. font-weight: 500;
3. line-height: 1.2;
}
思考：bootstrap导航栏.nav和.navbar区别
一、简单的ul,li组成的导航：
<ul class="nav nav-pills justify-content-center bg-dark nav-dark">
<li class="nav-item">
<a href="#" class="nav-link">1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">3</a>
</li>
</ul>
解析：.nav .nav-item .nav-link表示ul li是导航——.nav-pills表示胶囊状导航——.bg-dark/.nav-dark表示黑底白字——.justify-content-center表示导航栏在浏览器上居中显示
在浏览器上显示为：
缩小浏览器窗口显示为：
二、导航栏——<nav>标签中class="navbar navbar-expand-sm"——<ul>中class="navbar-nav"——<li>中class="nav-item"
代码为：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
</ul></nav>
正常窗口显示为：
缩小窗口小于576px时：
总结：当屏幕缩小时，会折叠（.nav导航不会折叠）
通常，小屏幕上都会折叠导航栏，通过点击来显示导航选项。
3.折叠导航栏
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
。。。 。。。
nav
navbar
ps: 如果删除 .navbar-expand-md 类，导航链接会一直隐藏，且切换按钮会一直显示。（即无论屏幕大小，都会显示为上图）
遇到问题：
导航栏，字体颜色，背景无法修改？添加属性无法识别（覆盖）？
在navbar ul li 中设置字体颜色都无效，
ps：即便在属性中添加！important也无效
解决：只有在a标签中直接设置字体颜色有效，不用加！important
原因：
可能：
因为这条规则：
a {
color: #428bca;
text-decoration: none;
}
要覆盖它，用以下CSS：
.navbar a {
color: white;
}
遇到问题：但是背景怎么设置？一直无效？
解决：
方法1：
一个生成bootstrap导航颜色网站
原理是修改bootstrap.css 或者 bootstrap.min.css 中关于.navbar-default的颜色值，如果修改的是bootstrap.css中的.navbar-default，要引用bootstrap.css文件。
比如：<link href="<%=path %>/css/bootstrap.min.css" rel="stylesheet"> 其中path为WebContent路径，用<%String path = request.getContextPath();%>获取。
然后修改导航条中引用的css样式:<nav class="navbar-default navbar-fixed-top">
方法2：
不用导航栏属性，直接设置盒子，在其中设置a标签，链接
缺点：视口缩小到一定距离，无法折叠，显示如下图：
优点：没有navbar中包含的一些坑人属性
遇到问题;
html中怎样实现点击一个链接跳转到同一页面的某一段文字?
解决：
语法：<a href="#mingzi">点击我跳转</a>
含义：#代表本页面，mingzi的名字是自己设定的名字
ps：如果是本页内，不要忘记加#后面跟个如aaa，不要忘记在要跳转的位置
添加<a name="aaa">点击跳转</a>
或者<a id =""aaa">点击跳转</a>
然后点击“点击我跳转”，就可以跳转到指定的位置了。
扩展：也可以跳转到其它页面的某一个位置，但是，就不能用#，应该用那个网站的网址加跳转到的a的名字。
<a href="目标页.html#abc">xxx</a>
在目标页面里指定的位置加一个锚记：
<a name="abc"></a>
例子
设锚链接，如下：
<a href="#ddd">点我到下面去</a>
<p>一二三四五</p>
<p>一二三四五</p>
<p>一二三四五</p>
。。。 。。。
<p id="ddd">点击后就来到这里~~~~~~~~~~~</p>
<p>一二三四五</p>
<p>一二三四五</p>
<p>一二三四五</p>
。。。 。。。
遇到问题;
为弹性盒子中的弹性元素中的内容设置居中
原本想法：弹性元素直接继承fiex属性，可以在弹性元素上直接使用
结果错误
思考：
想象成两个内容更容易理解，让弹性元素为其内的两个内容设置布局，
属性作用与它子元素，就要求弹性元素的子元素也要具有弹性元素属性，
所以，弹性元素要重新声明d-flex，成为弹性盒子，为子元素赋予弹性属性，
让设置生效。
关于flex部分见解：
1.因为每个子元素都需要添加flex-grow，所以把flex-grow(项目属性）设置在父元素上，
然后其中的子元素，都具有这个属性，
结论;项目属性不具备继承性，哪怕每个都需要，也要在每个子元素中挨个添加；
在之后的编辑代码过程中，注意那些代码具备继承性，那些是项目属性，要设置在目标标签上
ps：flex-grow是平分剩下的空余空间，不是整个父元素宽度，所以不能用来设置等宽
弹性盒子内的弹性元素，好像就只能继承个齐高的特性
（默认高度，是子元素中最高的那个，其它子元素高度不够的拉伸
ps：所以有一部分形状图案类的子元素会拉伸变形，需要另设属性）
2.为一个盒子设置弹性元素，它本身还具有块级元素属性，（不设宽度时默认父元素宽度）
但是，它的子元素（块级）失去默认属性，宽度全由内容撑开
3.为弹性盒子内的子元素设置宽度时
如父元素宽A，其中的子元素分别为S、D
当S+D>A时
如果子元素内的内容宽度小于设定宽度
两个子元素宽就会以S:D的比例分配A，并不会超出A
当S实际内容超出按比例分配的宽度时，S子元素就会自动变宽，直到扩展到实际宽度，
这时，如果D子元素的内容加上S，大于A，内容就会冲破实际边框
ps:
1.如果S+A>D且S=A，当子元素内容实际宽度均<1/2A时，S和D显示就是等宽
2.数字和字母一样，如果没有空格间隔，就默认是一个字符
遇到问题：如上
收获：了解归了解，代码中正确答案只有一个，但是个人理解可能与实际效果有出入，
需要多去实践，与自己的理解相互印证
明日计划;继续任务8、9
返回列表
评论