发表于： 2019-11-01 23:18:25
1 883
今日完成:
总结任务8,9的知识点
脑图如下:
扩展:
input文本和label对齐
默认状态下
即:
<div>
<label>我是中国人</label>
<input type="text">
</div>
文字和input是居中的。
但是经常设计图中有label的行高，或者input的高度设计，默认状态下，依然是居中的。
但是很多时候label和input要浮动，一旦浮动，后面的input标签就紧紧的贴住了label标签，也就造成了视觉上看到并没有居中。
即:
<div>
<label>我是中国人</label>
<input type="text"></div>
label {
font-size: 12px;
float: left;
}
input {
height: 20px;
}
所以通常可以控制label的padding-top，视觉上让它看起来是居中的
input单选框和label对齐
默认状态下，label和radio是不对齐的，
input是内联元素，但是它依然是可以设置高度和宽度的，因为它是内联可替换元素。
默认状态下，radio是有margin值的，但是这并不是它影响label和radio是不居中的
即:
<div>
<label>男x</label>
<input type="radio">
</div>
如图label对齐的是文字的基线
(基线，就是x的底端。)
label {
font-size: 30px;
float: left;
}
为label设置浮动:
radio紧紧的贴着label，并且位于顶端。
如果要让他们对齐
1.为input设置 vertical-align: middle;
代码:
label {
font-size: 50px;
vertical-align: middle;
}
input {
vertical-align: middle;
}
显示:
2.设置label的高度。
label {
font-size: 50px;
display: inline-block;
height: 140px;
vertical-align: middle;
}
input {
vertical-align: middle;
}
3.设置padding
总结：
同时设置label和input的vertical-align: middle就可以实现input文本和label对齐
扩展:
关于lable在input中的灵活运用
举例说明如下:
1.常规 input 使用
<input type="radio" name="demo" />单选1
<input type="radio" name="demo" />单选2
<input type="radio" name="demo" />单选3
<input type="radio" name="demo" />单选4
<input type="radio" name="demo" />单选5
我们只有点击相应的圈圈才能选中，体验很不好。
2.使用 label 标签
<input type="radio" name="demo" id="temp1" /><label for="temp1">单选1</label>
<input type="radio" name="demo" id="temp2" /><label for="temp2">单选2</label>
<input type="radio" name="demo" id="temp3" /><label for="temp3">单选3</label>
<input type="radio" name="demo" id="temp4" /><label for="temp4">单选4</label>
<input type="radio" name="demo" id="temp5" /><label for="temp5">单选5</label>
我们给 input 框设置相应的 id ，label 标签的 for 属性必须对应相应的id。这样当我们点击相应的文字时也是可以被选中的，所以这样的 input 框大大增加了用户体验性。
3.使用 label 嵌套式标签
<label><input type="radio" name="demo" />单选1</label>
<label><input type="radio" name="demo" />单选2</label>
<label><input type="radio" name="demo" />单选3</label>
<label><input type="radio" name="demo" />单选4</label>
<label><input type="radio" name="demo" />单选5</label>
为了开发效率我们可以使用第3种，以嵌套的方式来使用，这样我们不用为设置 id 名字而发愁，也不用设置 label 标签中的 for 属性了。
扩展:
使用css修改input框中checkbox的样式
修改复选框的样式，使得界面更美观或者适应新的需求。
通常修改的方式有两种:
1.是链入图片
链入图片的设计方式比较简单，但是需要预先设计或者下载图片
2.是使用纯css的方法进行修改。
实现步骤
1、单个input[type=checkbox]样式修改
在设计时，我们使用<lable>标签的for属性，绑定到input标签上（for属性应对应到input标签中的id）
html
<input id="color-input-red" class="chat-button-location-radio-input" type="checkbox" name="color-input-red" value="#f0544d" />
<label for="color-input-red"></label >
css:
/*lable标签的大小、位置、背景颜色更改，在css选择时，“+”代表相邻元素，即当前元素的下一元素*/
#color-input-red +label{
display: block;
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 2px;
left: 15px;
background: rgba(240, 84, 77, 1);;
}
/*当input框为选中状态时，lable标签的样式，其中在css选择时，“：”表示当前input框的值，即checked；
该部分主要对显示的“对号”的大限居中方式，显示颜色进行了设置*/
#color-input-red:checked +label::before{
display: block;
content: "\2714";
text-align: center;
font-size: 16px;
color: white;
}
content表示在方框中显示的内容，"\2714"、"\2713"都表示对号，只是显示的瘦弱程度不同，
最后在css中将原先的input[type=checkbox]的内容进行隐藏。
input[type=checkbox]{
visibility: hidden;
}
显示效果如下：
ps:更正不是不能直接在input中直接设置样式,而是需要先清除默认样式,
但是一般,CSS美化radio和checkbox的样式magic-check，就是利用伪元素:before和:after来实现的；
具体是为每个真正的表单元素radio和checkbox搭配一个label，然后隐藏真正的radio和checkbox，label元素单击的时候隐藏的radio或者checkbox实际上是处于checked状态，这跟label的具体用法有关；利用label的伪元素:before和:after来实现美化radio和checkbox。
input[type=radio]{
/*css中将原先的input[type=radio]的内容进行隐藏。*/
display: none;
}
#input-style +label{
display: block;
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 2px;
left: 15px;
background: rgba(240, 84, 77, 1);;
}
#input-style:radio +label::before{
display: block;
content: "";
text-align: center;
font-size: 16px;
color: white;
}
遇到问题;
做的domo是错的,怎么该怎么错,改的有点皮了,又看了从display:none,与visibility: hidden的区别,伪类的应用,lable的组合应用,感觉自己陷入怪圈怎么改怎么错
收获:关于隐藏更具体的知识应用,lable的应用
明日计划;
调整心态,继续修改任务10,然后继续任务14
返回列表
评论