8-24 程宗武

考试纠错

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同时使阅读代码和人对于网站更容易分块,便于阅读维护理解。

双飞翼布局

                                       中间
            

         

                     左边
        

                     右边
        

    

<style type="text/css">
        *{
        margin:0;
        padding: 0;
        }
        .main>div{
        float: left;
        }
        .left {
        width: 200px;
        background: red;
        margin-left: -100%;
        }
        .right{
        width: 200px;
        background: blue;
        margin-left: -200px;
        }
        .middle{
        width: 100%;
        background: yellow;

        }
        .content{
        margin-left: 200px;
        margin-right: 200px;
        }
</style>

今日内容

1、变量

变量的命名:$变量名:值; 作用域:只在大括号内有效

当变量名重复时:默认情况下后定义的变量会覆盖之前的变量但是可以在结尾处添加!default,让之前的变量生效

!default规则:

如果之前定义一样的变量名,使用之前的变量值
如果之前没定义一样的变量名,使用现在值

2、函数

自定义函数

@function show(\(a,\)b){
@return \(a+\)b;
}
p{
width:show(123px,123px);
}

心得

今天讲完了BootStrap进度稍微有点快,还是缺少锻炼,有些知识就是要在实战中不断的使用和记忆。

标签

云创动力 云创动力前端工程师 云创集训 学员日志 开发喵 成都云创动力 成都前端工程师 成都物联网

评论

this is is footer