发表于： 2018-04-22 23:17:28
1 536
今天完成的事情：完成了任务六，修改了任务五并提交。学习了bootstrap的基本概念和使用。
明天的计划：开始任务七，回答之前任务的深度思考。
今天的收获：
用css绘制三角形基本原理 ，原理非常简单，通过截取border(边框)的部分“拐角”实现，几行CSS代码即可理解：把border的值设置的大一点，其中一边的颜色不一样，会发现矩形的border其实是一个梯形，
，只要把width和height设置为零后每一边就是一个三角形，实现代码：
学习了Z-index
1、首先要知道三维坐标是什么鬼，一般的文档流也就是z轴的水平位置，y轴的垂直位置，css 2.1中所有的盒模型元素都处于了三维坐标系中了，所以就有个z轴来表示屏幕内外方向上的位置（我的理解是有点像ps中的图层关系） 屏幕是个二维的平面，所以不能看到z轴，只能通过元素展现在和其他二维平面的其他元素的前面或者后面才能看得到（对这句话的理解可以是，屏幕看成是一个二维平面，然后桌上的放着本书，书上有个钥匙，书和钥匙就是元素，钥匙在书的上面，说明钥匙在三维空间中的位置要高于书）
2、要确定z轴的元素是什么分布，css允许对z-index属性设置三种值，auto、整数、继承。
整数的数值可以是正、负、0 ，三种植，数值越大，元素越靠近观察者，数值小的话元素就看起来远咯，如果有两个元素放在了一起，占据了二维平面上的一块共同的区域，有着较大z-index值得元素就会掩盖或者这个较低z-index值得元素的共同的一部分，好比上面的例子，可以理解为钥匙的值要比书的值更大，所以钥匙的体积就遮盖了书的一部分。
z-index是怎么工作的？
层叠上下文可以想象成一张桌子，上面堆了一堆物品，另一张桌子也对了一堆物品就是另一个层叠上下文了。
层叠层可以额想想成堆在桌子有四堆物品，每堆物品就是一个层叠层。
在HTML中层叠上下文的的“桌子”就是HTML元素，HTML标签中的一切都被放在了这个“桌子”的一个层叠层上。
当给一个元素设置了除auto外的z-index值时，就相当于创建了一个新的层叠上下文（桌子），其中有独立于页面上（HTML元素）上其他层叠山下文和层叠层 的层叠层，用人话说就是被赋予z-index的值会和别的桌子以及其桌子上的物品隔离开~~就是这么傲娇~~
层叠次序，
1，背景和边框，形成层叠上下文（桌子）的元素的背景和边框，最低登记
2，负z-index值- 层叠上下文有这个值得子元素
3，块级盒 - 文档流中非行内非定位（position？）子元素。
4，浮动盒 - 非定位浮动元素
5，行内盒 - 非定位浮动元素。
6，z-index ：0 - 定位元素。这些元素形成了新的层叠上下文， 设置了position（非static）后就会形成新的层叠上下文~~搜嘎，
7，正z-index值 - 定位元素，层叠上下文中的最高等级。
这七个层叠等级构成了层叠次序的规则。可以看到大多数都会比z-index为0的层叠等级更低，这是不是印证了，当元素设置了position定位后，会形成了新的层叠上下文，这样元素就在块级盒子和行内盒子这些的上面了。
非定位元素也是分散在了不同的层叠等级上。
在这个代码上，one是一个层叠上下文，相当于贴近了桌子，four是在one的上头，在回到上面的例子~~ one就是书，two-three就是书的封面，four是钥匙。
当一个设置了z-index值的定位元素与常规文档流中的元素相互重叠的时候，谁会被置于上方？设置了z-index的定位元素会在上方。
当定位元素与浮动元素相互重叠的时候，谁会被置于上方？ 当然还是定位元素咯~~
当定位元素被嵌套在其他定位元素中时会发生什么？ 会显示在父级元素的上方， 不管z-index的值是不是比父级元素的大还是小，唯一有影响的就是要是z-index的值比同级的定位元素的值要大，会在其上方显示。
当学到这儿的时候就清楚了之前不是很理解的关于定位position的几个概念，
1，设置了position的元素为什么会高于其他没有设置的元素，原因就是定位元素的默认z-index值就是0，按照上面的层叠顺序知道值为0的时候要高于其他很多元素。
2，做任务六的时候，上面div设置了position-relative 来做下来菜单，下面的ul也设置了position-relative用来移动雪碧图的位置。到这儿就出现问题了，下拉菜单虽然能显示出来，如下图：鼠标放在所在地的部分二级菜单是可以显示的，但是如果要点二级菜单的话就会消失，无效~~ 本来以为是css 中设置的下拉菜单的原因，然后把这个div块和相对应的css 放到一个demo中试验，发现可以正常点击，不存在这个问题。后面师兄帮忙看了下说有可能是z-index的原因，当把下拉菜单的块级父元素z-index设置为1后，可以正常使用了。
学了z-index后尝试分析这个bug 的原因：div和ul的父元素都设置成position，相当新建了两个层叠上下文，这时候z-index的值都为0，当把下拉二级菜单显示后，菜单到了ul的地盘了。还是用桌子的例子吧~~你同学桌子上的书翻到你的桌子上去了，你们的z-index都是0，属于平级的关系，这时候你哪能忍啊，必须得把你自己桌子上的书盖到你同学的书上面，或者不根本就不让他的书放到你桌子上。 但是呢，这时候你同学设置了个z-index=1，摇身一变成了你的老师，这时候级别要比你高一级，别说书放在你桌子上了，就算把桌子放在你桌子上，你也不敢吭个声~~
li 标签占满一整行，没有办法设置竖线的长度了。。。原因是在ul的css中设置了height line-height（主要是为了让字体垂直居中）这两个属性，那么元素的实际高度就是height，所以边框不是随着字体的大小来着。另一种情况是如果只设置了line-height的高度，那么元素的实际高度就是line-height的高度。 这时候解决办法是把line-height的取消，在ul加个display-flex, align-items-cneter, 就实现垂直居中了~~并且边框的大小也是随着字体的大小来着。
使用bootstrap的
三个步骤
1. 加上标签 ，因为Bootstrap用到了html5的特性，所以需要声明一下
<!DOCTYPE html>
2. 导入css和js
<script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
3. 套用class
<button class="btn btn-success">按钮</button>
遇到的问题：今天暂无
返回列表
评论