div css脚本,DIV+CSS布局体验总结脚本之家推荐

最新推荐文章于 2021-11-14 18:45:28 发布

小薇酱

最新推荐文章于 2021-11-14 18:45:28 发布

阅读量207

点赞数

文章标签： div css脚本

DIV+CSS布局体验总结脚本之家推荐

发布时间：2011-01-06 00:17:44 作者：佚名我要评论

让你使用DIV+CSS排版不是让你用换个标签然后再去按照表格的方式去排版

而是做到内容与表现的分离

1: ID用于标识页面单独元素以及持久行的结构性元素方便JS的调用

类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形式无关：leftContent 而使用有意义的定义方式：sideBar等等。命名方式遵循“驼峰式大小写(标志符由多个单词组成除首词首字母小写外其余单词首字母均大写)”

2：避免滥用类当类型的结构需要不一样的表现时记得什么是层叠样式表具体结构中的p a h1等可使用如下方式：div.sideBar p{}定义即后代选择器+ID或类选择器组合方式。

3：DIV与SPAN DIV(块级框)用于对块级元素的分组 SPAN(行内框)用于对行内元素分组标识

4：对于页面基本默认的方式可以选择通用选择器(*标识)进行定义 * { padding：0; margin:0;}

5: body 也是可以添加ID和类的这样就可以为其添加特别样式。

6:样式表中导入样式表需在顶端覆盖规则为本身样式覆盖导入样式

7：CSS样式表细分化颜色布局风格表单均可分离这样对以后的修改和风格设计更方便

8：盒模型：内→外

content←width height(补充：height只有在父元素定义了绝对高度时其%才有意义)

border

padding(内补丁)-“填充”

background-image

background-color

margin(外补丁)-“空白边”透明可为负值

记住:在css中 width是指内容区域的宽度

IE/WIN与盒模型：

IE5.5/IE6怪异模式下：元素框总宽度=content.width+margin.width

FireFox/Opera/.. : 元素框总宽度=content.width+padding.width+border.width+margin.width

差异在于：IE5.5/IE6怪异模式下 width=有效content.width+padding.width+border.width 内补丁和边框被算在内容宽度里面

#select{width:750px;padding:10px;border:5px} IE怪异模式:总宽度：750px FF/OP：780px

IE怪异模式:有效内容宽度：750-20-10 FF/OP：750

IE6正常模式下：同于FF/OP

处理方法：在父元素或子元素中使用padding 本身不使用

空白边叠加：当两个空白边叠加时顶或底边将会叠加实际空白边高度=空白边大的值

例：

空白边高度为20px

但是如果这个时候你添加边框或则填充，将不再叠加

//定位机制//

9：相对定位(relative)：相对于其默认初始位置绝对定位：相对父级元素或画布、HTML元素与文档流无关可覆盖其他元素使用Z-INDEX 控制其层次。IE5.5/IE6下对right bottom时需设定框的宽高后则根据画布右底定位

绝对定位(absolute)

10：float浮动：记住：“在标准浏览器中浮动元素脱离了文档流不占据外围容器空间” 明白了这点你就会明白为什么IE和FIREFOX下表现的不同了。IE5.5、IE6浮动元素依然占据外围容器空间

例如：怎么在IE下feeter正常在firefox下就跑上去了呢？^_^ 清除浮动吧

IE下当float和text-align定义的方向一样时出现双倍错误：select{float:left;text-align:left;margin:0 10px;}

实际左边margin-left：20px；FF/OP：10px 解决：加上display：inline；

11：彻底理解 “清除浮动”clear

clear：none、left、right、both、

表示当前框元素哪些边不应该挨着浮动框

理解了10中float在不同浏览器下的表现你也就知道如何去使用清楚了。

12：背景图像的定位：只谈百分比 background:url(image-url.gif)no-repeat 20% 30%

20%：将图像X轴20%处与父元素X轴20%处重合 Y同理 top=0% bottom=100% left=0% right=100% center=50%

13：滑动门/

左右两个DIV 背景分别定义一般左背景图像比较长; 左背景定位：left center 右背景定位：right center

外部控制容器宽度一般小于等于两个背景和这样当内容动态变化时候右背景图像便感觉像在左背景图像上滑动，故名。

这样也可以实现：

首页

css：

#nav a{float:left;background:url("../images/navLeft.gif") no-repeat left top;padding:0;text-decoration:none; cursor:hand;}

#nav a span {float:left;display:block;background:url("../images/navRight.gif") no-repeat right top;padding:5px 36px 5px 40px;color:#ffffff}

原理相似，注意背景图像定位。

14:完美的居中布局：body{text-align：center；mini-width：760px；}

div#wrapper{margin：0 auto；text-align：left；width：750px；}

mini-width IE并不认识这是为老浏览器准备的，只是这个值比你需要的实际页面大就OK

15:小图标有时会给页面增色不少用前记得规划好整到一张大图片上这样可以减少服务器请求次数

Tag：布局体验

这篇文章主要介绍了关于CSS浮动与取消浮动的问题，通过设置元素脱离正常的文档流让元素靠左或向右靠近，通过设置文字包周围图片来解决浮动问题，具体解决方法跟随小编一起2021-06-28

本文介绍了什么是 ::marker 以及它的一些实用场景，可以看出虽然 ::before 、::after 也能实现类似的功能，但 CSS 还是提供了更具有语义化的标签 ::marker，也表明了大家需2021-06-25

很多前端的初学者,在使用margin的之后或许会遇到一些问题，本文主要介绍了margin塌陷和margin合并，需要的朋友们下面随着小编来一起学习学习吧2021-06-24

当我们想写一个类似掘金的文章或者自己的博客的时候，是否有想过该怎么实现给自己文章的章节添加章节号，本文就来介绍一下使用CSS实现章节添加自增序号的方法，感兴趣的可2021-06-23

本文主要介绍了CSS变量实现主题切换的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-06-23

本文就将介绍一些使用单标签绘图的技巧，并且使用这些技巧，借用单个标签去实现一些复杂图形，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2021-06-16

这篇文章主要介绍了CSS几步实现赛博朋克2077风格视觉效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-15

今天来带大家做一个可爱的滑动导航栏效果，这个demo很基础，但是使用场景非常广泛，感兴趣的小伙伴们可以参考一下2021-06-15

大家都知道Calc方法有个很大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度，本文通过一个例子给大家详细介绍，需要的朋友参考下吧2021-06-03

本文将给大家介绍使用 CSS prefers-* 规范提升网站的可访问性与健壮性的相关知识，在css媒体查询中新增的几个特征功能,本文也给大家详细介绍，需要的朋友可以参考下2021-05-25

div css脚本,DIV+CSS布局体验总结 脚本之家推荐

div css脚本,DIV+CSS布局体验总结脚本之家推荐