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讲解完了,后面的知识感觉都不难,但是都没有见过,有种很生僻的感觉,需要多多联系,早日掌握.

标签

评论

this is is footer