HTMLamp;amp;css面试题

1、iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。

1、便于修改，模拟分离，像一些信息管理系统会用到。

2、但现在基本不推荐使用。除非特殊需要，一般不推荐使用。

1、iframe的创建比一般的DOM元素慢了1-2个数量级

2、iframe标签会阻塞页面的的加载，如果页面的onload事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好，在Safari和Chrome中可以通过js动态设置iframe的src属性来避免阻塞。

3、iframe对于SEO不友好，替换方案一般就是动态语言的Incude机制和ajax动态填充内容等。

• 1、box-sizing:用来指定模型的大小的计算方式。主要分为border-box(从边框固定盒子大小)、content-box(从内容固定盒子大小)两种计算方式。
• 2、transition:当前元素只要有"属性"发生变化时，可以平滑的进行过渡。通过transition-propety设置过渡属性；transition-duration设置过渡时间；transition-timing-function设置过渡速度；transition-delay设置过渡延时。
• 3、translate：通过移动改变元素的位置；有x,y,z三个属性

• 1、！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
• 2、权重算法：(0,0)==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重

• 3、比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。

• 用了display：flex属性，在IE10以下都是无效的。

HTML结构：

CSS：

.wrapper{position:relative;}
.content{
    background-color:#6699FF;
    width:200px;
    height:200px;
    position: absolute;        //父元素需要相对定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
}

方法二

.content{
        position:absolute;
        left:50%;
        top:50%;
        width:200px;
        height:200px;
        background:red;
        -webkit-transform:translate(-50%,-50%);
        -moz-transform:translate(-50%,-50%);
        -o-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
    }

• block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
• none 缺省值。像行内元素类型一样显示。
• inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
• inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
• list-item 像块类型元素一样显示，并添加样式列表标记。
• table 此元素会作为块级表格来显示。
• inherit 规定应该从父元素继承display属性的值。

• 块级元素：div,p,h1,form,ul,li
• 行内元素：span,a,label,input,img,strong,em;
• css盒模型：内容，border,padding;

• play()开始,pause()暂停

• preload

• 标签选择符；类选择符；id选择符
• id>class>标签选择
• important优先级高

• 使用带clear属性的空标签；
• 使用css的overflow属性；
• 使用css的：after伪元素；

• 同时为了兼容 IE6，7 同样需要配合zoom使用

       .clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
       .clear{zoom:1;}

• 使用邻接元素处理；
• 父级设置成inline-block；
• br清浮动
• 以浮制浮（父级同时浮动）
• 给浮动元素父级设置高度
• 给父元素添加overflow：hidden 清除浮动方法；

• （编辑：威海站长网）

  【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!