每天20个灵魂拷问系列一

一、怎么让一个不定宽高的盒子 垂直水平居中？

这里给出两种解决办法

第一种使用css方法

父元素

.box{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 300px;
    height:150px;
    border:1px solid red;
}

子元素

.one{
    display: inline-block;
    vertical-align: middle;
    background: #bfa
}

代码解读

display:table-cell指让标签元素以表格单元格的形式呈现 text-align:center:行内元素水平居中 vertical-align ：设置元素的垂直对齐方式。

**第二种使用transform **

父元素

.box{
    position: relative;
    width: 300px;
    height:150px;
    border:1px solid red;

}

子元素

.one{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background: #bfa
}

代码解读

这里主要是关于子元素的设置

首先设置绝对定位，离底部左边分别为50% 此时不加 transform是这样的

盒子离底部和左边分别为50%，但要实现水平垂直居中还得减去他们高宽的一半，因此添加 transfrom

transform: translate(-50%,-50%);

二、position几个属性的作用？

解答

position有四个属性值：relative、absolute、fixed、static

1. static:默认位置，正常的页面流
2. relative:设置了relative，那么它们偏移的top、right、bottom、left的值都是以它原来的位置为基准偏移，而不管其他元素会怎么样，需要注意的是relative移动后的元素在原来的位置仍然占据空间
3. absolute:如果父容器设置了position=/absolute/relative，且子元素设置了position:absolute那么子元素会根据父元素进行位置偏移，如果父元素没有设置则以body进行偏移，position不占标准流位置
4. fixed:设置为fixed的元素，定位于浏览器窗口的指定坐标，不论窗口滚动与否，元素都会留在那个位置，它始终以body为依据，同时它也不占标准流的位置

三、什么是BFC?

解答

1. BFC直译为“块级格式化上下文”。它是一个独立的渲染区域
2. 参考 https://www.zihanzy.com/articles/13

四、css引入的方式有哪些？link和@import的区别是什么？

解答

css引入方式有内联、内嵌、外链、导入四种

link于@import的区别 link没有兼容性、@importCSS2.1以下浏览器不支持 link支持使用javascript改变样式 ，后者不可

五、解释css sprites,如何使用？

解答

CSS精灵图，把一推小图片整合道一张大的图片（png）上，减轻图片请求的数量

参照 https://www.zihanzy.com/articles/77

六、清除浮动的几种方式？

解答

参考 https://www.zihanzy.com/articles/78

七、简书对Web语义化的理解

解答

就是让浏览器更好的读懂你写的代码，在进行HTML结构、表现、行为设计时、尽量使用语义化的标签、使程序代码简介明了、易于进行Web操作和网站的SEO。

八、CSS有哪些选择器？CSS选择器的优先级是如何定义的？

解答

!important>行内样式>ID>类>标签>伪类|属性旋转>伪对象>继承>通配符 参照 https://www.zihanzy.com/articles/162

九、display:none;与visibility:hidden的区别是什么？

解答

display:none;使用该属性后HTML(元素)对象的宽度、高度等各种属性都会“丢失” visibility:hidden:使用该属性后，HTML(元素)对象仅仅在视觉上看不见,而它所占据的空间位置仍然存在。 参考 浏览器的回流与重绘

十、请有div+css写出左侧固定（width:200px）,右侧自适应页面宽度

.left{
     width:200px;
     height:400px;
     float:left
}
.right{
     width:100%;
     float:right;
         margin-left:200px;
}

十一、display:inline-block什么时候会显示间隙？

解答

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距。 解决办法 父元素

font-size:0;
-webkit-text-size-adjust:none;

参考 https://www.zihanzy.com/articles/40

十二、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？样式之间的转换

解答

行内元素有：a b span img input select strong

块级元素有 ：div ul li ol dl dt dd hn p

空元素： br hr img input link meta area base col command embed keygen param source track wbr

十三、css三角形、圆、椭圆实现

三角形 css小三角形实现 css直角三角形

圆

.circle{
    width:150px;
    height:150px;
    border-radius:50%;
}

椭圆

.elipse{
    width:200px;
    height:100px;
    border-radius:50%;
}

十四、行内元素的padding和margin有效吗？

解答

行内元素设置水平方向的padding和margin有效，但是设置垂直方向无效，垂直方向的设置只是一种视角效果，但实际并没有对周围元素产生任何影响。

参照 https://blog.csdn.net/qq_37621289/article/details/82859024

十五、哪些标签都存在伪元素？

解答

大部分容器标签都有伪元素，iframe没有伪元素； 大部分单标签都没有伪元素，但是img 有伪元素 补充 伪元素不能通过js操作

十六、js中有哪些数据类型

解答

int、string、boolean、null、undefined、object

十七、typeof 和 instanceof的区别

typeof可以判断变量的数据类型 返回值是字符串 a instanceof b 判断 b是不是在a的原型链上，也可以实现判断数据类型返回值为布尔

十八、如何判断一个变量是数组？

foo instanceof Array
foo.constructor== Array
Array.isArray(foo)
Object.prototype.toString.call(foo)=="[object Array]"

十九、什么是原型对象？

解答

每一个构造函数都有一个prototype的属性，这个属性的值是一个对象，这个对象就叫做构造函数的原型对象； 一般建议将构造函数的成员属性绑定在原型对象prototype上，因为原型对象prototype身上的属性默认可以通过实例对象访问到，这样做可以保证在每次通过new关键字创建实例对象的时候，这些方法不会重复在内存中创建。

二十、什么是原型链

解答

每个构造函数都有一个prototype属性，即原型对象，通过实例对象的__proto___属性也可以访问原型对象；而原型对象本质上也是一个对象，是对象就有自己的原型对象，最终形成的链状的结构称为原型链