前端基础测试题

简答

1、行级元素块级元素区别

块级元素：能设置宽高，自己一行 display: block

行级元素：不能设置宽高，很多一行 宽度由内容撑的 display: inline

行级块元素：水平分布 可以设置宽高 display: inline-block

行内元素有：meat   title  lable  span  br  a   style  em  b  i   strong

块级元素有：body  from  select  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  cnter  div

行内块元素常见的有： img  input  td  

2、HTML语义化

h p img ul ol （具有特殊含义的标签）

机器读取方便

程序员阅读方便

3、css选择器

标签 类 ID 后代 子代 组合（aa，bb） 伪类（：hover ：after） 伪元素（：：first-letter）

4、定位几种值

static：默认值，不定位

absolute：相对于最近已定位的祖先元素定位 释放空间

relative：相对于自身定位

fixed：相对于视窗定位 释放空间

inherit：继承父元素

5、css盒模型、相互转化

怪异盒模型：（ie6以下不写doctype时） width=width+border+padding

标准盒模型： width=width（添加padding和border元素变大）

box-sizing:border-box;//怪异

box-sizing:content-box;//标准 默认

6、外边距合并（合并为大的）

上下外边距合并 ：1、定位 2、浮动

父元素子元素外边距合并解决： 1、定位 2、浮动 3、父元素设置border 4、父元素overflow:hidden;

7、清除浮动塌陷的几种方式

1）、 设置父元素 1、overflow:hidden;

2、设置高度

3、伪元素 .clearfix::after{ content:"";

clear:both;

display:block;

}

2）、添加一个子元素div （ 额外标签 ）设置css clear:both;

编程

8、实现宽度自适应（也可以用css3弹性盒模型实现）

浮动 定位 margin

    
    
    


    

        定宽
    
    

        自适应

9、实现div水平垂直居中

margin:0 auto;

定位再移动（translate(x,y)或margin）