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. Retrofit 实践

    Retrofit是一套RESTful架构的Android(Java)客户端实现,基于注解,提供JSON to POJO(Plain Ordinary Java Object,简单Java对象),POJ ...

  2. React之jsx转js

    参考于:http://lib.csdn.net/article/react/22694 1.npm install  -g babel-tools 2. 运行: jsx hello/jsx/ hell ...

  3. PHPStorm 常用 设置配置 和快捷键大全 Win/Mac

    [转自 http://blog.csdn.net/fenglailea/article/details/53350080] PHPStorm 下载及主题样式下载 http://www.lanmps.c ...

  4. 阿里云服务器 无法连接svn

    网上所说的在服务器中:1. 配置防火墙 2.svnserve.conf没配置好,3.svn客户端缓存,都进行排查处理,还是连接不上. 最后使用ip add 查看服务器网卡ip命令 发现无法看到当前服务 ...

  5. Java Integer类型比较

    今天做了一道题目题目如下: Integer a=10; Integer b=10; System.out.print(a==b); Integer c=200; Integer d=200; Syst ...

  6. hibhibernate中hql中的语句where语句查询List出现空

    1.java.sql.Date 与 java.util.Date java.sql.Date是从java.util.Date中继承而来 假设 dates1(java.sql.Date)要赋值给date ...

  7. 基于数据形式说明杜兰特的技术特点的分析(含Python实现讲解部分)

    ---恢复内容开始--- 注: 本博文系原创,转载请标明原处. 题外话:春节过后,回到学校无所事事,感觉整个人都生锈一般,没什么动力,姑且称为"春节后遗症".在科赛官网得到关于NB ...

  8. 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)

    第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 为Domain Model添加约束 前一部分, 我们已经把数据库创建出来了. 那么我们先看看这个数据库 ...

  9. 针对Student表的DAO设计实例

    完整代码以及junit,mysql--connector包下载地址 : https://github.com/CasterWx/MyStudentDao 表信息: 代码: dao包----impl包- ...

  10. javascript 函数详解

    一.函数的一些基础概念: 1.js中的函数使用function来声明. 2.关于return: 2.1  函数在执行到return语句后悔立即停止并退出,return后面的代码永远不会得到执行: 2. ...