css布局中有什么不好的习惯(CSS网页布局时常犯错误有哪些)

本文目录
CSS网页布局时常犯错误有哪些
利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。
float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。
DW制作网页时使用CSS该注意什么!
很多CSSer是从以前的网页制作中开始学习CSS网页布局的,或许还存在着一定的DW习惯。希望此文能帮助大家理解和纠正一些不好的习惯。
由于“可视化”和操作简便,在DW中编写CSS的朋友很多,今天我们介绍一些在DW中编写CSS的“最佳习惯”,希望对大家有所帮助。
CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性。有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点。本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议。
一般地讲,样式表(style sheet)就是控制网页内容外观的格式化的规则的集合。可以以三种不同的方式在你的页面中使用CSS:
代码式(Inline):写入到代码中的一次性的样式。
内嵌式(Embedded):可控制一个页面中所有元素的样式表
外联式(External):可控制许多页面中的元素的样式表
事实上,许多站点都根据需要把这三种方式结合起来使用。
在使用CSS时一个需要重点考虑的事实是不同的浏览器以及同一浏览器的不同版本以不同的方式来解析CSS。除了网络浏览器的差异之外,你还要意识到还有很多其他的浏览器,比如听力浏览器,基于电视的浏览器以及Palm pilot和TTY(teletypewriter,远程打字机)一类的手持设备。
大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范,但按照现有标准来使用CSS却还是不无裨益的。一般来说,开发人员应尽可能将内容与报告分离开来。这样做的好处在于:
1、增加站点的寿命
不规范的样式表可能在当时觉得很方便,但新版本的浏览器出来以后,很可能就会出现兼容性问题。到时逐页修改站点就是一项非常费时的工作同时也使使用CSS失去了意义。
2、让你的站点对所有的用户以及浏览器都适用
有些地方的政府已经立法要求网站必须让残障人士也同样可以浏览。为残障认识设计的浏览设备,比如听力浏览器,对CSS规范性要求极其严格。
3、让站点更新和维护更加轻松
使用方式得当的话,CSS可让你在一个页面中的调整快速应用到所有页面中去。
你首先要做的选择是使用哪一种样式表。当涉及到最佳习惯时,对不同样式表的分析如下:
Inline CSS:简单地说,你应该尽量避免使用。除了一些其他的缺点之外,使用Inline CSS意味着你并没有利用到CSS的真正优点,即你并没有将内容与格式分离开。DW MX使用Inline CSS主要是为了定位页面元素(这些元素在DW MX的用户界面中称为“层(layer)”),或者为了使用某个DHTML特效,它需要使用Inline 样式的javascript来改变一个对象的属性。
Embedded CSS:它也不是最理想的,因为它只能对当前页面施加影响。在更新的过程中,如果某一个页面丢失,将会使站点的风格不一致;另外,当用户浏览你的站点时,每一页都要下载一次样式表信息。
External CSS:这是你的第一选择。External CSS可以让所有连接到它的页面保持一致的外观风格;提纲挈领,更改一次,轻松更新所有相关页面;让你的页面体积更小,浏览速度更快。
Html和CSS布局技巧总结(偶尔回顾回顾布局也是很有必要的)
优点:兼容性好;
不足:需要同时设置子元素和父元素;
优点:兼容性好
缺点: 需要指定宽度
优点:只需要对自身进行设置
不足:IE6,7需要调整结构
不足:兼容性差,IE9及以上可用
缺点:兼容性差,如果进行大面积的布局可能会影响效率
在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;
该布局方式非常常见,适用于定宽的一侧常为导航,自适应的一侧为内容的布局
注:IE6会有3px的bug
如果我们需要将两列设置为等高,可以用下述方法将“背景”设置为等高,其实并不是内容的等高
利用右侧容器的flex:1,均分了剩余的宽度,也实现了同样的效果。而align-items 默认值为stretch,故二者高度相等
基本html结构为父容器为parent,自容器为left,center,right.其中,left,center定宽,right自适应
多列等分布局常出现在内容中,多数为功能的,同阶级内容的并排显示等。
html结构如下所示

更多文章:
immediately的用法(immediately的含义及用法)
2026年4月28日 23:00
prepare for disappointment(disappointment是什么意思)
2025年12月26日 11:15
backspace用英文怎么读(Backspace,这个键怎么读)
2025年10月1日 12:45
javaweb实验心得(求一份java上机实验心得,300字左右)
2025年7月1日 05:45
fgets函数的作用是(标准函数fgets(s,n,f)的功能是)
2025年12月10日 18:30
settimeout类型(setTimeout()和setInterval()方法的区别)
2026年5月26日 18:30
prefs文件怎么打开(C4D如何导出自定义快捷键该文件后缀为res的格式)
2026年9月21日 22:30
什么是sophisticated(sophisticated 是什么意思)
2026年1月3日 14:15
struts sql结构(如何理解SQL servers的体系结构)
2025年11月3日 18:00
iferror函数参数使用(excel2010表格中如何使用iferror函数 iferror函数在excel中使用方法)
2026年4月26日 15:15
holders是什么意思(clear holders 什么意思)
2025年12月9日 21:00
linux下安装jdk解压就完了(linux下安装jdk并设置环境变量)
2025年12月22日 12:30
python基础编程代码(Python中的程序基本结构有哪些呢)
2026年9月3日 20:00










