• 前端第一阶段测试


    选择

    1、【单选】下列哪个是子代选择器 A

    A、p>b
    B、p b
    C、p+b
    D、p.b

    2、【单选】下述有关css属性position的属性值的描述,说法错误的是?B

    A、static:没有定位,元素出现在正常的流中
    > B、fixed:生成绝对定位的元素,相对于父元素进行定位
    >fixed就是固定定位不要想复杂了
    C、relative:生成相对定位的元素,相对于元素本身正常位置进行定位
    D、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位

    3、【单选】元素的alt和title有什么异同,选出正确的说法?B

    A、表现一样
    > B、alt作为图片的替代文字出现,title是图片的解释文字
    C、title作为图片的替代文字出现,alt是图片的解释文字
    D、以上说法都不正确

    4、【单选】表格中合并单元格之间的空间的属性为 B

    A、cellpadding
    > B、cellspacing 设置cellspacing=0
    C、rules
    D、border

    5、【单选】我们可以在下列哪个HTML中引入CSS文件?B

     A、<style>  B、<link>  C、<meta>  D、<script>
    
    • 1

    6、【单选】在 css 选择器当中,优先级排序正确的是D

    A、id选择器>标签选择器>类选择器
    B、标签选择器>类选择器>id选择器
    C、类选择器>标签选择器>id选择器
    > D、id选择器>类选择器>标签选择器

    7、【单选】css中 display属性的属性值不包含?E

    A、inline
    B、block
    C、inline-block
    D、table
    E、hidden

    8、【单选】以下哪个是html的注释 D

    A、/* 注释内容 */
    B、// 注释内容
    C、# 注释内容
    D、

    9、【单选】form元素的enctype的属性值默认是?A

    A、application/x-www-form-urlencoded
    B、multipart/form-data
    C、text/plain
    D、appliction/json

    10、【单选】a标签在新窗口打开链接添加什么属性?A

    A、target
    B、href
    C、src
    D、width

    11、【单选】以下哪个不是Html块元素的特点 D

    A、独占一行空间
    B、可以指定宽和高
    C、高度由内容决定
    == D、可以和其他行内元素共享一行空间==

    12、【多选】html元素的核心属性有哪些?ABCD

    A、id
    B、class
    C、title
    D、style
    E、src

    13、【多选】前端三要素是哪三个 CDE

    A、vue
    B、react
    C、html
    D、css
    E、Javascript

    14、【多选】以下哪个不是Html块元素 DE

    A、
    B、

    C、

    D、 E、
    • 1
    • 2
    • 3
    • 4
    • 5

    问答

    15、【问答】

    display:none与visibility:hidden的区别是什么?

    1.隐藏元素不占据原先空间,绑定js事件不生效,引起浏览器重排重绘
    2.隐藏元素占据空间,绑定js事件不生效,引起浏览器重绘

    16、【问答】

    说明px、 em 、 rem三者关系

    1.px是像素单位
    2.em是相对单位,相对自身font-size而言,如果自身没有,再参考父元素的font-size,默认1em=16px
    3.rem是相对单位,相对于html元素字体大小而言的

    17、【问答】

    如何实现响应式布局?

    媒体查询概念核心 使用场景 使用媒体查询方法 Link Style @media

    18、【问答】

    简述浮动布局以及其工作方式?

    1.作用: 可以让块元素水平排版,
    2.特点:使用浮动布局元素脱离文档流,原先位置不保留,不占据原先空间,
    3.使用浮动布局元素需要清除浮动。
    清除浮动:
    1.兄弟元素 给兄弟元素设置clear:both
    2.父元素 给父元素设置::after{display:block;content:“ ”;clear:both}

    19、【问答】

    简述http协议

    1.超文本传输协议,浏览器和服务器请求应答通信协议。
    2.浏览器发送给服务器数据会被封装成请求报文:
    请求行:method url http1.1
    请求头:Content-Type
    空行:回车换行分割请求头
    请求体:post请求携带数据会被封装请求体中
    3.服务器响应给浏览器数据会被封装成响应报文:
    响应行:状态码 状态码描述 http1.1
    响应头:Content-Type
    响应体:{status:200,data:[],message:””}

    20、【问答】

    列举最少5个animation的子属性,并说明其含义

    Animation-name 动画名称
    duration 动画持续时间
    timing-function 动画速度曲线
    delay动画等待时间
    iteration-count动画迭代次数
    deriction动画是否反向播放
    fill-mode动画播放第几帧

    21、【问答】

    简述伸缩盒布局中的核心概念、常用规则、使用技巧等

    核心概念:容器 弹性元素 交叉轴 主轴
    给元素设置个display为flex,该元素成为弹性盒,子元素也就是弹性元素永远沿着主轴方向排列,主轴方向默认为水平方向
    交叉轴方向默认为垂直方向,主轴和交叉轴可以通过flex-direction 更改排列方向 容器属性:
    display:flex 开启伸缩盒
    flex-direction:row(默认值) column row-reverse column-reverse 更改主轴排列方向
    flex-wrap:设置父容器空间不足时候是否换行显示 默认不换行 nowrap(默认值) wrap(换行)wrap-reverse(换行反转)
    flex-flow:flex-direction 和 flex-wrap 简写
    justify-content 设置弹性元素在主轴对齐方式
    flex-start
    flex-end
    center
    space-around
    space-between
    space-evenly
    strecth
    align-items 设置弹性元素在交叉轴对齐方式
    flex-start
    flex-end
    center
    baseline
    strecth
    align-content 设置弹性元素多行对齐方式
    flex-start
    flex-end
    center
    space-around
    space-between
    space-evenly
    strecth 元素属性:
    order 更改弹性元素排列顺序
    flex-grow 当父容器空间有剩余是否占满 默认不占满 默认值0
    flex-shrink 当父容器空间不足时候是否进行等比例压缩 默认是等比例压缩 默认值1
    设置为0表示不进行等比例压缩
    flex-basis 给弹性元素设置宽度 默认auto 优先级高于width
    flex:flex-grow flex-shrink flex-basis 简写
    align-self 设置弹性元素自身在交叉轴对齐方式

    22、【问答】

    简述一个盒子在另外一个盒子中水平居中的方法?

    1.margin 父width-子width/2 设置给左右
    2.Padding 父height-子height/2 设置左右 给父元素设置border-box
    3.子绝父相,left,right为0 ,margin:auto
    4.子绝父相,left:50% margin-left:-width/2
    5.父元素diaplay:flex 子元素margin:auto;
    6.父元素display:flex justify-content:center

    23、【问答】简述文本在盒子中垂直居中的方法?

    Line-height:hreight

    24、【问答】简述css3的盒子模型

    1.内容盒子 w3c盒子 标准盒子
    2.边框盒子 怪异盒子 IE盒子
    3.内容盒子width和height是设置给盒子内容区的宽高
    4.怪异盒子widht和height是设置给盒子本身

    25、【问答】简述在css3中如何计算同一个规则的优先级

    内联样式>内部样式/外部样式
    !important优先级最高
    Style属性 1000
    Id选择器 100
    类 伪类 属性 10
    标签 伪元素 1 通配符 0

    26、【问答】简述css3选择器有哪些?

    Id class 标签 子代 后代 伪类选择器 伪元素选择器 否定伪类 兄弟选择器 组合选择器

    如果觉得有用请给我点个赞⑧~

  • 相关阅读:
    从助力跨境互通到保障农民工,区块链在大湾区做了什么? | 研讨会
    操作系统导论_第四章_抽象:进程
    共模电感选择请收好谷景电感教你的小方法
    Rust Bevy 实体组件系统
    硬核新品!M4E EDU民航考培一体无人机
    对于docker共享ipc的测试
    Spring Boot 系列三:如何自定义一个SpringBoot Srarter
    x11截屏源码(ubuntu18.04)
    一篇文章让你认识React的Mobx!
    实现mnist手写数字识别
  • 原文地址:https://blog.csdn.net/qq_52342759/article/details/134056623