发表于： 2019-11-02 23:02:55
1 1006
今日完成:
经过师兄的指导,结合任务十重新整理归纳input,单选框所学到的知识
单选框默认样式
html中的单选框样式
<div>
<input type="radio" name="aaa">花
<input type="radio" name="aaa">草
<input type="radio" name="aaa">树
</div>
如下图:显示为代码的初始样式
type="#"代表input选框的样式
例如:
type="password"密码字段
type="radio"单选框
type="checkbox"复选框
在单选框中,默认状态,都是未选中状态
只有第一次点击之后,才会出现选中状态,且一次只能选中一项,
后一个触发,前一个就会失效
ps:
1.当需要单选框,默认状态,有个起始选中选中选项时,只需要在input标签中增加checked
1.当需要单选框,默认状态,有个起始选中选中选项时,只需要在input标签中增加checked
代码:
iv>
<input type="radio" name="aaa">花
<input type="radio" name="aaa" checked>草
<input type="radio" name="aaa">树
</div>
起始状态显示:
如图,添加了checked的iuput选项,其实状态为选中状态
checked:可以理解为默认选中项,或者点击都可以
2:一组的input标签中,name="#"必须一致,浏览器才会识别它们为同一组,
如果,name="#"不一致,浏览器会识别name="#"不一致的input选项为相互独立的个体
关于label标签
label一般是与input组合使用
用法1;
之前总结过,选项框只有点击在选项框的上面,才能选中,而点击在与之关联的文本上面,却不能选中,
这在用户体验中是很不好的.(包括输入框)
这时.用label标签,
1.包裹住与选项框对应的文本.
2.让label与input标签产生联系,即label for="xx1",
用for为label随意设置一个名字,然后在input标签中,设置id="xx1",
这样,label就与input产生了联系
代码:
<input type="radio" id="aaa1" id="bb1" name="aaa"><label for="aaa1">花</label>
<input type="radio" id="aaa2" id="bb2" name="aaa"><label for="aaa2">草</label>
<input type="radio" id="aaa3" id="bb3" name="aaa"><label for="aaa3">树</label>
显示:
这时点击文本,就能选中与之对应的选项框
ps:
1.对应,就是label中的for="#"与input中的id="#"对应
2.因为id具有唯一性,所以,for="#"中#不能设置一样的名称,可以加数字作为区别(#1,#2,#3...)
3.label和input中的通过for="#1"与id="#1"产生联系,是它们独有的
如:为p标签设置这种联系
<div>
<input type="radio" id="aaa1" id="bb1" name="aaa"><label for="aaa1"></label>
<p for="bb1">花</p>
<input type="radio" id="aaa2" id="bb2" name="aaa"><label for="aaa2"></label>
<p for="bb2">草</p>
<input type="radio" id="aaa3" id="bb3" name="aaa"><label for="aaa3"></label>
<p for="bb3">树</p>
</div>
点击文本无效,点击iuput选框本身生效
结论:label和input中的通过for="#1"与id="#1"产生联系,是它们独有的
用法2
当我们需要美化input边框时,就需要用到label
具体如下:
在html中,必须要讲文本从label标签中摘出
原因:这里label代表input的新样式,有文本样式不明确,会出现错误(样式会蹦)
待解决问题:这种情况下,如何还能点击文本,就能选中与之对应的选框?
<div>
<input type="radio" id="aaa1" id="bb1" name="aaa"><label for="aaa1"></label>花
<input type="radio" id="aaa2" id="bb2" name="aaa"><label for="aaa2"></label>草
<input type="radio" id="aaa3" id="bb3" name="aaa"><label for="aaa3"></label>树
</div>
css中:
input {
display: none;
}
label {
position: relative;
... ...
}
其中
input {
display: none;
}
意思为取消默认样式
label {
position: relative;
... ...
}
是取消之后设置的新的样式
ps:
css代码不能这样设置:
input {
display: none;
}
input{
position: relative;
... ...
}
即:input取消旧样式,再直接为input直接设置新样式
这样浏览器就会恢复默认的旧样式
这时就体现出了label的用途---用label为input设置新的样式
思考:可以这么想,input默认样式辨识度(权重)很高,所以即便先声明input{display:none}去除默认样式,然后input{新样式},
浏览器重新识别input标签后,仍然输出默认样式,而不是新样式
而label的作用相当于,在input外套上一层外衣,浏览器识别就会识别input{display:none}去除默认样式,和label的样式,
而通过for与id的联系,这样浏览器识别的label这个外衣设置的样式,但是这个label样式里面藏的还是input的内核,
解决input默认样式辨识度(权重)很高的问题
同理:当一个页面里需要多个单选框的样式时,可以为label设置类,为label套上一层外衣,
即:以label为中转站,设置不同的类,来达到同一个页面为input选框设置不同的样式的目的
label {
position: relative;
... ...
}
相对定位,用来捕捉伪类定位,即选中后出现的小圆点(选中样式)
input:checked+label {
... ...
}
设置选中的input的样式
+ 是兄弟选择器,获取选中后的label元素即;点击input后label生效{style}(类似鼠标悬停hover)
input:checked+label::before {
display: inline-block;
... ...
}
1.因为label是行内元素,宽高无效,要设置样式需要改变样式,详见扩展
2.css伪元素:before和:after用法详解,详见扩展
ps:
1.两个伪元素在真正页面元素内部之前和之后添加新内容,在这里得不到体现(绝对定位)
2. 在这里用到的是它们在html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式
的这种特性,用来为选项框触发后的小圆点(触发样式)设置样式即:代码中::before或者::after都行
整个damo的代码
<title>花草</title>
<style type="text/css">
input {
display: none;
}
label {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid blue;
border-radius: 50%;
}
input:checked+label {
background-color: rgb(239, 66, 56);
border: 1px solid red;
}
input:checked+label::before {
display: inline-block;
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
left: 6px;
bottom: 6px;
background-color: white;
}
</style>
</head>
<body>
<div>
<input type="radio" id="aaa1" id="bb1" name="aaa"><label for="aaa1" class="ddd"></label>花
<input type="radio" id="aaa2" id="bb2" name="aaa"><label for="aaa2" class="ddd"></label>草
<input type="radio" id="aaa3" id="bb3" name="aaa"><label for="aaa3" class="ddd"></label>树
</div>
</body>
</html>
浏览器显示效果:
初始状态:
点击,单选状态:
扩展:
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。
这三者是可以互相转换的，使用display属性能够将三者任意转换：
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
1.行内元素
行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助
行内元素特征：
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
代码:
<style type="text/css">
span {
width: 120px;
height: 120px;
margin: 1000px 20px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<i>不会自动换行</i>
<span>行内元素</span>
</body>
显示:
2.块状元素
块状元素代表性的就是div，
其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。
不过为了可以方便解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。
块状元素特征：
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
代码;
<style type="text/css">
div {
width: 120px;
height: 120px;
margin: 50px 50px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<i>自动换行</i>
<div>块状元素</div>
<div>块状元素</div>
</body>
显示:
3.行内块状元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。
因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
行内块状元素特征：
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
代码;
<style type="text/css">
div {
display: inline-block;
width: 100px;
height: 50px;
background: lightblue;
}
</style>
</head>
<body>
<div>行内块状元素</div>
<div>行内块状元素</div>
</body>
显示:
扩展:
css伪元素:before和:after用法详解
css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，
可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。
一、伪元素:before和:after用法
这个两个伪元素在真正页面元素内部之前和之后添加新内容（当然了，可以对伪元素应用定位可以置于任何位置）
如代码:
<p>wonyun!</p>
<style>
p:before{content: "hello "}
p:after{content: "you are handsome!"}
</style>
等价于下面的html结构:
<p>
<span>hello </span>
wonyun!
<span> you are handsome!</span>
</p>
由此可知：伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
content属性的值具体有以下几种情况：
1. 字符串，字符串作为伪元素的内容添加到主元素中
注意：字符串中若有html字符串，添加到主元素后不会进行html转义，也不会转化为真正的html内容显示，而是会原样输出
2.attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值
好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图片加载失败用一段文字替换。
3.url()/uri(), 引用外部资源，例如图片；
4. counter(), 调用计数器，可以不使用列表元素实现序号问题。
... ...
遇到的问题:
基础不牢,属性理解狭窄,有偏差,所以一个问题陷入死循环中
收获:
虽然不想再碰到这种情况,但确实感觉到在师兄指导下自己完全解决了这个问题之后,
与这个问题相关联的属性,在实际应用中的认知一下深入清晰了很多.
明日计划:继续task14,15
返回列表
评论