发表于: 2018-06-01 20:45:36

1 508


今天做的事:

    今天主要看看前三个任务的深度思考。

    任务一

    1.HTML文件里开头的Doctype有什么作用?

         答:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。(没有结束标签,对带大小写不敏感,且不是html标签)

         2.如何理解盒模型及其content、padding、border、margin?

         答:content就是正文内容,padding内边距,内容和盒子,内容和内容的之间用padding,margin外间距,盒子和盒子之间的间距,border盒子的边框,是围绕盒子内边距的一条或多条线。关于盒子模型的理解,html内的每一个元素都是一个盒子(这里指普通流元素设置display属性)。 

         两个盒子之间,遵循ie模型和W3C盒子模型两种。

         ie模型:盒子实际大小不计算padding+border

         W3C模型:盒子实际大小计算padding+boder

         具体内容:https://www.jianshu.com/p/2353c364318b

         3.常见的inline元素、block元素、inline-block元素有哪些?它们之间有什么区别?

         inline元素:a li span img input select

         block元素:div p ul table h1-h5

         inline-block指元素对外表现为inline行内元素,对内显示为block块级元素,可以设置vertical-align属性。

         区别:inline元素:1.和其他元素都在一行上;

                                        2.元素的高度.宽度,行高及顶部和底部间距不可设置;

                                        3.元素的宽度就是它包含的文字和图片的宽度,不可改变;

                                        4.间距受其父元素font-size的影响

                   block元素:1.独自占据一行;

                                       2.元素的高度.宽度,行高及顶部和底部间均可设置;

                                       3.元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一 致),除非设定一个宽度。

        inline-block元素:1.和其他元素都在一行上;

                                        2.元素的高度.宽度,行高及顶部和底部间均可设置;

     4.如何使用浏览器的F12调试页面?

              点击f12,首先检查console是否有报错提示,如果有404错误,点击Network,xhr,文件是否加载完整。点击左上角的方块加箭头,检查element+css

           我是这么用的,可能有很多功能有待开发0.0

        5.九宫格的布局你还能想到哪些办法实现?它们各自的优势劣势是什么?

              正方形盒子实现方法:              

              1.margin,padding撑开盒子,当有内容的时候,会溢出。

              2. margin(padding)-top伪元素的方式,会出现边距折叠,设置over-flow:hidden;

              3.利用vw单位,1%宽度=1vw;设置width:100%;height:100vw即可。浏览器兼容性问题不好

              九宫格布局的方法

              1.float+margin

              2.display:flex;flex-wrap:wrap;设置padding,justity-content:space-between;

              3.第三种没有尝试过,是以前看的文档,可以代替float的布局方式。display:inlin-block; inline-block:middle;word-spacing:-1px;记不太清了。

           6.IDE是什么?它和文本编辑器相比有什么优缺点?

              编辑器就是纯编辑文本的编辑器、IDE是带有软件开发功能的“集成开发环境”。

           7.加和不加meta的viewport有什么区别?

              时间不早了,偷个懒,https://blog.csdn.net/dexing07/article/details/53002899,改天看,嘻嘻。

          想一口吃个胖子是不可能了,今天到这里就结束了。

          明天的计划:明天活动出去玩,只求能在玩疯之际,回来写写日报学学知识吧。

          遇到的问题:做任务4的时候,写了font-size:625%;按psd写了字体大小,觉得太大了,事实是不要相信自己的眼睛,眼睛是会骗人的,给header设置高度后字看起来就不那么的大了。

          收获:至少连续已填写日报了,坚持就是胜利,遇到问题要相信自己能够解决,加油,与君共勉。


返回列表 返回列表
评论

    分享到