html css js选择题,html css js面试题

讲述一下标准的CSS的盒子模型？

标准的css盒子模型：他的宽度=内容的宽度+边框的宽度+加上内边具的宽度

比如：

.box{

width:100px;

border:10px solid #ccc;

padding:10px

}

那么标准的css盒子模型中的box这个的总的宽度就是140px=100+10+10+10+10；

但是低版本ie的盒子模型box的宽度还是100px，

CSS选择器有哪些？哪些属性可以继承？

css继承特性主要是指文本方面的继承，盒模型相关的属性基本没有继承特性。

不可继承的：

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可继承的：

visibility和cursor

终极块级元素可继承的：

text-indent和text-align

内联元素可继承的：

letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

列表元素可继承的：

list-style、list-style-type、list-style-position、list-style-image

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

1)行级元素水平居中对齐(父元素设置 text-align:center)

行级元素垂直居中

2)   块级元素水平居中对齐(margin: 0 auto)

块级元素水平居中

3)浮动元素水平居中

宽度不固定的浮动元素：

html代码：

我是浮动的

CSS样式：

.outerbox{

float:left;

position:relative;

left:50%;

}

.innerbox{

float:left;

position:relative;

right:50%;

}

宽度固定的互动元素

html代码

我是浮动的

css代码

.outerbox{

background-color:pink; /*方便看效果 */

width:500px ;

height:300px; /*高度可以不设*/

margin: -150px 0 0 -250px; /*使用marin向左移动250px，保证元素居中*/

position:relative;  /*相对定位*/

left:50%;

top:50%;

}

4)让绝对定位的元素水平居中对齐

.center{

position: absolute; /*绝对定位*/

width: 500px;

height:300px;

background: red;

margin: 0 auto; /*水平居中*/

left: 0; /*此处不能省略，且为0*/

right: 0; /*此处不能省略，且为0*/

}

经验分享：水平居中的主要属性有

1. text-alin:center;

2. margin:0 auto

3. position:relative|absolute; left:50%;

display有哪些值？说明他们的作用?

block           块类型默认宽度为父元素宽度，可设置宽高，换行显示。

none            缺省值。象行内元素类型一样显示。

inline            行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

inline-block   默认宽度为内容宽度，可以设置宽高，同行显示。

list-item        象块类型元素一样显示，并添加样式列表标记。

table             此元素会作为块级表格来显示。

inherit           规定应该从父元素继承 display 属性的值。

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

为什么出现浮动？

浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。

什么时候清除浮动？

如果想要实现三个块级元素并排显示，期望效果如下图所示：

给三个块级元素都加上float属性后，页面效果如下图所示：

问题出现了，父元素高度塌陷了

一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右，display:inline-block只能从左往右。

清除浮动的方式？

我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

清除浮动的两大基本方法：

方法1：脚底插入clear:both;

方法2：父元素BFC(ie8+)或haslayout(ie6/ie7)

方法1的具体实现：

1. 在父元素的最后加一个冗余元素并为其设置clear:both

原理如下：

当添加了最后一个冗余元素(未设置clear:both)时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们(可以把它们看成PS中的图层)。现在，给这个冗余元素添加clear:both(clear属性介绍)，它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。

实现：

1

2

.box{

width:700px;

margin:0 auto;

border:2px solid green;

}

.div{

width:300px;

height:200px;

background:red;

float:left;

}

.div{

width:300px;

height:200px;

background:red;

float:left;

margin-left: 10px;

}

.clear{

height:0px;

clear:both;

overflow: hidden;

}

此方法的缺点是，必要在页面中添加很多没有意义的冗余元素，太麻烦，而且不符合语义化。

2.采用伪元素，这里我们使用:after。添加一个类clearfix：(推荐)

在我们需要清除浮动时，只需要给父元素追加clear类即可，既方便又符合语义化。

该方法的缺点是，IE6/IE7不识别:after伪元素，存在兼容性问题

1

2

.box{

width:700px;

margin:0 auto;

border:2px solid green;

}

.div{

width:300px;

height:200px;

background:red;

float:left;

}

div{

width:300px;

height:200px;

background:red;

float:left;

margin-left: 10px;

}

.clearfix:after {

content:"";

display:table;/*采用此方法可以有效避免浏览器兼容问题*/

clear:both;

}

margin和padding分别适合什么场景使用？

margin:

需要在border外侧添加空白时；

空白处不需要背景(色)时；

上下相连的两个盒子之间的空白，需要相互抵消时。

padding：

需要在border内测添加空白时；

空白处需要背景(色)时；

上下相连的两个盒子之间的空白，希望等于两者之和时。

javascript的typeof返回哪些数据类型？

1.返回数据类型

undefined

string

boolean

number

symbol(ES6)

Object

Function

例举强制类型转换和隐式类型转换?

强制类型转换：

Number(参数)把任何类型转换成数值类型

parseInt(参数1，参数2)将字符串转换成整数

parseFloat()将字符串转换成浮点数字

string(参数)：可以将任何类型转换成字符串

Boolean()可以将任何类型的值转换成布尔值

隐式类型转换：

数值自动转换为字符串：

vara = 123;

alert(a+'456'); // 输出 123456

“+”号为连接符

字符串自动转换为数字

var b = 20;

//alert(b-'10'); // 减法 输出 10

//alert(b*2); // 乘法 输出 40

//alert(b/2);

// 除法 输出 10

//alert(b%2) // 求余 输出

"++"和"-"的类型转换

varc = '10';

c++;

alert(c); // 输出 11

vard = '10';

d--;

alert(d); // 输出 9

比较运算符的类型转换

alert('10'> 9) // 输出 true

alert('10'> '9') // 输出 false

等号运算符的转换

alert('10'== 10) // 输出 true

alert('10'== '10') // 输出 true

"！"运算符的转换

alert(!true); // 输出false

alert(!100); // 输出false

alert(!'Web前端开发'); // 输出 false

运算符其他之间的转换返回NaN

alert('Web前端开发'-10) // 输出NaN

split() join() 的区别？

共同点：split与join函数通常都是对字符或字符串的操作；

两者的区别：(1)split()用于分割字符串，返回一个数组，例如

var string=“hello world?name=xiaobai”;

var splitString = string.split("?");

console.log(splitString);//["hello world","name=xiaobai"]

split()只有一个参数时：分割的字符串或正则表达式；两个参数时，第二个参数是指返回的数组中元素的个数；

(2)join()用于连接多个字符或字符串，返回值为一个字符串；例如

var arr= new Array();

arr[0]="hello";

arr[1]="xiao";

arr[2]= "bai";

arr.join("&");//"hello&xiao&bai"

join();//默认分割符为逗号；

null和undefined的区别？

Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。

Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

js 代码

varoValue;

alert(oValue == undefined);//output "true"

这段代码显示为true,代表oVlaue的值即为undefined，因为我们没有初始化它。

js 代码

alert(null== document.getElementById('notExistElement'));

当页面上不存在id为"notExistElement"的DOM节点时，这段代码显示为"true"，因为我们尝试获取一个不存在的对象。

js 代码

alert(typeofundefined);//output "undefined"

alert(typeofnull);//output "object"

第一行代码很容易理解，undefined的类型为Undefined；第二行代码却让人疑惑，为什么null的类型又是Object了呢？其实这是JavaScript最初实现的一个错误，后来被ECMAScript沿用下来。在今天我们可以解释为，null即是一个不存在的对象的占位符，但是在实际编码时还是要注意这一特性。

js 代码

alert(null== undefined);//output "true"

ECMAScript认为undefined是从null派生出来的，所以把它们定义为相等的。但是，如果在一些情况下，我们一定要区分这两个值，那应该怎么办呢？可以使用下面的两种方法。

js 代码

alert(null=== undefined);//output "false"

alert(typeofnull==typeofundefined);//output "false"

使用typeof方法在前面已经讲过，null与undefined的类型是不一样的，所以输出"false"。而===代表绝对等于，在这里null === undefined输出false。