考试纠错

1、页面中不知道尺寸的div，实现div的水平垂直居中

1）

div{        
            width:400px
            height:400px
            position:absolute;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
    }       

2）

 position:absolute;
            left:50%;    
            top:50%;
            transform: translate(-50%,-50%);

3）

为div的父元素添加弹性布局
div{
        display: flex;
        align-items: center;
        justify-content: center;
   }

4）

   div{
       width: 50vw;
       height: 50vh;
       transform: translate(-50%,-50%);
   }

2、页面导入样式使用link和import有什么不同

本质上，这两种方式都是为了加载css文件，但还是存在细微的差别。

1）：link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。

2）：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。

3）：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。

4）：使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）。

3、五大主流浏览器和对应的css hack

五大主流浏览器：chrome/ safria/ opera/ firefox/ ie

css hack：-webkit-：chrome、safira -o-：opera -moz-：firefox -ms-：ie

4、前端页面的三层架构

1）结构层：html 搭建网页的整体架构

2）样式层：css 为页面添加样式，美化

3）行为层：JavaScript 主要负责页面与用户的交互

5、css代码优化

1）合并样式

2）能用群组，就不单写。能简写，就不单独去定义

3） 缩小样式文件的大小，能重用就重用

4）减少样式重写

5）避免出现空的href和src；

6）代码压缩

7）选择更优的样式属性值

8）不要在HTML中缩放图像

6、对html语义化的理解

用正确的标签做正确的事，html语义化让页面的内容结构化，结构更为清晰，便于让浏览器、搜索引擎解析。即使在没有css样式的情况下，也是一种文档的格式显示，并且内容是容易阅读的，搜索引擎的爬虫也是依赖于html语义化和各个关键词的权重，利于SEO同时使阅读代码和人对于网站更容易分块，便于阅读维护理解。

双飞翼布局

                                       中间