京东面试总结

面完京东，希望的是给自己的春招画上一个完美的句号。每次面试都是一次收获，不多说了，记昨天没答好的知识点吧。

怎样用css3画三角形，说一下步骤。（其实当时有点懵了，好久之前画过的）

原理步骤：
1. 必须是块级元素。首先将其content分别的width和height分别设置为0；

2. 我们确定要画的三角形的方向，并且设置除过方向那一边的border值，要设置三边的border均为相同的px值，这三边中，除过三角形方向相对的那一边的边设置为有色的，其余两边的border设置为透明色。

3.基本完成，这个大概就是border覆盖引起的效果吧。我们可以一步步的设置content的height和width值，然后为其添加border值，并且设置不同的样式。就会有不同的结果。

eg：朝上的三角形

#direction-top{
            height: 0px;
            width: 0px;
            border-right: 50px solid transparent;
            border-left: 50px solid transparent;
            border-bottom: 50px solid red;  
        }

注：如果要设置直角三角形怎么办呢：（好办啊，原理都懂了）

1.给一个盒子，依旧设置content的width和height为0；
2.随便设置盒子的两个相邻边的border的border值，之后选择，想要那个方向的三角形，将另一边设置为透明就ok;

eg：直角三角形

#direction-top{
            height: 0px;
            width: 0px;
            border-left: 50px solid transparent;
            border-bottom: 50px solid red;
        }

关于border-radious画圆的原理。

提到画圆，我第一个就想到了border-radious,面试这块，css还是没复习到位吧。

eg:一个圆

#clicle{
            height: 50px;
            width: 50px;
            border:1px solid red;
            border-radius: 50%;
        }

eg：同心圆呢（设置它的border宽度值，就ok啊。）

#clicle{
            height: 50px;
            width: 50px;
            border:10px solid red;
            border-radius: 50%;
            background-color: yellow;
        }

这里写图片描述
木有错，它就是长这样的。
最后面试官的讲解可谓是：透彻到底。

border-radious；这个是因为它的半径决定，我们画椭圆和圆的时候，它的大小和形状就是取决于它的半径，分为水平半径和垂直半径（圆的恰好相等而已。）不难想象，当我们将其设置为50%的时候，它恰好相对容器的一般，但是为了保证半径的不变性，所以就形成了一个圆弧。等于找出容器的中心点以最小边半径画弧。

padding和margin，更深的理解。

margin:设置两个标签之间的间隔，也就是距离。通常叫做外补丁。也就是说，它是两个组件之间的距离。view的绘制区域不会包含margin，但是包含padding。可以设置background.看一下。再标准盒模型和怪异盒模型下都不参与width和height的width,height计算。它会出现垂直边距合并。

padding:填充内补丁,用于控制组件内部的大小，他们之间有一个border边界分隔。padding包围的就是content，他就是组件中内容到另外一个组件的距离。

jQuery的dom添加操作
（当时想到的只有append）

append():向每个匹配的元素内部添加内容。前面是被插入的对象，后面是要在对象内插入的元素内容。

appendTo():把所有匹配的元素住家到另一个指定的元素集合中。前面是要插入的元素内容，而后面是被插入的对象。

.after(content)和.before(content)都相对选中的元素外部添加相邻的兄弟节点，可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面。

prepend()和prependTo():可以在被选元素之前插入内容，这个和append是相对的。
注：（1）append()向每个匹配的元素内部追加内容
（2）prepend()向每个匹配的元素内部前置内容
（3）appendTo()把所有匹配的元素追加到另一个指定元素的集合中
（3）prependTo()把所有匹配的元素前置到另一个指定的元素集合中
5 .insertAfter()和.insertBefore（）要插入的内容在方法前面，参数是要插入的位置。

table的增行：

我想到了用innerHtml插入，但是硬是扯到css布局上，但是啊，还是innerHtml能好一点吧。但是这样也会增加dom的操作，就应该讲到优化了。

实现一行布局

diaplay: inline-block：一行布局吧。但是汇流有空隙，并且不好设定。

float：这里要提到清除浮动。

ul>li：没错，因为给的东西就象一个导航条的形式，这样直接用float。

table：忽然想起来也能用table啊。设置一行就ok啊。

flex也可以：这个方法算是比较好的了，用display：flex将其分隔，实现布局就ok.

eg:

        .demo{
            width: 100%;
            height: 300px;
            display: flex;
            }
        .item{
            flex: 1;
            height: 80px;
            box-sizing: border-box;
            border: 1px solid red;
        }

css长度单位（感觉这篇讲的可好了，存着吧。）
类型转换

var a=1+[1];
//输出 "11"

这里写图片描述

知识点：（1）类型的转换（2）”+”操作符规则。

“+”操作符：如果我们有一个操作数是对象，数值或者布尔值，则会调用它们的toString()取得相应的子符串值，然后再应用字符串的规则进行操作计算。

注：1.如果有一个操作数是字符串，另一个将操作数转换为字符串，然后再将两个子字符串拼接。
2.一对圆括号把两个数值括在一起，解析器会先计算其结果。

总结

一次性两面，问道的项目和基础比较多，但是基础也是非常小的那种了。但是很重要，必须理解原理，不然就会被忽略。css3和h5还要好好好好看，css这块复习的也不是很到位。面试官在看我的GitHub的时候，em…还好吧，虽然有一点点乱。
现在能想起来典型的就这些了，所以还是好好看书好好学习吧。

总结

猜你喜欢