[原]兼容浏览器的布局CSS心得体会

简介:

要保证CSS效果在IE和Firefox下兼容的话,推荐如下:

1:尽量少的使用Margin,使用padding来设置距离,margin太不稳定了,

(当碰到莫名其妙的时候,试试这条。将margin设为0,单独设置padding)


2:如果要设置float的话,心里问下自己是否会溢出(内容溢出),会有什么结果中,如果有的话,

解决方案有很多种,最简单的在后面加个<br />,设置<br />的style:display:none;clear:both;。

楼下有说先设置float:right,后设置float:left,至今不明白,能不能详细解释下


3:作为容器的div的position最好设置为relative,以作为子内容的定位元素,如果确定设置position为absolute没什么影响的话,也可以设置为absolute;

 

这里有一点是不要设置其left和top,这样主要是为了方便内部元素,当我们知道内容元素的定位元素就是它的上级元素的时候,定位也相对容易点,当然了高手可以略过。


4:body,以及一些比较大的容器div的margin最好设置为0,padding也为0;因为margin在浏览器中兼容性是不好,主要是全局配置。

 


5:  ul的margin要显式的设定其值,比如:ul{margin:10px;},不显式指定的话,在IE和firefox下其margin会不同。

 


6: CSS开始布局CSS:

 

body{margin:0px;padding:0px; text-align:center}//这里做一些全局配置

#container{margin:1px auto 0px auto ; width:XXXX; text-align:left;}

//设置大div居中,注意这里的每个细节

1:margin:1px auto 0px auto;可以达到居中效果,即在IE和Firefox下居中,主要是左右的margin为auto;

2:width:xxxx;设置大div的宽度,主要作用是为了防止当浏览器分辨率的变化给div造成影响,因为这个是根div,所以为了好布局,我固定它的宽度,大家可以看看163,xunlei,sohu,这些门户网站,可以发现最大的那个div宽度是固定的。

3:text-align:left:设置内容为左对齐。

 

复制代码
1  < html >
2  < head >
3  < title > Test </ title >
4  < body >
5  < div  id ="container" ></ div >
6  </ body >
7  </ html >
复制代码


 

 

以上只是我的一些心得体会,如果大家有什么好的建议的话可以写在下面,这里有一点要求就是请说明为什么要这样做?






本文转自LoveJenny博客园博客,原文链接:http://www.cnblogs.com/LoveJenny/archive/2009/06/16/1504673.html,如需转载请自行联系原作者

目录
相关文章
|
1天前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
10 4
|
1天前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
15天前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
15天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
2月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
47 3
|
2月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
43 3
|
2月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
54 1
|
2月前
|
前端开发
CSS Grid 布局:span 关键字
CSS Grid 布局:span 关键字
48 0
|
2月前
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
39 0
|
2月前
|
编解码 前端开发 容器
CSS弹性布局:打造响应式与灵活的网页设计
CSS弹性布局:打造响应式与灵活的网页设计
81 0