前端学习过程中一些抽象陌生概念的理清以及优秀技术技巧的学习整理

overflow:hidden的概念理清以及应用

一. overflow:hidden 溢出隐藏

给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。

css 复制代码

/*只适用于单行文本*/
div{ 
    width: 150px;
    background: skyblue;
    overflow: hidden;      /*溢出隐藏*/
    white-space: nowrap;	/*规定文本不进行换行*/
    text-overflow: ellipsis;	/*当对象内文本溢出时显示省略标记（...）*/
}

一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。

二. overflow:hidden 清除浮动

一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后 ，子元素会脱离标准流 ，不占位 ，父级元素检测不到子元素的高度，父级元素高度为0。那么问题来了，如下：

xml 复制代码

/*css样式*/
<style type="text/css">
    .box{ background:skyblue; }
    .kid{ width: 100px;height: 100px; float:left;}
    .kid1{ background: yellow; }
    .kid2{ background: orange; }
    .wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>
 
/*html*/
<body>
    <div class="box">
        <div class="kid kid1">子元素1</div>
	<div class="kid kid2">子元素2</div>
    </div>
    <div class="wrap">其他部分</div>
</body>

由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性 ，这样父级的高度就随子级容器及子级内容的高度而自适应。由于在IE比较低版本的浏览器中使用overflow：hidden；是不能达到这样的效果，因此需要加上 zoom:1;

三. overflow:hidden 解决外边距塌陷

父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷。

因此，给父级元素添加overflow:hidden，就可以解决这个问题了。

使父元素脱离子元素margin的影响

详文参考:csdn博客星星之火

代码语言大类型(详文参考MDN)

作用类型

解释代码 vs 编译代码

解释型语言中，代码自上而下运行，且实时返回运行结果。代码在由浏览器执行前，不需要将其转化为其他形式。代码将直接以文本格式被接收和处理。

编译型语言需要先将代码转化（编译）成另一种形式才能运行。比如 C/C++ 先被编译成机器码，然后才能由计算机运行。程序将以二进制的格式运行，这些二进制内容是由程序源代码产生的。

_JavaScript 是轻量级解释型语言 。浏览器接受到 JavaScript 代码，并以代码自身的文本格式运行它。技术上，几乎所有 JavaScript 转换器都运用了一种叫做即时编译 （just-in-time compiling）的技术；当 JavaScript 源代码被执行时，它会被编译成二进制的格式，使代码运行速度更快。尽管如此，JavaScript 仍然是一门解释型语言，因为编译过程发生在代码运行中，而非之前。

位置类型

服务器端代码 vs 客户端代码(以javascript为例)

客户端代码

客户端代码是在用户的电脑上运行的代码，在浏览一个网页时，它的客户端代码就会被下载，然后由浏览器来运行并展示。

服务器端代码

服务器端代码在服务器上运行，然后运行结果才由浏览器下载并展示出来。流行的服务器端 web 语言包括：PHP、Python、Ruby、ASP.NET，甚至有 JavaScript！JavaScript 也可用作服务器端语言，比如现在流行的 Node.js 环境，你可以在我们的动态网页------服务器端编程主题中找到更多关于服务器端 JavaScript 的知识。

代码运行(代码执行效果)类型

动态代码 vs 静态代码

动态:它是指通过按需生成新内容来更新 web 页面或应用，使得不同环境下可以显示出不同内容。服务器端代码会在服务器上动态生成新内容，例如从数据库中提取信息。服务器端代码会在服务器上动态生成新内容，例如从数据库中提取信息。而客户端 JavaScript 则在用户端浏览器中动态生成新内容，例如创建一个新的 HTML 表格，用从服务器请求到的数据填充，然后在网页中向用户展示这个表格。两种情况的意义略有不同，但又有所关联，且两者（服务器端和客户端）经常协同工作。

静态:没有动态更新内容的网页叫做静态页面，所显示的内容不会改变。 (在Java类中，使用一对大括号包围起来的若干行代码被称为一个代码块，用static关键字修饰的代码块称为静态代码块。当类被加载时，静态代码块会执行，由于类只加载一次，所以静态代码块只会执行一次。在程序中，通常会使用静态代码块来对类的成员变量进行初始化。在c语言中静态的生命周期为永久)

画圆及旋转法

代码示例

css 复制代码

 #clock {      width: 300px;      height: 300px;      border: 2px solid black;      border-radius: 50%;      position: relative;      margin: 50px auto;    }

效果:

2.

代码示例

css 复制代码

 .hand {    position: absolute;    width: 2px;    height: 60px;    background-color: black;    transform-origin: bottom center;    left: 50%;    top: 35%;  }

其中较重要的就是transform-origin的使用，参考文章

极其重要的画线思想就是把盒子的高度压缩的极小

%的注意点

0%4的结果是0，没想到吧，我也没想到，当我们将0除以4时，结果是0。这是因为0除以任何数都等于0。

1 % 4 的结果是 1。在取余运算中，1 除以 4 的余数为 1。这是因为4不能整除1，所以余数是1。在取模运算中，余数就是结果。因此，1%4的结果是1。