前端基础题---html、css篇01

1.清除浮动的方法：

（1）父元素：overflow：hidden；

（2）父元素设置伪类（最推荐的一种方式）：

.box:after{

content: ' ';

display: table;

height: 0;

clear: both;

}

（3）添加一个子盒子，加入clear: both;缺点：多一个div盒子

2.实现未知宽高的盒子水平垂直居中：

（1）定位实现：

{

  psition: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  margin: auto

}

（2）flex布局实现

（3）transform实现

{

psition: absolute;

  left: 50%;

  top: 50%;

  translateX: （-50%）；

  translateY: （-50%）；

}

3.双飞翼布局（左中右布局占满屏幕，其中左、右两块固定宽200，中间自适应），优先加载中间部分：

<div class='main'>
    <div class='container'>
        <div class='content'>中间</div>
    </div>
    
    <div class='left'>左边</div>
    <div class='right'>右边</div>    

</div>    
css样式：

.main>div {

    float: left;

}

.container {

  width: 100%;

}

.content {margin-left: 200px;margin-riht: 200px;}

.left {width: 200px;margin-left: -100%;}

.right {width: 200px;margin-left: -200px;}

4.行内元素有哪些：a、span、b、input...

块级元素：div、p、ul、li、h1、dl、ol...

空：br hr...

5.css选择符有哪些？css哪些属性可以继承？优先级？

选择符：id  #；class  .；标签 div ；相邻：div+p；子：ul>li；后：ul  li；通配符：*；属性： a[href='xxx']；伪类：a：after

color、font系列可继承；

优先级：!important>行内样式>id>class>tag

6.css3新增伪类：

after、only-child、first-of-type、last-child、nth-child（n）、root、empty...

7.常见浏览器内核分别是什么？

Trident：IE、360、搜狗；

Gecko：火狐

Presto：opera；

webkit：safari、chrome

8.html5有哪些新特性？

（1）添加了些标签：canvas=》画图；

（2）新增语义化标签；

（3）本地存储；

（4）表单控件；

9.html5标签浏览器兼容问题？

（1）自己创建：document.createElement();样式需自己写

（2）使用html5shiv（推荐使用）