昨天做仿京东html网页的时候发现一些理解误区,做个笔记记录一下~
一.input元素不能包裹其他html标签
在 HTML 中,<input> 元素本身不能直接包含其他 HTML 标签如 <button>。<input> 是一个空元素(即自闭合标签),用来创建表单控件,比如文本输入框、复选框等,并且它不支持内部包含其他内容。
如果想在一个输入区域旁边或者内部视觉上放置按钮,可以考虑以下替代方案
使用 <div> 包含 <input> 和 <button>
你可以用一个 <div> 容器来包含输入框和按钮,并使用 CSS 来布局它们。
<div class="input-group">
<input type="text" placeholder="请输入...">
<button type="button">点击我</button>
</div>
二.focus与hover的区别
问题来源:去除点击搜索框出现的边框效果
首先要将鼠标触发效果设置为focus伪类,再设置outline:none,便可以去除效果
以下为相关知识点解答:
focus 和 hover 是 CSS 中的两个伪类,它们用于在特定条件下改变元素的样式,但两者触发的条件和应用场景有所不同。
:hover 伪类
触发条件:当用户将鼠标悬停在元素上时触发。(只需要鼠标悬停其上就可以触发效果,不用点击)
用途:常用于提供视觉反馈,比如高亮链接、显示隐藏的菜单项或按钮等。
适用元素:几乎所有的可见元素都可以使用 :hover,最常见的是链接(<a>)
:focus 伪类
触发条件:当元素获得焦点时触发。通常发生在用户点击、Tab 键导航或使用脚本设置焦点时。
用途:主要用于提高可访问性和交互性,比如突出显示当前操作的表单字段、按钮或链接。
适用元素:主要应用于可交互的元素,如输入框(<input>)、按钮(<button>)等。
因而设置点击input搜索框触发效果应该用focus,用hover只适用于鼠标悬停于链接之上
而且要去除点击表单就有的边框效果,需要加上outline:none
三.块级元素、行内元素、行内块元素、加浮动元素区别
块级元素(Block-level Elements)
特点:块级元素在页面上以块的形式显示,它们独占一行,可以设置大小。块级元素默认占据其父容器的全部宽度,即使没有设置宽度也是如此。
常见的块级元素:<div>, <p>, <h1> 到 <h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <section>, <article> 等。
CSS显示属性:可以通过CSS的 display: block; 将非块级元素转换为块级元素,并拥有块级元素属性。
行内元素(Inline Elements)
特点:行内元素不会从新的一行开始,会挤在一行,直到这一行放不下为止,不能设置宽高!!(除了图片和按钮等特殊情况),只能通过内容来决定大小。。行内元素只占用它们实际需要的空间,不会扩展到父容器的整个宽度。
常见的行内元素:<span>, <a>, <strong>, <em>, <img>, <input>, <label>, <button>, <select>, <textarea> 等。
CSS显示属性:可以通过CSS的 display: inline; 将块级元素转换为非块级元素,并拥有非块级元素属性。想将行内块元素变成可以设置大小需要用display:block转换;
行内块元素(Inline-block Elements)
特点:行内块元素结合了块级元素和行内元素的特点。会挤在一行,也可以设置大小。
CSS显示属性:可以通过CSS的 display: inline-block; 将非行内块元素转换为行内块元素,并拥有行内块元素属性。
应用场景:行内块元素非常适合用来创建按钮、图标或图片等,当你想要这些元素在一行中水平排列,同时还能单独设置它们的尺寸和间距时。
浮动元素(Floating Elements)
用途:浮动常用于实现多列布局,比如文本环绕图片的效果。
CSS属性:加上float: left; 或 float: right; 可以让元素浮动。
移动:元素加了浮动之后,只能通过left,right,投票,bottom来让元素实现在页面移动,且移动参照物是最近的加了relative(相对定位)的父级元素,加了浮动的盒子要加上绝对定位position:absolute。才能实现相对移动。
四.伪元素只能加在块级元素与行内块元素上
错误示例:search-l input::after(input是行内元素)
结果:加在input上的伪元素无法在页面呈现
search-l input::after 伪元素没有显示出来的原因是因为 ::after 伪元素只能应用于块级元素或行内块级元素,而 <input> 元素默认是替换元素(replaced element),它不支持 ::before 和 ::after 伪元素。
注意:即使input用display:inline-block转换为行内块元素也不可以加伪元素,因为 <input> 元素本身不支持 ::before 和 ::after。但是将span(行内元素)转换为行内块元素是可以添加伪元素的
五.怎么给span添加字体图标
错误例子:无法显现字体图标
错误一:span是行内元素,需要加上display:block才能有大小
错误二:给span加字体图标不是在css里加,而是 在html里添加
<span class="iconfont"></span>