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. iOS 模拟器键盘弹出以及中文输入

    1.虚拟键盘的弹出与收起切换: 快捷键:command+shift+K 2.中文输入: Xcode 菜单项 --> Product --> Scheme --> Edit Schem ...

  2. Qt实现FlatUI样式(开源)

    对于现在做前端开发人员来说,FlatUI肯定不陌生,最近几年扁平化的设计越来越流行,大概由于现在PC端和移动端的设备的分辨率越来越高,扁平化反而看起来更让人愉悦,而通过渐变色产生的质感色彩反而没有扁平 ...

  3. ThoughtWorks 2016年第1期DNA活动总结

    今天受邀参加了2016年ThoughtWorks公司成都分公司的2016年第一期DNA活动. 什么是DNA? DNA 即 Design And Analysis.设计与分析.这个活动主要是针对产品经理 ...

  4. 使用最新的“huihui中文语音库”实现文本转语音功能

    最近一个web项目中,需要进行语音播报,将动态的文字转换为语音(TTS)存为WAV文件后通过web播放给用户.选择了微软所提供的SAPI (The Microsoft Speech API),只需要几 ...

  5. Java中删除文件、删除目录及目录下所有文件(转)

    原文链接:Java中删除文件.删除目录及目录下所有文件 知识点:File.delete()用于删除“某个文件或者空目录”!所以要删除某个目录及其中的所有文件和子目录,要进行递归删除,具体代码示例如下: ...

  6. Android 优化布局层次结构

    前面介绍过使用HierarchyViewer和Android lint来优化我们的程序,这一篇算是总结性的,借助一个小例子来说用怎么优化应用布局.这个例子是android官网给出的,作者也当一把翻译. ...

  7. Ubuntu主题美化--使用WPS风格

    五一就这么过去了,我也没有出去玩,一个人闲的蛋疼,无聊就把ubuntu美化一下. 闲话不多说,先看效果: 壁纸是我自己制作的的,如果喜欢另存一下下面这张图设置成背景就可以了,分辨率是1366x768. ...

  8. 使用unetbootin制作Debian安装U盘

    有时需要在没有光驱的裸机上安装系统,这时我们可以使用unetbootin制作一个系统安装U盘. 1.在网上下载好vmlinuz,initrd.gz,boot.img.gz. 2.然后使用unetboo ...

  9. 【转】github上值得关注的前端项目

    综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单.star:15000 front-end-collect 分享自己长期关注的前端开发相关的优秀网站.博客.以及活跃 ...

  10. Django--上传文件

    需求 Django中forms表单上传文件处理​ 速查 views.py 1 2 3 4 5 6 7 8 9 def upload(request):     if request.method==' ...