20200824戚权-1

知识点:

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

   ①link是XHTML标签，而@import是css提供的；

   ②link写在html页面上，只能存在于head部分的，而@import是写在css文件中的，也可以写在style中；

   ③link引用css时，在页面加载入时，同时加载；而@import需要时页面加载完成载入以后才加载；

   ④兼容问题：link是XHTML标签，没有兼容问题；@import css 2.1提出的，低版本（ie5及以下）的IE不支持；

   ⑤link支持使用JavaScript去控制DOM改变样式的，但是@import不支持；

   ⑥link方式引入的样式的权值高于@import的权重

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

   css hack：

   -webkit-：chrome、safria

   -o-：opera

   -moz-：firefox

   -ms-：ie

3. 不知道尺寸的div,写出3种实现div的水平垂直居中

   • 第一种

div{
position:absoulte;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

• 第二种
  html
div{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

• 第三种
  ```html
  #container{
  display:flex;
  justify-content:center;
  align-items:center;
  }

-第四种
```html
div{
margin-left:50vw;
margin-top:50vh;
transform:translate(-50%,-50%);
}

1. 编程题：两列布局，左边定宽100px，右边弹性伸缩，占用剩余空间。
   html
<div clas="wrap">
<div></div><div></div>
</div>
css:
.wrap{
width:100%;
height:400px;
display:flex;
}
.wrap>div:nth-child(1){
width:100px;
height:100%;
background-color:#f00;
}
.wrap>div:nth-child(2){
height:100%;
flex-grow:1;
background-color:#00f;
}

2. css代码优化有
3. 合并样式
4. 能用群组，就不单写。能简写，就不单独去定义
5. 缩小样式文件的大小，能重用就重用
6. 减少样式重写
7. 避免出现空的href和src；
8. 代码压缩
9. 选择更优的样式属性值
10. 不要在HTML中缩放图像
    ## 总结:
    今天老师先是将上周末考试的试卷进行了的讲解,对于这次考试考的很不理想,有很多的细节都没有注意到,分析了一下试卷,发现整体并没有很难,细节考了很多,是自己没有掌握牢固,需要多多努力.然后老师讲bootstrap讲解完了,后面的知识感觉都不难,但是都没有见过,有种很生僻的感觉,需要多多联系,早日掌握.