2019独角兽企业重金招聘Python工程师标准>>>

问：display:none和visibility:hidden区别是什么

css绘制画面有两种形式：repaint 和reflow，当我们更改css属相如background时，浏览器只需repaint就行，dom节点的大小、位置均未发生改变，我理解为：原地不动只是换个颜色填充而已。这时的开销就小。当我们操作dom节点要改变其大小和位置时，对浏览器来说就比较麻烦了，必须要进行reflow，重新定位，重新布局，只不过对于现在的电脑硬件和高版本浏览器来说这倒不是显而易见的性能问题，visibility:hidden;对浏览器来说只需一次repaint就OK。但display:none;浏览器要进行reflow，也就是要销毁原先绘制的frame，然后还要再次重绘frame，浪费，不环保。

问：block，inline和inline-block区别

行内元素有（inline）：title  span  br  a   style  em  b  i   strong pcdata tt big small dfn code samp kbd var cite abbr acronym object script map q sub bdo。

不独占一行，margin-top margin-bottom width height 无法指定。

块级元素有（block）：body  form  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  center  div pre noscript blockquote fieldset address

独占一行，margin pading width height 可以指定

行内块元素有（inline-block）： img  input  td select textarea label

不独占一行，margin pading width height 可以指定

问：rgba 和opacity的区别

rgba仅作用于元素，opacity作用于元素和子元素

问：如何垂直水平居中一个元素？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>垂直居中一个浮动元素</title><style type="text/css">#div2{width: 200px;height: 200px;background-color: #6699ff;margin: auto;position: absolute;//或者relativeleft: 0;top: 0;right: 0;bottom: 0;}#container{width: 600px;height: 600px;background: hotpink;display: table-cell;text-align: center;vertical-align: middle;}</style>
</head>
<body><div style="background:hotpink; width: 600px; height: 600px; position: relative;"><div id="div2">方法二:未知元素的高宽</div></div><br><div id="container"><img width="200px" height="200px" src="assets/images/mug.jpg">//需要行内元素</div>
</body>
</html>

问：实现不使用border，画出1px高的线

<div style=”height:1px;overflow:hidden;background:red”></div>

问：position的值relative和absolute的定位原点是什么？

relative:他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

absolute:他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

absolute 父级有position 父级无position
设置TRBL 父原点 浏览器原点
无TRBL 父原点（上一节点结束），父节点的padding或者上一届点的margin将影响位置 父原点（上一节点结束），父节点的padding或者上一届点的margin将影响位置

问：css中为什么要浮动，怎么清楚浮动？

1.增加一个div 设置clear:both属性

2.给父元素设置overflow:hide或者auto（display：table）

3.  .clearfix:after { display: block; content: "."; height: 0; visibility: hidden; clear: both; }

参考：https://www.cnblogs.com/zhongweizhu/p/6003537.html

问：对WEB标准以及W3C的理解与认识?

web标准简单来说可以分为结构、表现和行为，其中结构主要是有HTML标签组成，表现即指css样式表，通过css可以是页面的结构标签更具美感，行为是指页面和用户具有一定的交互。

W3C对web标准提出了规范化的要求：

①标签字母要小写②标签要闭合③标签不允许随意嵌套④尽量使用外链css样式表和js脚本⑤样式尽量少用行间样式表⑥标签的id和class等属性命名要做到见文知义

问：标准盒子模型和IE盒子模型？

标准盒子模型：box-sizing:content-box;

IE盒子模型：    box-sizing:border-box;

IE盒子模型使用场景：假如有一个容器，我们希望在里面用两个子容器并排填满，肯定会设置width：50%，但是如果要对两个子容器的内容区进行分离，需要使用padding属性，但是使用padding的话会撑宽盒子的宽度，导致两个子容器无法并排，这个时候就可以使用IE盒子模型。

问：超出容器的内容省略号显示？

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

问：reflow和repaint？

reflow（重排）：浏览器根据各种样式来将元素放到确定的地方。
repaint（重绘）： relfow完成之后，浏览器把这些元素按照各自的特性绘制一遍。

引起repaint的操作-改变外观，不改变布局

1.visibility

2.outline

3.background color

引起reflow的操作

1、添加或者删除可见的DOM元素

2、元素位置改变

3、元素尺寸改变

4、元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）

5、页面渲染初始化（这个无法避免）

6、浏览器窗口尺寸改变

问：

转载于:https://my.oschina.net/kimyeongnam/blog/1834096

日常笔记-css\html篇相关推荐

  1. CSS阅读笔记---CSS基础篇

    本文是这些天阅读慕课网的css基础篇部分所作的笔记. 文章目录 一.基本知识 二.选择器 1.标签选择器 2.类选择器 3.ID选择器 4.子选择器 5.包含(后代)选择器 6.通用选择器 7.伪类选 ...

  2. 厚积薄发 前端学习笔记 CSS基础篇-左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法...

    这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接 写在前面 归纳总结了几种比较ok的方法,左右 ...

  3. ipad导入pdf_Ipad笔记法①日常笔记篇

    寒假在家快宅坏了--为了不生锈,充实一下自己的生活,我打算把之前想写的东西都写掉,做一个勤勤恳恳的高产写手(期间限定)! 用了一年多的ipad,也尝试了各种各样的笔记软件,下面对自己一年来的ipad和 ...

  4. Sass-学习笔记【进阶篇】

    特别说明: 没有sass基础请移步:[Sass-学习笔记[基础篇]]http://www.cnblogs.com/padding1015/articles/7056323.html 最底部附结构图(实 ...

  5. NUC 折腾笔记 - Linux 系统篇

    NUC 折腾笔记 - Linux 系统篇 写一篇迟到的折腾笔记:NUC8 8i5beh .原本计划折腾 Hackintosh ,最后折腾了一台 Linux Homelab 设备. 本篇记录 NUC 基 ...

  6. JavaScript学习笔记之入门篇

    JavaScript学习笔记之入门篇 JavaScript引入 1. 页面级 js: 2. 外部js文件: JavaScript变量 1. 变量的作用: 2. 声明变量: 3. 变量赋值: 4. 单一 ...

  7. 《软技能-代码之外的生存指南》学习笔记之理财篇

    <软技能–代码之外的生存指南>学习笔记之理财篇 作者:[美] John Z. Sonmez 摘要:这是⼀本真正从"⼈"(⽽⾮技术也⾮管理)的⾓度关注软件开发⼈员⾃⾝发展 ...

  8. flink1.12.0学习笔记第2篇-流批一体API

    flink1.12.0学习笔记第 2 篇-流批一体API flink1.12.0学习笔记第1篇-部署与入门 flink1.12.0学习笔记第2篇-流批一体API flink1.12.0学习笔记第3篇- ...

  9. jqGrid 学习笔记整理——基础篇

    jqGrid 学习笔记整理--基础篇 jqGrid 实例中文版网址:http://blog.mn886.net/jqGrid/ 国外官网:http://www.trirand.com/blog/ 本人 ...

最新文章

  1. 虚拟机linux 8.04汉化,在虚拟机中快速安装 Ubuntu 18.04
  2. ASP.NET 2.0在SQL Server 2005上自定义分页
  3. 指针05 - 零基础入门学习C语言45
  4. 计算机绘图 招聘,计算机绘图-网课答案.pdf
  5. python的for语句用法_python中list循环语句用法实例
  6. Drools 6.2.0.Final发布
  7. S5PV210裸机之SDRAM
  8. hdu5106 小于x的数（二进制1确定的数）的和 数位dp（first mine）
  9. 抛开复杂的架构设计，MySQL优化思想基本都在这了
  10. 51nod 1964 陵陵曾玩的数论题
  11. python-docx处理word文件指定页面批量打印
  12. 零至二岁宝宝故事(一)
  13. 分享：微信淘宝客自动查券找券返利机器人实现的原理和思路
  14. HHKB静电容键盘真是程序员键盘吗？
  15. java是面向过程的编程语言_1. 下列关于JAVA语言特点的叙述中，错误的是[   ] A、Java是面向过程的编程语言...
  16. 练习4-11 统计素数并求和（素数的函数）
  17. OPC UA协议网关
  18. K8s---HPA弹性伸缩
  19. 无线传感网的MAC层协议
  20. 医院就诊系统（C++队列）源代码

热门文章

  1. Python输入输出练习，运算练习，turtle初步练习
  2. 继承中类以及成员变量初始化的讨论。
  3. System Memory Management in Windows CE .NET
  4. python设计模式六大原则_php设计模式的六大原则（六）：迪米特法则
  5. POJ1258最小生成树简单题
  6. UVA11384正整数序列（把123..变成0的最小步数）
  7. hdu4279 找规律+小想法
  8. 00-基于Vue的博客项目展示
  9. 操作系统原理第一章：操作系统概述
  10. 【Linux 内核】调度器 ④ ( sched_class 调度类结构体分析 | yield_task 函数 | heck_preempt_curr 函数 | task_struct 函数 )