1. 100% width divs not spanning entire width of the browser in webkit. Even Body can not span the entire width of the  browser. 
So crazy.
There is a funny way to fix it: 
html { overflow-y: scroll; }

2.  When Div is 100% width, set padding: 20px. Then its actual width is bigger than 100%. Be careful!!!!

3. Book review:

>1. Margin collapsing
Margin collapsing only happens with the vertical margins of block boxes in the normal flow of the 
document. Margins between inline boxes, floated, or absolutely positioned boxes never collapse. 
 
>2. Inline boxes
Inline boxes are laid out in a line horizontally. Their horizontal spacing can be adjusted using 
horizontal padding, borders, and margins (see Figure 3-9). However, vertical padding, borders, 
and margins will have no effect on the height of an inline box. Similarly, setting an explicit height 
or width on an inline box will have no effect either. The horizontal box formed by a line is called a 
line box, and a line box will always be tall enough for all the line boxes it contains. There is 
another caveat, though—setting the line height can increase the height of this box. Because of 
these reasons, the only way you can alter the dimensions of an inline box is by changing the line 
height or horizontal borders, padding, or margins. 
 
>3. display: inline-block
Helpfully, CSS2.1 allows you to set the display property of an element to be inline-block. As 
the name suggests, this declaration makes the element line up horizontally as if it were an inline 
element. However, the contents  of the box behave as though the box were a block-level, 
including being able to explicitly set widths, heights, vertical margins, and padding. Historically, 
this property has been poorly supported; hence, it’s relative obscurity. Thankfully, inline-block is 
now supported by Firefox 3.0 and above, IE 8, and  the latest versions of Safari and Opera, so I 
think we are going to see inline-block being used to create more interesting layouts over the 
next few years.  
 
position: static, relative, absolute, fixed
>4. position: relative and absolute
The main problem people have with positioning is remembering which type of 
positioning is which. Relative positioning is “relative” to the element’s initial 
position in the flow of the document, whereas absolute positioning is “relative” 
to nearest positioned ancestor or, if one doesn’t exist, the initial container block.
 
>5. float
Because floated boxes aren’t in the normal flow of the document, block boxes in the regular flow 

of the document behave as if the floated box wasn’t there.

Study Tips的更多相关文章

  1. python及pandas,numpy等知识点技巧点学习笔记

    python和java,.net,php web平台交互最好使用web通信方式,不要使用Jypython,IronPython,这样的好处是能够保持程序模块化,解耦性好 python允许使用'''.. ...

  2. 【转载】《Learn More Study Less》整体性学习方法

    原文 忘记在哪里看到这本书的介绍了,据说是一个小子自学1年,完成了4年麻省理工的课程,然后写了一本他学习方法的书.我搜了一下,居然中英文版都有,就花时间好好读了一遍,就是这本. 以下是这本书的完整笔记 ...

  3. Free Professional Resume Examples and Writing Tips

    https://www.thebalancecareers.com/free-resume-examples-and-writing-tips-2063596 Do you need to write ...

  4. 科学论文写作 Tips

    感觉还是课程中给的英文描述会比较好,所以笔记大多数还是以老师的原英文 PPT 为主 1 Steps in the Writing Process 如何开展论文写作以及各个步骤的时间分配 1-1 Pre ...

  5. Mac上MySQL忘记root密码且没有权限的处理办法&workbench的一些tips (转)

    忘记Root密码肿么办 Mac上安装MySQL就不多说了,去mysql的官网上下载最新的mysql包以及workbench,先安装哪个影响都不大.如果你是第一次安装,在mysql安装完成之后,会弹出来 ...

  6. 【Tips】史上最全H1B问题合辑——保持H1B身份终级篇

    [Tips]史上最全H1B问题合辑——保持H1B身份终级篇 2015-04-10留学小助手留学小助手 留学小助手 微信号 liuxue_xiaozhushou 功能介绍 提供最真实全面的留学干货,帮您 ...

  7. layer.js中layer.tips

    <script src="~/Content/js/layer/layer.js"></script> layer.tips('名称不能为空', '#pro ...

  8. Improve Your Study Habits

    1.Plan your time carefully. Make a list of your weekly tasks.Then make a schedule or chart of your t ...

  9. HTML 最简单的tips 怎么支持指定DIV显示提示信息

    <body> <style type="text/css"> a.link{position:relative;} a.link div.tips{ bor ...

随机推荐

  1. Xamarin.Forms中的ListView的ItemTrapped事件与ItemSelected事件的区别

    今天对Xamarin.Forms中的ListView的两个事件(ItemTrapped和ItemSelected)做了小小的研究,发现有以下几点区别: 1.ItemTrapped事件会优先被触发. 2 ...

  2. FastReport.Net在Rozor中的应用

    Webconfig中配置 IIS6.0 <system.web> <httpHandlers> 下增加 <httpHandlers> <add path=&q ...

  3. nginx重定向规则入门

    nginx重定向规则的入门实例 时间:2015-12-17 15:18:03来源:网络 导读:nginx重定向规则,Nginx的重定向模块HttpRewriteModule的用法说明,nginx重定向 ...

  4. 【PRML读书笔记-Chapter1-Introduction】1.3 Model Selection

    在训练集上有个好的效果不见得在测试集中效果就好,因为可能存在过拟合(over-fitting)的问题. 如果训练集的数据质量很好,那我们只需对这些有效数据训练处一堆模型,或者对一个模型给定系列的参数值 ...

  5. 文件比对工具(Beyond Compare)

    文件比对工具: 工具名称:Beyond Compare 版本号:v3.3.13 下载地址:http://i.cnblogs.com/Files.aspx 官网最新版本下载地址:http://www.s ...

  6. SmartDoc(YUIDoc) 注释编写

    上面介绍了JS文档和Demo生成工具SmartDoc,本篇开始介绍一下注释的编写.SmartDoc使用的是YUIDoc的引擎,所以的注释规则都一样,先简单介绍下YUIDoc的注释编写. 编写注释是一个 ...

  7. STL中的算法小结

    ()要运用STL的算法,首先必须包含头文件<algorithm>,某些STL算法用于数值处理,因此被定义于头文件<numeric> ()所有STL算法都被设计用来处理一个或多个 ...

  8. [IR] Compression

    关系:Vocabulary vs. collection size Heaps’ law: M = kTbM is the size of the vocabulary, T is the numbe ...

  9. Rainyday.js – 傻眼了!竟然有如此逼真的雨滴效果

    Rainyday.js 是一个轻量的 JavaScript 库,利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果.Rainyday.js 尽可能的模拟现实的雨滴效果,几乎可以以假乱真了 ...

  10. [mysql]MySQL忘记密码

    1.修改MySQL的登录设置: vi /etc/my.cnf 在[mysqld]的段中加上一句:skip-grant-tables 保存并且退出vi. 2.重新启动mysqld # /etc/init ...