Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review

这份作业跟布局相关,因此很多都是布局的知识:

1.display属性的block,inline-block,inline值的区分

其实真正需要区分的是inline-block和inline。都是在同一行内,怎么区分他们呢?首先要明白块元素和行内元素很重要的一点区别:块元素的高度和宽度我们都是可以控制的,而行内元素是不可以的。block对应的就是块元素,inline对应的是行内元素,inline-block叫作“行内块元素”(既具有block的宽度高度特性又具有inline的同行特性),画个图就懂了:

两个高度不同的block:

两个高度不同的inline-block:

两个inline:

2.关于margin:

有些元素的margin默认值并不是0,比如body,是取决于浏览器的类型的。

3.float

我们可以利用float来实现文字围绕图片的效果,像这样:

只需要将左边的图片设置为float:left,虽然float设置过的元素不属于普通流,但那些文字不会覆盖掉图片,而是会围绕着图片。

4.一个未解的问题:

写这份作业的时候遇到一个很奇怪的问题,出现了这样一种情况:

相应的代码如下:

盒子模型如下:

但把overflow设置为hidden后,就解决了这个问题:

代码:

在网上搜了一下,有知乎上有解释:https://www.zhihu.com/question/30938856,但自己看不太懂,先在这里挖个坑吧,以后再填。

Web前端开发学习笔记(二)的更多相关文章

  1. Web前端开发学习笔记(一)

    最近在复习Web前端的开发知识,于是就把大二上学期曾经学过的东西拿出来复习一遍,把自己在做曾经的作业时遇到有意义的点都记下来吧. Homework1:http://my.ss.sysu.edu.cn/ ...

  2. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  3. WEB前端开发学习:源码canvas 雪

    WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...

  4. web前端开发学习:jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

  5. Web 前端开发学习之路(入门篇)

    字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== ...

  6. 关于web前端开发学习的顺序

    学习web前端开发该怎么学,按照什么顺序学习,这是很多新手朋友会遇到的问题.下面简单的说一下.由于在国内大学课程里面,几乎没有前端开发这门课程,无非就是一些网页设计之类的课程,但那些课程无论是老师讲还 ...

  7. web前端开发学习路线图

    Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...

  8. Web前端开发学习误区,你掉进去了没?

    从接触网站开发以来到现在,已经有五个年头了吧,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成功与喜悦.烦恼与纠结都历历在目,感慨颇多. 先 ...

  9. 小白入门Web前端开发学习一周小结

    说之前还是先说点其他的,简单介绍下自己为何选择web前端开发: 本人之前在一家国企单位从事质检工作,干了3年,工资和待遇还算不错,但由于其工作的流动性导致知识的脱轨以及精神上的空缺,最后还是打算在25 ...

随机推荐

  1. BZOJ 3670: [Noi2014]动物园 [KMP]

    求这玩意: 对于字符串S的前i个字符构成的子串,既是它的后缀同时又是它的前缀,并且该后缀与该前缀不重叠,将这种字符串的数量记作num[i] 对1,000,000,007取模的结果 n≤5,L≤1,00 ...

  2. POJ 2125 Destroying The Graph [最小割 打印方案]

    Destroying The Graph Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 8311   Accepted: 2 ...

  3. Nginx设置身份验证

    在某些情况下,需要对某些内容的访问进行限制,在Nginx中也提供了这样的限制措施,以下是几种常见的限制措施: 1.访问身份验证 在Nginx的插件模块中有一个模块ngx_http_auth_basic ...

  4. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  5. QT使用painter绘制文字时的居中显示

    在窗体上绘制文字时,在paintEvent()方法里用QPainter进行绘制. 主要获取对字符串打印在屏幕上时占用的像素大小 QPainter p(this); QFont font("宋 ...

  6. CometD的消息推送

    CometD 框架 CometD 框架是基于 HTTP 的事件驱动通信解决方案.CometD 框架提供了一个 Java 服务器部件和一个 Java 客户端部件,还有一个基于 jQuery 和 Dojo ...

  7. JQuery 验证框架

      设计完美,可扩展性好,以后就用他了. http://docs.jquery.com/Plugins/Validation /**//** * @author ming */ $(document) ...

  8. CEF小白人系列1-认识CEF

    手头上有个项目需要做浏览器的相关功能,评估了几个嵌入式方案最后选定CEF作为开发基础. 在入坑新技术的时候第一选择是去官网学习,这是一个非常好的习惯. CEF官网(请科学上网) https://bit ...

  9. 【Unity3D技术文档翻译】第1.4篇 AssetBundle 依赖关系

    上一章:[Unity3D技术文档翻译]第1.3篇 创建 AssetBundles 本章原文所在章节:[Unity Manual]→[Working in Unity]→[Advanced Develo ...

  10. 【mysql】 操作 收集持续更新

    一个字段可能对应多条数据,用mysql实现将多行数据合并成一行数据 GROUP_CONCAT(Name SEPARATOR ',') 需注意: 1.GROUP_CONCAT()中的值为你要合并的数据的 ...