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. C#读取物理网卡信息及其对应的IP地址

    using Microsoft.Win32; using System; using System.Collections; using System.Collections.Generic; usi ...

  2. IT项目经理成长手记

    1.流程化,项目化,工业化: 2.启动,规划,实施,监控,收尾.五个过程 3.需求管理,项目策划,项目监控,集成项目管理,定量项目管理,供应商协议管理,风险管理. 4.项目经理是熬出来的,伟大都是熬出 ...

  3. POJ 2083 Fractal

    Fractal Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 6646   Accepted: 3297 Descripti ...

  4. java面试欠缺知识点总结

    针对最近面试被问到的问题,总结自己欠缺的知识点,并要在接下来的1年内加强这些知识: Java方面:反射.线程concurrent包: Spring方面:Ioc和Aop.事务: 持久化框架:设计并实现分 ...

  5. How to change statusbar text color to dark on android 4.4

    Because I haven't enough votes, so post picture at here, thank you. Almost 2 weeks ago, I was search ...

  6. Entity Framework访问MySQL数据库的存储过程并获取返回值

      一.创建MySql存储过程 1, CREATE PROCEDURE `InsertAlarmInfo`(in businessindex int, in providerindex int, in ...

  7. 微信公众号开发第六课 BAE结合实现迅雷账号随机分享

    迅雷离线是个好东西,那么我们能不能实现这样一个功能,回复迅雷,随机返回一个迅雷账户和密码. 首先在t_type类型表中添加 迅雷以及对应用值xunlei,这样返回的case值中对应值xunlei. 建 ...

  8. Sass学习之路:Sass、Compass安装与命令行

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

  9. cp: omitting directory”错误

    在linux下拷贝的时候有时候会出现cp:omitting directory的错误 , 是因为目录下面还有子目录,不能直接拷贝 解决办法: 命令:cp -r 

  10. bootstrap精简教程

    bootstrap 的学习非常简单,并且它所提供的样式又非常精美.只要稍微简单的学习就可以制作出漂亮的页面. bootstrap中文网:http://v3.bootcss.com/ bootstrap ...