发表于： 2019-09-24 00:18:37
1 863
今天完成的事情：
开始做任务7投票页面
header
头部分上中下三部分
整体绝对定位
上部整体用绝对定位付出文档流,
文本用flex布局,margin:auto实现居中
两边图形用绝对定位,放在文本两边
中间用flex布局，子元素两头对其
等边三角形
width: 20px;
height: 20px;
border-left: 173.2px solid red;
border-top: 100px solid blue;
border-right: 173.2px solid green;
border-bottom: 100px solid black;
去掉盒子的宽度（都变为0）
四个三角形组成的矩形就出来了。。。如果我们想要三角形只需要把其中的三个三角形（即边框）的颜色变为透明即可
margin:0 auto;
width: 0px;
height: 0px;
border-left: 173.2px solid transparent;
border-top: 100px solid transparent;
border-right: 173.2px solid green;
border-bottom: 100px solid transparent;
而三角形的角度只需要通过调节边框的长度即可控制，具体多少就是简单的数学问题
了（三角函数，勾股定理。。）
长度大概按 1 : 2 : 1.732 来就是正三角形了
要求需要可以用 transform：rotate（指定角度）；旋转即可;
1:2:1.732详解;
2是出现的三角形的长斜边长(具体看需求);
然后根据这个需求;
1.732设置等边三角形的高(边框宽度)1.732;
1另一边框宽度1(长的一半,等边三角形特性);
运用学到的知识，做等边三角形
main部分
设置margin-top消除重叠
设置三个盒子，每个盒子中有三个正方形
为盒子设置display:flex，使三个正方形同列
遇到问题，flex属性使三个盒子强制同一列
解决，添加flex-wrap:wrap;
使之换行
然后设置文字，设置悬浮出现小图标
遇到问题，设置浮动不显示
解决;为浮动图标设置高度，
思考，为什么插入图片有高度却没有撑开父元素？
思考，浮动的居中的距离计算
在盒子内的元素，要在盒子与盒子之间居中
要在两个盒子外边距边框宽度之和，减去盒子高度除以二，
这个结果要再加上，把盒子从边框内挪到边框外的距离，
也就是盒子本身的高度。
设置投票页底部，绝对定位，步骤同顶部
遇到的问题：
遇到问题;知道三角形需要用绝对定位来做，但是不知道怎么做，才能用的数据最小，容易微调
原来的思考，作用于整个主体为对象
解决:问的师兄，作用与主体的一个子元素为对象，用负值来实现效果，
并且绝对定位独立于文档流，不影响原来子元素中的文本定位
思考：算是思维的盲点，没想过通过负值来实现，思维僵硬，属性不能灵活运用，
平时要多思考，多练习
遇到问题css ❌怎么做
解决;:待解决
遇到问题:等边三角形
解决:
等边三角形
width: 20px;
height: 20px;
border-left: 173.2px solid red;
border-top: 100px solid blue;
border-right: 173.2px solid green;
border-bottom: 100px solid black;
去掉盒子的宽度（都变为0）
四个三角形组成的矩形就出来了。。。如果我们想要三角形只需要把其中的三个三角形（即边框）的颜色变为透明即可
而三角形的角度只需要通过调节边框的长度即可控制，具体多少就是简单的数学问题
了（三角函数，勾股定理。。）
长度大概按 1 : 2 : 1.732 来就是正三角形了
要求需要可以用 transform：rotate（指定角度）
遇到问题，margin:auto,和flex布局都无法居中
找到原因：其它三个边设置的是透明，并不代表不存在
解决:用margin—left调试
底部用padding填充背景色，实现范例效果
遇到问题，flex属性使三个盒子强制同一列
解决，添加flex-wrap:wrap;
使之换行
遇到问题，设置浮动不显示
解决;为浮动图标设置高度，
思考，为什么插入图片有高度却没有撑开父元素？
思考，浮动的居中的距离计算
在盒子内的元素，要在盒子与盒子之间居中
要在两个盒子外边距边框宽度之和，减去盒子高度除以二，
这个结果要再加上，把盒子从边框内挪到边框外的距离，
也就是盒子本身的高度。
设置投票页底部，绝对定位，步骤同顶部
遇到问题显示结果在中部
<div class="footer">
<div class="footer_1">
<p class="footer_1_txt">投死</p>
</div>
</div>
footer{
display:flex;
align-items: center;
position:absolute;
width:100%;
height:188px;
background-color: rgb(41,189,224);
bottom: 0;
}
.footer_1{
display:flex;
align-items: center;
width: 490px;
height: 90;
background-color: rgb(251,180,53);
margin: auto;
}
.footer_1_txt{
font-size: 50px;
margin: auto;
}
原因：绝对定位基于当前屏幕，来实行定位
解决：应该用固定定位来实现范例效果
遇到问题:主题布局,覆盖顶部布局,底部布局又覆盖主题布局,
希望看到:顶部和底部同时覆盖主题布局
解决:z-index
思考:为什么会显示这样的效果?
顶部底部同样设置固定定位,主体显示为什么会在顶部之上,底部之下?
需要了解:css层叠上下文
实验:
代码
<style>
.father-green {
width:500px;
height:300px;
background-color:green;
}
.son-red {
width:200px;
height:100px;
background-color:red;
display:inline-block;
}
.subson-yellow {
height:50px;
width:200px;
background-color: yellow;
}
.son-purple {
width: 200px;
height:100px;
background-color:purple;
display:inline-block;
margin-left:-50px;
}
.mather-pink {
width: 300px;
height:100px;
background-color:pink;
}
.daughter-blue {
width:100px;
height:50px;
background-color:blue;
margin-top:-20px;
}</style><body>
<div class="father-green">
<div class="son-red">
<div class="subson-yellow">
我是孙子辈的我是孙子辈的我是孙子辈的
</div>
</div>
<div class="son-purple">
我是第二个子元素
</div>
</div>
<div class="mather-pink"><div class="daughter-blue">daughter-blue</div>
</div>
从上面案例可以看出一个规律。
1. 普通文档流中遵循：“后来者居上”。
* 当两个元素都为块元素时，默认越后面的元素层级越高，但是背景的层级比文字小。后来的块元素 也盖不住前面的文字。
* 当两个元素都为行内块和行内元素时，也是后来的元素比前面的元素层级高，但是与块元素不同的是行内块元素的背景层级比文字高。
* 行内元素和行内块元素的层级比块级元素高。
2. 浮动系列：
* 浮动和浮动比，后一个比前一个层级高
* 浮动和块元素比，浮动层级高
* 浮动和行内块比，行内块层级高
* 浮动和行内比，行内层级高
3. 定位的元素：
* 都为定位元素时，也遵循后一个元素比前一个元素高。
* 绝对定位和块元素比，绝对定位层级高
* 绝对定位和行内块元素比，绝对定位层级高
* 绝对定位和行内元素比，绝对定位层级高
* 绝对定位和浮动，绝对定位层级高。
总结：
层叠上下文
（border/background）< 负z-index < block块状盒子 < 浮动的盒子 < inline/inline-block水平盒子 < z-index:auto 或者 z-index:0 < 正z-index（定位并设定了正的z-index值，z-index值越大 层级越高）
子从父原则
对于都是拥有层叠上下文的元素来说, 内部元素的层叠属性受限于其父元素的层叠顺序。
<style>
div {
text-align:center;
color:#333;
}
.div1 {
width: 500px;
height: 50px;
background-color:#cfc;
position:relative;
z-index:5;
opacity:0.5;
line-height:50px;
}
.div2 {
width: 500px;
height: 200px;
background-color:#fdd;
position:relative;
z-index:4;
margin-top:-10px;
background-color:rgba(255,255,221,0.8);
line-height:200px;
text-align:left;
}
.div3 {
width: 200px;
height: 50px;
background-color:#ffc;
position:absolute;
z-index:6;
top:0;
line-height:50px;
}
.div4 {
width:200px;
height:50px;
background-color:#ddf;
position: absolute;
z-index: 3;
bottom:0;
line-height:50px;
}
.div5 {
width: 200px;
height:100%;
background-color:#ff5;
position: absolute;;
z-index:1;
right:0;
top:0;
line-height:200px;
}
.div6 {
width: 500px;
height: 50px;
background-color:#cfc;
position: relative;
z-index:2;
margin-top: -8px;
}
</style></head><body>
<div class="div1">div1;position:relative;z-index5;</div>
<div class="div2">
div2;position:relative;z-index:4;
<div class="div3">div3;z-index:6</div>
<div class="div4">div4;z-index:3</div>
<div class="div5">div5;z-index:1</div>
</div>
<div class="div6">div6;position:relative;z-index:2;</div></body>
从图中可以看出 z-index为6的div3 却被z-index为5的div1盖住；z-index为1的div5却可以盖住z-index为2的div6；
这是因为 div3、div4和div5都受限于其父元素div2; div2的z-index比div1的低比div6高，那么其所有子元素不管z-index多少都比div1的层级低，都比div6的层级高；
可以这样来看层级
div1===========层级5
div2===========层级4
div3 =======层级4.3
div4 =======层级4.2
div5 =======层级4.1
div6 ========层级2
总结:浏览器比较层级先读取父元素的层级,后子元素的层级,
父元素内的子元素再相互比较
遇到问题:主体布局最后一排的元素没有显示
原因:没设底部外边距,被底部重叠
决绝:设置底部外边距
需要解决问题css ❌怎么做
.cha{
width: 40px;
height: 40px;
margin: auto;
position: absolute;
right: 20px;
top:20px;
}
.cha::before,
.cha::after{
content: "";
position: absolute; /*方便进行定位*/
height: 40px;
width: 1.5px;
top: 2px;
right: 9px; /*设置top和right使图像在20*20框中居中*/
background: white;
}
.cha::before{
transform: rotate(45deg); /*进行旋转*/
}
.cha::after{
transform: rotate(-45deg);
}
收获:
学会用css写三角形和等边三角形
学会用负值来实现定位
在盒子内的元素，要在盒子与盒子之间居中
要在两个盒子外边距边框宽度之和，减去盒子高度除以二，
这个结果要再加上，把盒子从边框内挪到边框外的距离，
也就是盒子本身的高度。
明天计划:
把待解决的问题解决
了解css层叠上下文
完成投票页面
开始结果页面
返回列表
评论