热点网|医学教育网|北京pk10开奖直播 pk10开奖直播 北京赛车pk10 pk10开奖直播 北京赛车pk10 PK10开奖直播 北京赛车pk10开奖直播 北京pk10 北京pk10
网站运营 | 站长学院 | 技术文档 | 成语 | 歇后语 | 桌面壁纸 | 帝国时代 | 代码收藏 | IP地址查询 | 生活百科 | 生日密码 | CSS压缩 | 用户评论

CSS备忘录

【 网络作者:佚名 更新时间:2009-09-11 | 字体:
[导读]以下内容的总结使用的浏览器是:Firfox2.0,IE7Float相关:跟在一个浮动标签之后的块级元素且此块级元素有Width属性>,那么IE7和FF的处理方式不同:1):对Margin的影响FF:块级元素的Margin边界不紧跟浮动元素,而是靠...

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

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

值进行比较,选取较大者)
例如:
<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;”>B-B</div>
id为a的Div就是上文说的浮动元素>>>,id为b的Div就是具有Width属性的块级元素

标签默认属性:

<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>
</div>

UL,li相关

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

ul>,则不能体现ul的Margin-top属性。不知道为什么??(当一个具有默认Margin属性的块级元素如果在一个容器内且它的顶端和底端没有其他

元素时,相应的Margin属性不会自动拉长容器的高度>>>。但是此Margin又的确占据了一部分空间)
例如:
在容器内,则没有体现出Margin-top属性
<div style=”width:150px; height:200px; background-color:#00ff00;”>
<ul>
<li style=”background-color:#FF6600;”>li-li-li</li>
<li style=”background-color:#FFCCFF;”>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=”width:100px; background-color:#FF0066; margin:70px; display:block;”>A</h1>
</div>
h1标签会自动把div撑开
但是当h1在li中时,h1的Margin并不能把li撑开>,可是这个Margin又是的确存在的(和下一个li有间距)>。就像h1的Margin被移动附加到li上

面一样>。这究竟是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>

非法的HTML

<span><p></p></span>
<p>不可以嵌套在<span>内

其他

高度不能自动适应1:
<div style=”width:300px;background-color:#FF9966;”>
<p style=”background-color:#CC6600; width:70%;”>p-p-p</p>
</div>
div的实际高度没有按照p的实际高度自动伸展,修改如下。增加padding属性后>,使div重新计算自身的高度>?;蛘呤褂闷渌姆绞嚼词笵iv重新

计算高度即可>>>。例如在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; 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;”></div>
</div>
浮动元素脱离了文档流>>,因此div的高度不包含浮动元素。对元素进行清理实际上为前面的浮动元素留出了垂直空间>。
overflow属性为hidden或auto的元素内如果包含有浮动元素,那么它会自动地为所包含的元素添加清除浮动属性>。

原文:http://www.chinawobo.com/trendline/articles/1031737.html

友荐云推荐
  • 转载请注明来源:网站运营 网址:http://www.chinawobo.com/ 向您的朋友推荐此文章
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载>,但请务必注明出处和原始作者>。文章版权归文章原始作者所有>>。对于被本站转载文章的个人和网站>,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们>,我们会尽快予以更正。
RSS订阅
  • QQ邮箱
  • 填写您的邮件地址>,订阅我们的精彩内容:
更多
© 2014 网站运营 - T086.com(原itlearner.com)
  • 美媒:美国对华战略缺乏头脑 2018-05-23
  • 中国钢企布局沿海 柳钢瞄准东盟经济圈 2018-05-23
  • 2018的偶像元年是否只是一场美丽的谎言?偶像练习生创造101选秀 2018-05-22
  • 上海临港有个“儿童大学” 2018-05-20
  • 2017年世界大学学术排名发布 清华进前50大学学术排名大学排行榜 2018-05-20
  • 日本战犯侵华罪行自供 2018-05-19
  • 塑料污染让人痛心 世界最深海沟竟成“垃圾场” 2018-05-19
  • 男子因琐事杀害女友并分尸抛河 警方根据美甲破案嘉兴美甲死者 2018-05-18
  • 166名中国人在泰国操控中国股市被警方押扣审讯 2018-05-17
  • 消防车进商场——“小小消防员”的消防安全乐体验 2018-05-17
  • 学者:“感应舍利”的出现为何是“必然” 2018-05-16
  • 中国等国利用可再生能源创造上千万工作岗位 2018-05-16
  • 只有用在外语环境下学习的人才懂的13个瞬间! 2018-05-16
  • 外交部回应“中国首次在南沙群岛部署导弹系统” 2018-05-15
  • 陕甘宁边区发行的光华劵:为找零需要,增发6种辅币 2018-05-14
  • 微商货源 | 冠珠陶瓷 | 6688电视家官网 | 中康体检网 | 安徽极热网 | 北京赛车开奖号码 | 快猴网 | 迪威乐云商devmsn | 易奇八字 | wwe美国职业摔角 | 八字算命 | 河南旅游景点大全 | 冠珠陶瓷 | 广东旅游景点大全 |
    RunTime:7.33ms QueryTime:7