前端基础测试题

 
  简答 
 

   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 
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .left{
            background: red;
            width: 200px;
            height: 200px;
            /*float: left;*//*浮动*/
            position: absolute;/*定位*/
            left: 0;
            top:0;
        }
        .right{
            background: blue;
            height: 200px;
            /*margin-top: -200px;*//*margin*/
            margin-left: 210px;

        }
    </style>
</head>
<body>
    <div class="left">
        定宽
    </div>
    <div class="right">
        自适应
</div>
</body>
</html>

   9、实现div水平垂直居中 
 

 
  margin:0 auto; 
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            height: 500px;
            background: #ff0000;
            overflow: hidden;/*解决外边距合并*/
        }
        .div2{
            width: 200px;
            height: 200px;
            background: #ffff00;
            margin:150px auto;/*设置宽才有用*/
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            height: 500px;
            background: #ff0000;
            position: relative;
        }
        .div2{
            width: 200px;
            height: 200px;
            background: #ffff00;
            position: absolute;
            left:50%;/**/
            top:50%;
            /*margin-left:-100px;*//*知道宽高*/
            /*margin-top:-100px;*/
            transform: translateX(-50%) translateY(-50%) ;
            /*不知道宽高时 配合position:absolute;left:50%;top:50%;使用*/
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

猜你喜欢