html页面布局笔记

一般html布局会用居中显示，这里需要注意的是，当元素设置了固定宽度之后，margin：0 auto才适用，如果设置了width为100%，则无效：

<code>.wapper{</code><code>margin</code><code>:</code><code>0</code> <code>auto</code><code>;width </code><code>100%</code><code>; }  \\这是无效的</code>

<code>.wapper {</code><code>margin</code><code>:</code><code>0</code> <code>auto</code><code>;width </code><code>750px</code><code>;}  \\这是正确的</code>

float属性：一般float会对它自己后面的标签产生影响（只对它后面的标签影响），这时受影响的标签需要清除浮动。

<code>clear：</code><code>both</code><code>;     #只对float后面受影响的标签有效，但对父级标签无效。</code>

<code>overflow：</code><code>hidden</code><code>;  #对float后面的标签和父级标签都有效。</code>

float还会影响父级标签，比如：

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"test"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"test1"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"test2"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

这里如果test2设为float，则test2后面的标签和父级标签test都会受到影响。

position定位方式：

<code>#静态定位</code>

<code>#相对定位</code>

<code>#绝对定位</code>

可设置四个属性值：

<code>static</code>

<code>relative</code>

<code>absolute</code>

<code>fixed</code>

html a标签默认未点击的颜色为蓝色，点击过后为紫色，如何修改？

<code>.nav a:link,.nav a:visited{color:green;text-decoration:none;}</code>

<code>.nav  a:hover,.nav a:actived{color:red;text-decoration:none;}</code>

版权声明：原创作品，谢绝转载。否则将追究法律责任

本文转自 王家东哥 51CTO博客，原文链接:http://blog.51cto.com/xiaodongge/1931747