Html回溯1

<code>          </code> 

<code>          </code><code>块元素的特征：(block)</code>

<code>       </code><code>含义：能够设置元素尺寸，隔离其他元素。</code>

<code>          </code><code>1：在没有设置宽度的时候，默认为父级的宽度。</code>

<code>          </code><code>2：块元素默认独占一行。</code>

<code>          </code><code>3：支持所有css指令。</code>

<code>       </code><code>内联元素的特征：(lnline)</code>

<code>       </code><code>含义：不能够设置元素尺寸，它能自适应内容， 无法隔离其他元素。其他元素会紧跟其后。</code>

<code>          </code><code>1：宽高由内容撑开。</code>

<code>          </code><code>2：不支持宽高(width,height)属性</code>

<code>          </code><code>3：同排可以跟上同类的标签。</code>

<code>          </code><code>4：不支持上下的margin。</code>

<code>          </code><code>5：代码中的换行要被解析。</code>

<code>       </code><code>内联块:(Inline-block)</code>

<code>       </code><code>含义：可以设置元素尺寸，但无法隔离其他的元素。</code>

<code>           </code><code>1：块在一行显示。</code>

<code>            </code><code>2：行内属性标签支持宽高。</code>

<code>            </code><code>3：没有宽度的时候内容撑开高度。</code>

<code>            </code><code>4: 标签之间的换行间隙会被解析。</code>

<code>            </code><code>5：ie6,ie7不支持块属性标签的inline-block。</code>

<code>            </code><code>练习一：</code>

&lt;!doctype html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Document&lt;/title&gt;

&lt;style type="text/css"&gt;

    #parent a{

     width: 17px;

     height: 20px;

     font: 12px '宋体';

     border:1px solid #e0e1e2;

     display:inline-block;

     text-decoration: none;

     text-align: center;

     line-height: 20px

    }

    #parent .page{

     width: 64px;

    a:hover,.active{

     background: #1f3a87;

     color: #fff;

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="parent"&gt;

&lt;a class='page' href='#'&gt;上一页&lt;/a&gt;

&lt;a href='#'&gt;1&lt;/a&gt;

&lt;a href='#'&gt;2&lt;/a&gt;

&lt;a href='#' class='active'&gt;3&lt;/a&gt;

&lt;a href='#'&gt;4&lt;/a&gt;

&lt;a href='#'&gt;5&lt;/a&gt;

&lt;a href='#'&gt;6&lt;/a&gt;

&lt;a href='#'&gt;7&lt;/a&gt;

&lt;a href='#'&gt;8&lt;/a&gt;

&lt;a href='#'&gt;9&lt;/a&gt;

&lt;a class='page' href='#'&gt;下一页&lt;/a&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

<code>                  </code><code>float/文档流 （让块元素在同一行显示）</code>

<code>        </code><code>float: left|right|none|inherit</code>

<code>        </code><code>left:左浮动</code>

<code>        </code><code>right:右浮动</code>

<code>        </code><code>inherit:继承父级的浮动属性</code>

<code>        </code><code>none:不浮动</code>

<code>        </code><code>文档流是文本当中可显示对象在排列时所占用的位置。</code>

<code>        </code><code>浮动的定义:</code>

<code>    </code><code>使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停下来。</code>

<code>        </code><code>clear: left|right|both|none|inherit   ：清楚某个方向上的移动。</code>

<code>        </code><code>Float的特征:</code>

<code>            </code><code>1：块在一排显示。</code>

<code>            </code><code>2：内联支持宽高。</code>

<code>            </code><code>3：默认内容撑开宽度。</code>

<code>            </code><code>4：“脱离文档流”。</code>

<code>            </code><code>5：提示层级半层。</code>

<code>        </code><code>清浮动方法：</code>

<code>            </code><code>1：加高度</code>

<code>            </code><code>问题：扩展性不好。</code>

<code>            </code><code>2：父级浮动</code>

<code>            </code><code>问题：页面所有元素都需要加浮动，margin左右自动失效。</code>

<code>            </code><code>3：inline-block 。</code>

<code>            </code><code>问题：margin左右auto失效</code>

<code>            </code><code>4：br清浮动。</code>

<code>            </code><code>问题：不符合工作中：结构，样式，行为，三者分离的要求</code>

<code>            </code><code>5：after伪类清浮动方法。（父级）</code>

<code>            </code><code>看实例:</code>

<code>            </code><code>:after{} IE6,7不兼容</code>

<code>            </code><code>zoom；ff不支持。触发IE下haslayout,使元素根据自身内容计算宽高</code>

<code>            </code><code>6:  空标签清浮动。</code>

<code>            </code><code>问题：IE6最小高度19px,（有2px偏差）</code>

<code>            </code><code>7: overflow: hidden</code>

<code>       </code> 

&lt;title&gt;完美清浮动&lt;/title&gt;

.clear:after{

content: '';

display: block;

clear: both;

}

.clear{

*zoom:1;

.parent{

border: 1px solid red;

.son{

background: pink;

width: 200px;

height: 200px;

float:left;

&lt;div class="parent clear"&gt;

&lt;div class="son"&gt;&lt;/div&gt;

本文转自 沉迷学习中 51CTO博客，原文链接：http://blog.51cto.com/12907581/1929513，如需转载请自行联系原作者