当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS备忘录

时间:2013-03-02 03:44来源:未知 作者:admin 点击:

标签:CSS备忘录 一样(9)这毕(1)备忘录(1)是我(3)Bug(15)懂得(1)又一次(1)CSS(655)竟是(1)
面一样。这毕竟是Bug仍是我又一次把它懂得过错。请看: div style=width:250px;background-color:#00ff00; ul li style=background-color:#FF6600;h1li-li-li/h1/li li style=background-color:#FFCCFF;h1li-li-li/h1/li /ul /div 以下内容的总结使用的阅读
CSS备忘录》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333202013.htm

面一样。这毕竟是Bug仍是我又一次把它懂得过错。请看:
<div style=”width:250px;background-color:#00ff00;”>
<ul>
<li style=”background-color:#FF6600;”><h1>li-li-li</h1></li>
<li style=”background-color:#FFCCFF;”><h1>li-li-li</h1></li>
</ul>
</div>

以下内容的总结使用的阅读器是:Firfox2.0,IE7

UL,li相干

非法的HTML

Float相关:
跟在一个浮动标签之后的块级元素且此块级元素有Width属性,那么IE7和FF的处置方法不同:
1):对Margin的影响
FF:块级元素的Margin边界不紧跟浮动元素,而是凑近更上一层父级元素;其中的内容缭绕浮动标签。
IE7:在浮动方向给块级元素增长了Margin属性。如果在此设置Margin属性则会依据程度紧缩准则进行压缩处理(自动增加的Margin值和设置的

ul,则不能体现ul的Margin-top属性。不晓得为什么??(当一个具备默认Margin属性的块级元素假如在一个容器内且它的顶端跟底端不其余

<span><p><,CSS基础:设置文本的背景颜色;/p></span>
<p>不能够嵌套在<span>内

高度不能自动适应1:
<div style=&rdquo,CSS基础:了解闭合浮动元素;width:300px;background-color:#FF9966;”>
<p style=”background-color:#CC6600; width:70%;”>p-p-p</p>
</div>
div的实际高度没有按照p的实际高度自动舒展,修改如下。增加padding属性后,使div从新计算本身的高度。或者应用其他的方式来使Div重新

元素时,相应的Margin属性不会自动拉长容器的高度。但是此Margin又的确盘踞了一局部空间)
例如:
在容器内,则没有体现出Margin-top属性
<div style=”width:150px; height:200px; background-color:#00ff00;”>
<ul>,CSs基础:CSS的位置问题;
<li style=”background-color:#FF6600;”>li-li-li</li>
<li style=”background-color:#FFCCFF,css基础自动定位的应用;”>li-li-li</li>
</ul>
</div>
在元素之后,则有Margin-top属性
<div>bbb</div>
<ul style=”display:block;”>
<li style=”background-color:#FF6600;”>li-li-li</li>
<li style=”background-color:#FFCCFF;”>li-li-li</li>
</ul>
<div>bbb</div>
再例如:两者显示完整不同。
<div id=”a” style=”background-color:#FF0099; width:150px;”>A-A-A-A-A-A</div>
<div style=”width:150px; background-color:#00ff00;”>
b
<ul>
<li style=”background-color:#FF6600;”>li-li-li</li>
<li style=”background-color:#FFCCFF;”>li-li-li</li>
</ul>
b
</div>
<div id=”a” style=”background-color:#FF0099; width:150px;”>A-A-A-A-A-A</div>

<div id=”a” style=”background-color:#FF0099; width:150px;”>A-A-A-A-A-A</div>
<div style=”width:150px; background-color:#00ff00;”>
<ul>
<li style=”background-color:#FF6600;”>li-li-li</li>
<li style=”background-color:#FFCCFF;”>li-li-li</li>
</ul>
</div>
<div id=”a” style=”background-color:#FF0099; width:150px;”>A-A-A-A-A-A</div>
li的问题:
咱们先做以下试验:
<div style=”width:200px;background-color:#FFCCFF;”>
<h1 style=&rdquo,css基础实例只显示下划线的文本框;width:100px; background-color:#FF0066; margin:70px; display:block;”>A</h1>
</div>
h1标签会自动把div撑开
然而当h1在li中时,h1的Margin并不能把li撑开,可是这个Margin又是确实存在的(和下一个li有间距)。就像h1的Margin被挪动附加到li上

标签默认属性:

<p>,<h1>等等标签默认有Margin属性。
<h1>标签元素在一个容器中时,最顶端元素如果是h1标签那么Maring-top生效,如果最低端是h1元素那么Margin-buttom完全失效。
例如:
<div style=”background-color:#006600;”>
<h1 style=”background-color:#CCFF99; display:block;”>li-li-li</h1>
<h1 style=”background-color:#CCFF99;display:block;”>li-li-li</h1>
<h1 style=”background-color:#CCFF99;display:block;”>li-li-li</h1>,CSS基础 选择符详解;
<,CSS在移动网站开发的前端技术和技巧;/div>

其他

ul在IE下拥有默认Margin-left属性,在FF下具有默认Padding-left属性。真他妈的烦。
ul, li默认情形下。ul有Margin属性。但是只有ul根在某个元素之后或者之前相应Margin才干体现出来,如果ul在某个容器内且容器内只有此

盘算高度即可。例如在Div内增添空的站位符
<div style=”width:300px;background-color:#FF9966; padding:1px 0;”>
<p style=”background-color:#CC6600; width:70%;”>p-p-p</p>
</div>
高度不能自动适应2:
<div id=”box” style=”width:200px; background-color:#FF0066;”>
<div class=”left” style=”float:left; background-color:#FFCCFF; width:100px; height:200px;”>left</div>
<a href=”#” mce_href=”#” >right a link</a><br />
<p style=”background-color:#FF9999; display:block,CSS在交互上的应用; margin:0;”>right p p-p-p</p>
<div>right div</div>
</div>
id为box的div不能依照class为left的div的高度自动伸缩。修正之:
<div id=”box” style=”width:200px; background-color:#FF0066;”>
<div class=”left” style=”float:left; background-color:#FFCCFF; width:100px; height:200px;”>left</div>
<a href=”#” mce_href=”#” >right a link</a><br />
<p style=”background-color:#FF9999; display:block; margin:0;”>right p p-p-p</p>
<div>right div</div>
<div style=”clear:both;&rdquo,CSS在IE6,IE7,FIREFOX中的区别;></div>
</div>
浮动元素脱离了文档流,因而div的高度不包含浮动元素。对元素进行清算实际上为前面的浮动元素留出了垂直空间。
overflow属性为hidden或auto的元素内如果包含有浮动元素,那么它会主动地为所包括的元素增加肃清浮动属性。

Tag:

值进行比拟,选取较大者)
例如:
<div id=”a” style=”float:left;background-color:#FF0099;”>A-A-A-A-A-A</div>
<div id=”b” style=”width:150px;background-color:#CCFF99,CSS圆角背景与三角形实现办法;”>B-B</div>
id为a的Div就是上文说的浮动元素,id为b的Div就是存在Width属性的块级元素

--> [网站建设之]CSS备忘录


(责任编辑:网站建设)
CSS备忘录相关文章
上一篇:CSS基础:设置文本的背景颜色 下一篇:CSS外部引用使用link与import的区别
回到顶部