ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【刷题篇】html+css+js 4/10

2020-03-12 18:01:18  阅读:303  来源: 互联网

标签:10 reflow 容器 元素 js html div class row


牛客网题目分析

在这里插入图片描述
解析:
1.大多数HTML元素被定义为块级元素或内联元素
HTML < div > 元素

  • HTML < div > 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

  • < div >元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

  • 如果与 CSS 一同使用,< div >元素可用于对大的内容块设置样式属性。

  • < div > 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用< table > 元素进行文档布局不是表格的正确用法。< table > 元素的作用是显示表格化的数据。

  • 块级标签可以设置框高,常见的块级标签有div,p,h1-h6,ul,li,dl,dt,dd。
    HTML < span > 元素

  • HTML < span > 元素是内联元素,可用作文本的容器。

  • < span > 元素也没有特定的含义。

  • 当与 CSS 一同使用时,< span > 元素可用于为部分文本设置样式属性

    div、p是块状元素
    span是内联元素
    img是内联块状元素

在这里插入图片描述
解析:

  • Bootstrap框架的网络系统工作原理如下:
    1 、数据行 (.row) 必须包含在容器( .container )中,以便为其赋予合适的对齐方式和内距 (padding) 。
    如: < div class=" container “>
    < div class=” row ">< /div>
    < /div>
    2 、在行 (.row) 中可以添加列 (.column) ,但列数之和不能超过平分的总列数,比如 12 。
    如: < div class=“container”>
    < div class=“row”>
    < div class="col-md- 4 ">< /div>
    < div class="col-md- 8 ">< /div>
    < /div>
    3 、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器 (.row) 的直接子元素
    4 、通过设置内距( padding )从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距( margin )来抵消内距 (padding) 的影响
    详: http://www.imooc.com/code/2325

  • 关于列的嵌套
    Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(.row )容器,然后在这个行容器中插入列。但在列容器中的行容器( row ),宽度为 100% 时,就是当前外部列的宽度。
    在这里插入图片描述
    解析:

  • all 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象

  • 第二个参数差别就来了:

    1. call的参数是直接放进去的,第二第三第n个参数全都用逗号分隔,直接放到后面 obj.myFun.call(db,‘成都’, … ,‘string’ );
    2. apply的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘成都’, …, ‘string’ ]);
    3. bind除了返回是函数以外,它 的参数和call 一样。
  • 此题有待解析
    在这里插入图片描述
    在这里插入图片描述
    解析:

  • 整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘)
    会大大影响web性能,尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。

  • 什么是reflow和repaint(原文链接:http://www.cnblogs.com/Peng2014/p/4687218.html)

  • reflow:例如某个子元素样式发生改变,直接影响到了其父元素以及往上追溯很多祖先元素(包括兄弟元素),这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。

  • reflow:几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。

  • repaint:如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器 repaint(重绘)。repaint 的速度明显快于 reflow

  • 下面情况会导致reflow发生
    1:改变窗口大小
    2:改变文字大小
    3:内容的改变,如用户在输入框中敲字
    4:激活伪类,如:hover
    5:操作class属性
    6:脚本操作DOM
    7:计算offsetWidth和offsetHeight
    8:设置style属性
    在这里插入图片描述

  • “form"这个块元素比较特殊,它只能用来容纳其他块元素。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    解析:

  • B.b表示加粗,strong表示重要文本

  • C.fieldset用来分组,而legend用来分组描述
    在这里插入图片描述
    解析:

  • datalist规定输入域的选项列表,通过option创建;

  • keygen提供一种验证用户的可靠方法,密钥对生成器,私钥存于客户端,公钥发到服务器,用于之后验证客户端证书;

  • output元素用于不同类型的输出

标签:10,reflow,容器,元素,js,html,div,class,row
来源: https://blog.csdn.net/yjj510818155/article/details/104815139

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有