前端（HTML+CSS）高频面试题（2）

前端（HTML+CSS）高频面试题（2）

1. 常见的表单元素有哪些？

答：

• 1）<input>标签：是最重要的表单元素，使用<input>来定义,输入类型是由类型属性type定义。
  根据不同的tpye属性，显示为不同形态。

• 2）文本输入：<input type="text">定义用于文本输入的单行输入字段。

• 3）密码输入：<input type="password">定义密码字段。该字段中的字符被掩码。

• 4）单选按钮：<input type="radio">定义单选按钮。单选按钮允许用户在有限数量的选项中选择其中之一。

• 5）复选框：<input type="checkbox">定义复选框。复按钮允许用户在有限数量的选项中选择其中零个或者多个选项。

• 6）普通按钮：<input type="button" value="点我">定义普通按钮。Value 属性定义按钮显示的文本。

• 7）提交按钮：<input type="sumbit" value="登录">用于定义像表单处理程序提交表单的按钮。表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

• 8）重置按钮：<input type="reset" value="清空">

• 9)文件上传按钮：<input type="file">定义输入字段和浏览器按钮，供文件上传。

• 10）图像形式的提交按钮：<input type="image">定义图像形式的提交按钮。src属性和alt属性必须与<input type="image">结合使用。

• 11）<select>标签：定义下拉列表,长和option连用。

• 12）<textarea>标签：定义多行输入字段（文本域）。

2.请简述一下盒模型的组成？

答：

• 概念：css盒模型本质是一个盒子，封装周围的html标签，它包括：外边距，边框，填充（内边距）和实际内容

• 内容 content :
  • width: 设置宽度
  • height: 设置高度
• 内边距（填充区域）padding ：
  • 单边内边距：padding-top padding-bottom padding-left padding-right
  • 简写 :
    • 一个值：表示四个方向的内边距值。
    • 两个值：分别表示上下，左右的内边距值
    • 三个值：分别表示上，左右，下的内边距值
    • 四个值：分别表示上，右，下，左的内边距值
• 边框 border :
  • border-width
  • border-style :
    • none 定义无边框
    • dotted 定义点状边框
    • dashed 定义虚线边框
    • solid 定义实现边框
    • double 定义双线。双线的高度等于border-width的值
  • border-color
• border: 1px solid red;
• 外边距 margin :
  • 单边外边距 ： margin-top margin-bottom margin-left margin-right
  • 简写：
    • 一个值：表示四个方向的外边距值。
    • 两个值：分别表示上下，左右的外边距值
    • 三个值：分别表示上，左右，下的外边距值
    • 四个值：分别表示上，右，下，左的外边距值
• 外边距传递和塌陷
  • 给父级设置边框或内边距
  • 给父级设置溢出隐藏 overflow:hidden,实际上是触发BFC

实用小技巧

	<style>
        .div1 {
            width: 100px;
            height: 100px;
            border-width: 50px;
            border-style: solid;
            border-color: red yellow green blue;
        }
        .div2 {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: red yellow green blue;
        }
        .div3 {
            width: 0;
            height: 0;
            border-width: 200px 200px 0 0;
            border-style: solid;
            border-color: red yellow green;
        }
        .div4 {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: red transparent transparent transparent;
        }
    </style>
	<div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>

3. css复合选择器有哪些？

答：

• 群组选择器

  /* 
                群组选择器
                    多个选择器组合到一起用逗号分隔
             */
            .box,h3,p,span {
                color: gold;
            }
  

• 交集选择器

   /* 
               交集选择器
                   用两个或者两个以上条件寻找
                   即有div又有.box1类名
            */
           div.box1 {
               color: deeppink;
           }
  

• 子代选择器

  /* 
                子代选择器
             */
            .wrap>.box {
                color: blue;
            }
  

• 后代选择器

  /* 后代选择器 */
           .wrap .box {
               color: gold;
           }
  

• 伪类链接选择器

  • :link 未访问状态
  • :visited 已访问状态
  • :hover 鼠标悬停状态
  • :active 鼠标点击那一刻

4. 块级元素和行内元素的区别？

答：

常用块级标签及特点

• div
  • 最常用的块级标签
  • 网页应用场景
• p
  • 段落标签
• h1-h6
  • 标题标签
• 特点：垂直上下排列，独立成行

常用内联标签及特点(行内标签)

• span
  • 常用的行内标签，用户图标
• strong
• b
  • 加粗
• em
• i
  • 斜体
• sub
  • 定义下标字
• sup
  • 定义上标字
• del
• s(基本淘汰)
  • 删除线
• 特点：默认在一行排列，超出一行会折行

5. 浮动产生的问题？清浮动的方案？

答：

浮动的问题

标签浮动以后，脱离的正常文档流，导致父标签无法被撑开，会影响后续正常布局

清浮动的几种方法

• 给浮动标签的父标签固定高度（不够灵活）

• 在浮动标签的最后加一个div（块标签），标签本身不符动，且添加样式 clear:both;(代码冗余)

• 给父标签加overflow属性，overflow为visible以外的其他值时可以帮助实现

• 推荐方法：给浮动标签的父标签添加 .clearfix

  • .clearfix {
    	*zoom:1; //这是针对于IE6/7的
    }
    .clearfix:after {
    	content:"";
    	clear:both;
    	display:block;
    }
    

6. 伪元素如何创建？

答：

伪元素的创建

• div:after {
  	
  }
  //向当前元素的最后一个子元素后添加一个元素
  div:before {
  	
  }
  //向当前元素的第一个子元素前添加一个元素
  

  .clearfix {
     *zoom:1; //这是针对于IE6/7的
  }
  .clearfix:after {
     content:"";
     clear:both;
     display:block;
  }