CSS高级
*对齐块元素
对于块元素内部内容的水平对齐可以使用text-align:center;
而对于块元素本身在布局中的对齐可以使用margin属性,可以通过将左右外边距设置为auto来水平对齐.
<!DOCTYPE html><html><head><style>.center{margin:auto;width:70%;background-color:#b0e0e6;}</style></head><body><div class="center"><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p></div><p><b>注释:</b>除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。</p></body></html>
需要注意的是:除非已经声明了!DOCTYPE,否则在IE8及更早版本中margin:auto是无效的。
此外还可以通过position属性来进行设置左对齐和右对齐。
<!DOCTYPE html><html><head><style>.center{position:absolute;right:0;width:70%;background-color:#b0e0e6;}</style></head><body><div class="center"><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p></div></body></html>
还可以使用float进行设置:
<!DOCTYPE html><html><head><style>.right{float:right;width:300px;background-color:#b0e0e6;}</style></head><body><div class="right"><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p></div></body></html>
CSS高级要点笔记
原文地址:http://www.cnblogs.com/tsembrace/p/7954543.html