文档流 | 易学教程

【转】Python 之Web编程

阅读更多关于【转】Python 之Web编程

转： https://www.cnblogs.com/chenyanbin/p/10454503.html 一、HTML是什么？ # 　　htyper text markup language 即超文本标记语言　　超文本:就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素　　标记语言：标记(标签)构成的语言　　静态网页：静态的资源，如xxx.html 　　动态网页：html代码是由某种开发语言根据用户请求动态生成　　html文档树结构图：二、什么是标签？ # 　　- 由一对尖括号包裹的单词构成，如<html> 所有标签中的单词不可能从数据开头　　- 标签不区分大小写<html>和<HTML>，建议使用小写　　- 标签分两部分：开始标签<a>和结束标签</a>，两个标签之间的部分，叫标签体　　- 有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭合标签，如：<br/>、<hr/>、<input/>、<img/> 　　- 标签可以嵌套，但不能交叉嵌套。如:<a><b></a></b> 三、标签的属性 # 　　- 通常是以键值对形式出现的，例如 name="alex" 　　- 属性只能出现在开始标签或自闭合标签中　　- 属性名字全部小写，属性值必须使用双引号或单引号包裹，如:name="alex" 　　- 如果属性值和属性名完全一样

float—上篇

阅读更多关于 float—上篇

1. 引言　　对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。　　这就是我们又爱又恨的——float。所以，系统的学一学float是非常非常重要的。除了看书和看博客文章之外，我推荐大家去看一个奇葩（声音很有磁性，你懂得）录制的教程《CSS深入理解之float浮动》，讲的很好很透彻。 2. 重新认识float 2.1. 误解和“误用” 　　既然提到“误用”，各位看官就此想想，自己平日是怎么使用float的？另外，既然“误用”加了引号，就说明这样的使用并不是真正的误用，而是误打误撞使用之后，带来了真正的效果。　　这样一问大家，我想绝大多数用float都是为了——横向排版、或者多列布局。这样的使用是正确的，大部分人都这样使用，bootstrap的栅格系统也是使用了float来实现的，并且在css3被普及之前，多列布局的最佳解决方案也是使用float——要不然你就用table。　　但是，这样使用确实是对float的一种误解和“误用”，因为float被设计出来的初衷是用于——文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。　　　　但是，当时的多列布局和横向排版主要是依靠table实现，后来人们见见的发现

负值之美：负margin在页面布局中的应用

阅读更多关于负值之美：负margin在页面布局中的应用

负边距创建自适应宽度的流体布局的实现方法 http://www.jb51.net/css/21617.html CSS布局奇淫技巧之-多列等高 http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html 负值之美：负margin在页面布局中的应用 http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html 负边距在普通文档流中的作用和效果网页中没有脱离文档流的元素（绝对定位、固定定位等），其在页面中的位置是随文档流的变化而变化的，如下图：负边距会使它们在文档流中的位置发生偏移，但这种偏移不同于相对定位，通过相对定位偏移后，其仍然会坚守着它原来的空间，不会让文档流的其它元素乘虚而入，而通过负边距进行偏移的元素，它会放弃偏移前占据的空间（这点和绝对定位有点相似），这样它后面文档流中的其它元素就会“流”过来填充这部分空间。还是通过例子来说明吧。现在我们把上图中的块状元素、行内元素以及inline-block元素都设一个负边距 margin:-10px; 看看会发生什么：我们看到，黑灰色的块状元素好像向左和向上都分别嵌入了浏览器窗口的边界里10px,然后块状元素下面的文字也爬到了它身上，行内元素向左移动盖住了它前面的一个字

几种有效的清除浮动的方法

阅读更多关于几种有效的清除浮动的方法

浮动是 CSS 布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离文档流这一特性，使浮动成为 CSS 布局的难点之一浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘。当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果清除浮动有好一些方法，但兼容各种浏览器的方法却不多，下面我就介绍几个比较有效的兼容的方法: 我们以下面的 HTML 代码为例来说明这几种方法的用法： <div id="box"> <div id="sidebar"></div> <div id="main"></div> </div> 对父级设置CSS高度原理：父级 div 手动定义 height ，就解决了父级 div 无法自动获取到高度的问题优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题建议：不推荐使用，只建议高度固定的布局时使用对应 CSS 代码： #box{ width:500px; margin:10px auto; background:#ccc; height:500px;/*解决代码*/ } #sidebar{ width:190px; height:500px; float:left;

Html position（static | absolute | fixed | relative）定位

阅读更多关于 Html position（static | absolute | fixed | relative）定位

语法： position : static | absolute | fixed | relative 参数： static : 无特殊定位，对象遵循HTML定位默认规则 absolute : 绝对定位。将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性进行绝对定位。而其层叠通过 z-index 属性定义。此时对象不具有边距，但仍有补白和边框。相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移。偏移后，原来的空间会被其他元素挤占 relative : 相对定位。对象不能想绝对定位一样层叠，但可依据 left ， right ， top ， bottom 等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。 positon 名称 (1) 是否将对象脱离文档流 (2) 偏移参照对象偏移属性 (3) 原先位置是否会被其他元素占用 (4) 是否能通过z-index层叠 absolute 绝对定位是相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移（即body左上角坐标原点） left ， right ， top ， bottom 是是 relative

那些年我们一起清除过的浮动

阅读更多关于那些年我们一起清除过的浮动

浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局；恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动还是闭合浮动（Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none； 2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。两者的区别请看优雅的 Dem o 通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。二、为何要闭合浮动？要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位（其中

css样式基础三

阅读更多关于 css样式基础三

css的定位：其中css中被分为块级元素与行内元素。如块级元素div、hx标签、p元素。行内元素span和strong W3school给出的一切皆为框的定义。而且可以使用display属性，强行将行内元素变为块级元素。如display：block。 CSS的定位机制：主要分为三类：普通流、浮动、和绝对定位。 position属性 static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 fixed元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。定位属性： position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

从文档流认识html

阅读更多关于从文档流认识html

写html，css的同学应该需要清楚什么是文档流。文档流：将窗体自上而下分成一行一行, 并在每行中按从左至右的挨次排放元素,即为文档流。每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。内联元素也不会独有一行. 一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位. 然则在IE中浮动元素也存在于文档流中。　　浮动元素不占任何正常文档流空间，而浮动元素的定位照样基于正常的文档流，然后从文档流中抽出并尽能够远的挪动至左侧或许右侧。当一个元素脱离正常文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。　　基于文档流，理解以下的定位形式: 　　相对定位：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。　　绝对定位：即完全离开文档流, 相关于position属性非static值的比来父级元素进行偏移。固定定位：即完全离开文档流，相关于视区进行偏移。文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域

CSS文档流与块级元素和内联元素

阅读更多关于 CSS文档流与块级元素和内联元素

3 月，跳不动了？>>> CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理>;<). 浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

css知多少（8）——float上篇

阅读更多关于 css知多少（8）——float上篇

原文: css知多少（8）——float上篇 1. 引言　　对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。　　这就是我们又爱又恨的——float。所以，系统的学一学float是非常非常重要的。除了看书和看博客文章之外，我推荐大家去看一个奇葩（声音很有磁性，你懂得）录制的教程《CSS深入理解之float浮动》，讲的很好很透彻。 2. 重新认识float 2.1. 误解和“误用” 　　既然提到“误用”，各位看官就此想想，自己平日是怎么使用float的？另外，既然“误用”加了引号，就说明这样的使用并不是真正的误用，而是误打误撞使用之后，带来了真正的效果。　　这样一问大家，我想绝大多数用float都是为了——横向排版、或者多列布局。这样的使用是正确的，大部分人都这样使用，bootstrap的栅格系统也是使用了float来实现的，并且在css3被普及之前，多列布局的最佳解决方案也是使用float——要不然你就用table。　　但是，这样使用确实是对float的一种误解和“误用”，因为float被设计出来的初衷是用于—— 文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。　　　　但是

订阅文档流