合肥网站建设工作室

关注合肥工作室微信公众号,提供最新网站建设资讯

扫一扫微信二维码

我的CSS备忘录

2010-06-07 13:17:57网站建设 185

Float相关:bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
跟在一个浮动标签之后的块级元素且此块级元素有Width属性,那么IE7和FF的处理方式不同:bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
1):对Margin的影响bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
FF:块级元素的Margin边界不紧跟浮动元素,而是靠近更上一层父级元素;其中的内容围绕浮动标签。bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
IE7:在浮动方向给块级元素增加了Margin属性。如果在此设置Margin属性则会根据水平压缩原则进行压缩处理(自动增加的Margin值和设置的bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

值进行比较,选取较大者)bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
例如:bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div id=”a” style=”float:left;background-color:#FF0099;”>A-A-A-A-A-A</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div id=”b” style=”width:150px;background-color:#CCFF99;”>B-B</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
id为a的Div就是上文说的浮动元素,id为b的Div就是具有Width属性的块级元素bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

标签默认属性:bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<p>,<h1>等等标签默认有Margin属性。bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<h1>标签元素在一个容器中时,最顶端元素如果是h1标签那么Maring-top失效,如果最低端是h1元素那么Margin-buttom完全失效。bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
例如:bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div style=”background-color:#006600;”>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<h1 style=”background-color:#CCFF99; display:block;”>li-li-li</h1>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<h1 style=”background-color:#CCFF99;display:block;”>li-li-li</h1>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<h1 style=”background-color:#CCFF99;display:block;”>li-li-li</h1>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

UL,li相关bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

ul在IE下具有默认Margin-left属性,在FF下具有默认Padding-left属性。真他妈的烦。bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
ul, li默认情况下。ul有Margin属性。但是只有ul根在某个元素之后或者之前相应Margin才能体现出来,如果ul在某个容器内且容器内只有此bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

ul,则不能体现ul的Margin-top属性。不知道为什么??(当一个具有默认Margin属性的块级元素如果在一个容器内且它的顶端和底端没有其他bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

元素时,相应的Margin属性不会自动拉长容器的高度。但是此Margin又的确占据了一部分空间)bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
例如:bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
在容器内,则没有体现出Margin-top属性bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div style=”width:150px; height:200px; background-color:#00ff00;”>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<ul>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<li style=”background-color:#FF6600;”>li-li-li</li>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<li style=”background-color:#FFCCFF;”>li-li-li</li>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</ul>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
在元素之后,则有Margin-top属性bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div>bbb</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<ul style=”display:block;”>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<li style=”background-color:#FF6600;”>li-li-li</li>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<li style=”background-color:#FFCCFF;”>li-li-li</li>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</ul>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div>bbb</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
再例如:两者显示完全不同。bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div id=”a” style=”background-color:#FF0099; width:150px;”>A-A-A-A-A-A</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div style=”width:150px; background-color:#00ff00;”>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
bbg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<ul>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<li style=”background-color:#FF6600;”>li-li-li</li>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<li style=”background-color:#FFCCFF;”>li-li-li</li>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</ul>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
bbg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div id=”a” style=”background-color:#FF0099; width:150px;”>A-A-A-A-A-A</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div id=”a” style=”background-color:#FF0099; width:150px;”>A-A-A-A-A-A</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div style=”width:150px; background-color:#00ff00;”>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<ul>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<li style=”background-color:#FF6600;”>li-li-li</li>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<li style=”background-color:#FFCCFF;”>li-li-li</li>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</ul>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div id=”a” style=”background-color:#FF0099; width:150px;”>A-A-A-A-A-A</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
li的问题:bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
我们先做以下实验:bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div style=”width:200px;background-color:#FFCCFF;”>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<h1 style=”width:100px; background-color:#FF0066; margin:70px; display:block;”>A</h1>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
h1标签会自动把div撑开bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
但是当h1在li中时,h1的Margin并不能把li撑开,可是这个Margin又是的确存在的(和下一个li有间距)。就像h1的Margin被移动附加到li上bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

面一样。这究竟是Bug还是我又一次把它理解错误。请看:bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div style=”width:250px;background-color:#00ff00;”>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<ul>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<li style=”background-color:#FF6600;”><h1>li-li-li</h1></li>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<li style=”background-color:#FFCCFF;”><h1>li-li-li</h1></li>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</ul>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

非法的HTMLbg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<span><p></p></span>bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<p>不可以嵌套在<span>内bg2合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

本文关键词
CSS备忘录