div css制作网页实战笔记心得

2016-02-19 11:04 2 1 收藏

下面请跟着图老师小编一起来了解下div css制作网页实战笔记心得,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - Web开发 】


  以下的内容是一位网友的DIV CSS编码笔记,是值得大家学习的,在实际工作与开发中,将工作中的点滴记录下来,回首这些过往,你也会收获很多,与大家共同交流,相信进步就更快了。大家一起努力!
  最近在做一个魔术网的div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性。趁现在还清醒赶紧记下笔记先:
  一、并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的话,两个浏览器下会有区别,具体有一个会产生间隙。兼容做法就是都设置float属性。但是记住有设置过float就要将float clear掉,不然下面的div会叠在已float的div上。我通常把清除浮动写成单独的div class=clear/div放在所有浮动div的最下方。
  二、在上述1情况中需要设置子div的宽度,假如不设置的话子div的宽度会被默认为母div的100%,这样float根本就产生不了效果。当然还可以用display:inline的方法让两个子div并排,但是这样的话div的宽度设置将会失效(要把子div撑大只能考里面的元素)。
  三、ie中母div被设置成特定高度之后,假如里面的子div高度(有float的话就以清除float的div的最底为总高度)超过了母div设置的高度,ie会自动把母div撑大,但是ff却不能,ff中母div的高度会依然,里面的子层会溢出到外面来。兼容方法:不要设置母层高度。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160219/1596471.html

延伸阅读
标签: Web开发
“div+CSS”俨然已成为一种“时尚”,“重构”的春风吹遍大江南北,互联网一时间风声鹤唳,难以尽数的网站都不约而同地开始了自己的“重构”。然而打开这形形色色网站的源代码,却时常令人哑然失笑—— 我们看到有嵌套6、7层的div布局,有不用table的表格,有纯div+a构成的页面,有成百上千的表现层class……现在关于标准的书籍越来越...
标签: Web开发
单行一列 以下是引用片段: body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;width:370px;} 两行一列 以下是引用片段: body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-end{marg...
标签: Web开发
用于布局架构: #outer{overflow:hidden;}#outer .panel{float:right;width:286px;padding-left:21px;border-left:1px solid #E5E3D7;padding-bottom: 27670px !important;margin-bottom: -27670px !important;}#outer .main{float:left;width:510px;padding-bottom: 27670px !important;margin-bottom: -27670px !important;} 用于...
标签: Web开发
CSS网页布局中文排版有别于国外所介绍的英文排版,由于汉字的特殊性,所以有一些地方是需要大家注意的。今天webjx.com的这个文章或许对大家对排版的控制有所帮助。 一、如何设定文字字体、颜色、大小  使用font  font-style设定斜体,比如font-style: italic;  font-weight设定文字粗细,比如font-weig...
标签: Web开发
[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ] [操作系统:Windows] 貌似很多同学对为什么这个div在上层,那个div在下层、无论如何设置z-index都无法居上的问题纠结抓狂、上吐下泻、恶心失眠、郁郁而终,致使不敢随意使用层的叠加。但层的叠加效果,在交互设计中却频频出现,所以我们必须驾驭它,要驾驭它,就要掌...

经验教程

699

收藏

72
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部