发表于： 2019-11-03 23:50:36
2 824
今日完成:
task10收尾
遇到问题:
选中按钮样式的伪元素,偏移,
原因:有个全局属性的 box-sizing: border-box;
在捕捉伪元素的label元素中有边框,边框向内,label元素内容减去边框距离,计算出现偏差,所以偏移
思考:这个属性那里来的,自己没有主动去设置
结果:这个任务引用了bootstrap框架,全局属性的 box-sizing: border-box;是框架自带的
设置damo验证
.box111{
width: 40px;
height: 80px;
background: yellow;
border: 10px solid red;
}
实验表明,bootstrap框架确实默认带有全局属性的 box-sizing: border-box
遇到问题:文本与按钮不再统一水平线上
解决:为input(即;label)添加:vertical-align: middle;
使它们垂直对其
遇到问题;宽度不够,文本自动折叠,
设置flex-shrink:0,仍然摺叠,
原因;栅格是弹性元素,不是弹性盒子,所以为子元素设置flex-shrink:0设置无效
关于bootstrap样式的认知更新及灵活运用
1.栅格是弹性元素,不是弹性盒子,它不能赋予子元素弹性元素属性,
即:它本身可以设置和继承一些项目属性,但是设置容器属性是无效的,因为,
它的子元素不是弹性元素,除非再次声明:d-flex,成为弹性盒子,可以使其子元素变为弹性元素
2.栅格中的子元素直接设置margin不会元素塌陷
3.关于字体折叠,可以为父元素设置弹性盒子,再为字体设置flex-shrink:0,
ps:
1.如果同级有兄弟元素,要考虑是否为兄弟元素也设置flex-shrink:0,比如是图形,图片之类的不设置,就可能变形
2.元素本身不变,变小的是它们的内外边距
4.关于垂直居中align-items-center
有时候不是它没有生效,而是元素本身的一些默认样式的问题,实际上根本没有高度让它垂直居中,
这时要想从视觉效果上,看着对齐要想其他办法,比如margin
比如:
遇到问题:
按照damo例子挪过去,按钮只有为label设置的未选中样式,按钮选中样式失效
解决:
<input id="is1" type="radio" name="sex" value="#">
<label for="is1"></label>对口箱
把label设置在,input标签的下面,当把label标签设置在input上面时,input属性无法触发
原因:待查询
思考:怎么设置多个单选框?
方法1:
在同一容器中,根据之前总结的,浏览器识别name="#",#相同的为一组,所以可以通过设置两组不同的name名,
使单选框分为两组,相互独立
代码;
...
<div class="col-md-4">
<input id="is3" type="radio" name="sex" value="#">
<label for="is3"></label>飞机盒
</div>
<div class="col-md-4">
<input id="is111" type="radio" name="se" value="#">
<label for="is111"></label>对口箱
</div>
...
显示:
方法二:
用表单标签form隔开
<body>
<input type="radio" id="aaa5"name="aaa"><label for="aaa5"></label>草
<input type="radio" id="aaa6"name="aaa"><label for="aaa6"></label>树
<input type="radio" id="aaa4"name="aaa"><label for="aaa4"></label>花
<form>
<input type="radio" id="aaa1"name="aaa"><label for="aaa1"></label>花
<input type="radio" id="aaa2"name="aaa"><label for="aaa2"></label>草
<input type="radio" id="aaa3"name="aaa"><label for="aaa3"></label>树
</form>
<form>
<input type="radio" id="aaa7"name="aaa"><label for="aaa7"></label>花
<input type="radio" id="aaa8"name="aaa"><label for="aaa8"></label>草
<input type="radio" id="aaa9"name="aaa"><label for="aaa9"></label>树
</form>
</body>
显示:
扩展:
代码:
<div>
<input type="radio" id="aaa1"name="aaa"><label for="aaa1"></label>花
<input type="radio" id="aaa2"name="aaa"><label for="aaa2"></label>草
<input type="radio" id="aaa3"name="aaa"><label for="aaa3"></label>树
</div>
<div>
<input type="radio" id="aaa4"name="aaa"><label for="aaa4"></label>花
<input type="radio" id="aaa5"name="aaa"><label for="aaa5"></label>草
<input type="radio" id="aaa6"name="aaa"><label for="aaa6"></label>树
</div>
<div>
<input type="radio" id="aaa4"name="aaa"><label for="aaa4">花</label>
<input type="radio" id="aaa5"name="aaa"><label for="aaa5"></label>草
<input type="radio" id="aaa6"name="aaa"><label for="aaa6"></label>树
</div>
显示:
效果:
第三排id,for与第二排一致,点击第三排input单选框,第二排对应单选框激活,
且随意name怎么设置都有效果,
结论:
label for对应的input中id具有唯一性,但是可以多次设置,根据html中的位置,
先读取到的呈现效果,之后的,就相当与,第二个触发点
可以想象成,一个灯泡有两个开关,可以把它点亮,
思考:怎么样可以点击文字的同时,触发与它对应的选框
(在label已经被用来设置input样式的情况下)
实验一:
在设置一个label标签,包裹原来的原本的label.
显示,文字进入input样式中
原因:css中label设置全局样式,每一个label都相当于一个input
解决:为label设置一个类,为这个类设置样式
让label标签不包含这个类时,就仅仅只是input与文字链接的一个通道
代码如下:
css
input[type=radio]{
/*css中将原先的input[type=radio]的内容进行隐藏。*/
display: none;
}
.input-style{
/*捕捉绝对定位的边框,同时设置外边距*/
position: relative;
display: inline-block;
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid rgb(219, 219, 219);
margin-right: 6px;
vertical-align: middle;
margin-top:2px;
}
input:checked+ .input-style{
/*在input单选框在选中的时候，原有before的单选框变为蓝色实心框*/
background:rgb(29,122,217);
border: 1px solid rgb(29,122,217);
}
input:checked+ .input-style::before{
/*添加label::after为白色圆，并将其定位到before的红色实心框中间。
从而达到重叠的效果，实现红色圆框+白色圆心的效果。*/
display: inline-block;
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
left: 4px;
bottom: 4px;
background-color: white;
}
html
<div class="col-md-4">
<input id="is1" type="radio" name="sex" value="#">
<label for="is1" class="input-style"></label>
<label for="is1">对口箱</label>
</div>
<div class="col-md-4">
<input id="is2" type="radio" name="sex" value="#">
<label for="is2" class="input-style"></label>
<label for="is2">天地盒</label>
</div>
<div class="col-md-4">
<input id="is3" type="radio" name="sex" value="#">
<label for="is3" class="input-style"></label>
<label for="is3">飞机盒</label>
</div>
显示:
ps:当页面中有多个input的type="#"时,如果只需要改某个的type样式,需要用[#]特指,
因为,
input{
display;none
}
是input标签全局的样式都消失
举例:多个type="#",只需要重新设置单选框(radio)样式
可以在css中设置:
input[type=radio]{
/*css中将原先的input[type=radio]的内容进行隐藏。*/
display: none;
}
[type=radio]特指radio
ps:
代码
<input id="is10" type="radio" name="sex" value="#">
<label for="is10" class="input-style"></label>
<label for="is10">
三层A瓦优质
</label>
与
<label for="is10">
<input id="is10" type="radio" name="sex" value="#">
<label for="is10" class="input-style"></label>
三层A瓦优质
</label>
它们都能在实现点击文字,选中与之对应选框
但是,显示如下图中
在按钮与文本之间有一段空白区域,前者点击无法生效,后者点击生效
所以,在实际应用中,后者代码布局更好
思维导图:
遇到问题:
1.百度问题的姿势不对
2.谷歌开发者调试认知不够全面
3.基础不够牢靠
4.无效努力太多,效率极低,有点自闭
收获:
认清自己不足,要多思考的情况下,朝正确的方向去努力
明日计划:
要将小课堂了,先扩展一波关于居中的知识,还有怎么使用ppt,怎么直播
返回列表
评论