2021-3-21 前端小组第二次考核题目整理

HTML 简答部分:

1.说说你对标签语义化的理解?

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重
c. 方便其它设备解析,以意义的方式来渲染网页
d. 便于团队开发和维护,语义化更具可读性,减少差异化

2.块级元素与行级元素分别有什么特点?

块级元素:

  1. 总是在新行开始
  2. 高度,行高,内边距外边距都可控
  3. 宽度默认是容器的100%。除非重新设定
  4. 可以容纳内联元素(文本元素),与其他块级元素
    行级元素:
  5. 和其他元素在同一行
  6. 高,行高,内边距与外边距不可改变
  7. 内联元素只能容纳文本或其他内联元素

3.元素的alt和title有什么异同?

在alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字

4.说出三种在定宽高的块元素中水平竖直居中的方法

  1. postion :absolute;+margin:auto;+top,bottom,left,right=0;
    四方都为0,margin:auto;
  2. postion:absolute;+top:50%;left:50%;+translate(-50%,50%)
    元素尺寸不固定
  3. postion:absolute;+top:50%;left:50%+margin:-元素宽度一半 0 0 -元素高度一半;
    定位,50%,margin负距

5.CSS标签优先级排序以及优先级相同时应该如何选择?

元素选择器:1
类选择器:10
id选择器:100
元素标签:1000
!important声明的样式优先级最高,如果冲突再进行计算
如果优先级相同,则选择最后出现的样式
继承得到的样式的优先级最低

6.用纯CSS创建一个三角形的原理是什么?

答:基本原理:首先给一个块级元素的宽高设置为0,然后将不需要的边框设置为透明,再给需要的边框设置颜色等参数
代码如下:

<style>
	div{
		height: 0;
		width: 0;
		border: 50px solid transparent;
		border-top: 50px solid blue;
	}
style>

7. 如何实现元素的显示隐藏,都有哪些方法,各自的优缺点

(1)display 使用none值会让元素从文档中直接删除,
优点:简单暴力,不需要多余代码。不占空间,对布局没有影响
缺点:元素从文档删除,不利于SEO
(2)text-indent:-999em;当给它一个足够大的负值,大到一般我们浏览器无法显示
优点:利于搜索引擎
缺点:他的作用其实就是把文字提到段落前面,不影响宽度,但会影响布局
(3)postion 假如一个元素的距离我们视窗足够大,大到浏览器也无法显示
缺点:用法太死,不能随意修改
(4)visibility :hidden;
优点:利于SEO优化
缺点:该属性会继承,想要让子元素能被看见,就要给子元素多写一个
visibility :visible;
(5)opacity:0 设置透明度0,视觉上隐藏

(6)overflow:hidden;

8.讲一下浮动会带来什么问题,如何清除浮动?

浮动问题:

  1. 多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0
  2. 若浮动元素的后面跟非浮动元素,非浮动元素会紧随其后浮动起来
  3. 若浮动元素前面还有统计元素没有浮动则会影响页面结构
    如何清除浮动:
  4. 在最后一个浮动标签后面添加一个标签给其设置clear:both;属性
    缺点:添加了无意义的标签
  5. 给父级添加overflow:hidden;属性…

9.什么是BFC,怎样触发BFC?

BFC可以理解为一个区域(块级格式化上下文),在这个区域内的元素无论如何布局,都不影响区域外的元素
触发BFC的条件:
(1)浮动元素:float除none以外的值
(2)绝对定位元素:postion(absolute,fixed)
(3)display为inline-block,table-cells,flex
(4)overflow:除visible以外的值

10. 圣杯布局与双飞翼布局是什么,结局了什么问题,主要实现方式以及区别在哪里

圣杯与双飞翼布局都是为了实现一个两侧宽度固定
,中间宽度自适应的三栏布局

其主要实现方式都为三栏全部浮动,但左右两栏加上负margin让其跟中间栏div并排。不同在于解决“中间栏div内容不被遮挡”问题的思路不一样

圣杯布局为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后 ,将左右两个div用相对布局postion:relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div

双飞翼布局为了中间div内容不被遮挡,直接在中间div呢你不创建子div用于防止内容,在该div里用margin-left和margin-right为左右两栏留出位置

HTML代码题:

  1. 用html和css实现一个圆形在矩形容器中左右循环滑动的效果

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
      .kuang{
        border: 1px solid black;
      }
      .yuan{
        width: 100px;
        height: 100px;
        background-color: blanchedalmond;
        border-radius: 50%;
        animation: dong 5s linear infinite alternate;
      }
      @keyframes dong {
        from{
          margin-left: 0px;
        }
        to{
          margin-left: 93%;
        }

      }
    style>
head>
<body>
  <div class="kuang">
    <div class="yuan">

    div>
  div>
body>
html>

  1. 请只使用html编写一个基础form表单,要求含有文本输入框、单选框(其中默认选定一个选项)、复选框、提交按钮,且行与行间有换行,最终达到下图效果

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>

head>
<body>
<form action="">
  name: <input type="text" name="name">
  <br>
  sex:
  <br>
  <input type="radio" name="sex" value="male" checked>Male
  <input type="radio" name="sex" value="female">Female
  <br>
  <input type="checkbox" name="interest" value="male">Male
  <input type="checkbox" name="interest" value="female">Female
  <br>
  <input type="submit" value="submit">
form>
body>
html>

2021-3-21 前端小组第二次考核题目整理_第1张图片

你可能感兴趣的:(前端入门学习笔记,html,css)