HTML、CSS网页制作常见问题（笔记01）

昨天做仿京东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">&#xe8bc;</span>