域名注册

• 中文域名
• 英文域名
• 通用网址
• 域名解析
• 域名转入\转出

虚拟主机

• 主机购买
• 管理主机
• FTP上传
• 数据库管理
• 主机续费升级

网站建设

• 建站流程介绍
• 网站设计
• 网站改版
• 网站维护
• 网站推广

企业邮局

• 邮箱使用
• 管理邮箱
• 邮箱续费升级
• 全球邮局

网站优化

• seo优化
• seo技巧
• 收索引擎优化
• 关键词优化

网站备案

• 备案流程指南
• 修改备案
• 备案资料下载
• 备案小技巧

服务器租用

• 服务器租用
• 服务器托管

其它服务

• 400电话
• 在线客服
• 财务常见问题
• 会员常见问题

• 您现在的位置： 创新互联 >> 网站建设 >> 网站建设常见问题 >> 网站制作：CSS备忘录Marging用法和标签的使用

网站制作：CSS备忘录Marging用法和标签的使用

• 作者：曾小姐 文章来源：成都网站建设 点击数：953 更新时间：2011-12-02
• 　　前面，小编跟大家介绍了CSS与浏览器兼容问题，今天，成都创新互联小编还来说说CSS的备忘录。以下内容的总结使用的浏览器是：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属性的块级元素。
  　　2，标签默认属性
  　　<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>
  　　3，</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>
  　　4，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>
  　　5，非法的HTML
  　　<span><p></p></span>
  　　<p>不可以嵌套在<span>内
  　　6，高度不能自动适应
  　　a情况
  　　<div style=”width:300px;background-color:#FF9966;”>
  　　<p style=”background-color:#CC6600; width:70%;”>p-p-p</p>
  　　</div>
  　　div的实际高度没有按照p的实际高度自动伸展，修改如下。增加padding属性后，使div重新计算自身的高度。或者使用其他的方式来使Div重新计算高度即可。
  　　例如在Div内增加空的站位符
  　　<div style=”width:300px;background-color:#FF9966; padding:1px 0;”>
  　　<p style=”background-color:#CC6600; width:70%;”>p-p-p</p>
  　　</div>
  　　b情况
  　　<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的元素内如果包含有浮动元素，那么它会自动地为所包含的元素添加清除浮动属性。
  　　总结到此，吸收靠自己，大家看明白了没有呢？
  
• 上一篇文章：如何创建适合移动设备浏览的网站
  下一篇文章：input标签写CSS时需要注意的几点