CSS网页布局有哪些重要的方法_CSS网页布局有什么方法

　　开始研究响应式web设计，CSS 网页布局是入门。下面由学习啦小编为大家整理的CSS网页布局的方法，希望大家喜欢!

　　CSS网页布局的方法

　　1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。

　　2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。

　　3、一个兼容性调整(IE和Mozilla)的笨办法：初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。

　　临时解决方法：选择符{属性名:B !important;属性名:A}

　　4、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding

　　5、li标签前面的图标推荐使用background-image，而不是list-style-image。

　　6、IE分不清继承关系和父子关系的差别，全部都是继承关系。

　　7、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。

　　8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

　　9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

　　10、与内容无关的图片请使用background

　　11、定义颜色可以缩写#8899FF=#89F

　　12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

　　CSS简写的方法

　　1.色彩缩写

　　色彩的缩写最简单，在色彩值用16进制的时候，如果每种颜色的值相同，就可以写成一个：

　　color：#113366

　　可以简写为

　　color：#136

　　所有用到16进制色彩值的地方都可以使用简写，比如background-color、border-color、text-shadow、box-shadow等。

　　2.盒子大小

　　这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。盒子有上下左右四个方向，每个方向都有个外边距：

　　margin-top:1px;

　　margin-right:1px;

　　margin-botton:1px;

　　margin-left:1px;

　　3.list-style也有三个属性：

　　list-style-type:none || disc || circle || square || decimal || lower-alpha || upper-alpha || lower-roman || upper-roman

　　list-style-position: inside || outside || inherit

　　list-style-image: (url) || none || inherit

　　CSS应该注意哪些

　　1. CSS字体属性简写规则

　　一般用CSS设定字体属性是这样做的：

　　font-weight: bold;

　　font-style: italic;

　　font-varient: small-caps;

　　font-size: 1em;

　　line-height: 1.5em;

　　font-family: verdana,sans-serif

　　但也可以把它们全部写到一行上去：

　　font: bold italic small-caps 1em/1.5em verdana,sans-serif

　　真不错!只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

　　2. 同时使用两个类

　　一般只能给一个元素设定一个类(Class)，但这并不意味着不能用两个。事实上，你可以这样：

　　...

　　同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

　　3. CSS border的缺省值

　　通常可以设定边界的颜色，宽度和风格，如：

　　border: 3px solid #000

　　这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

　　如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

　　4. CSS用于文档打印

　　许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

　　也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

　　第1行就是显示，第2行是打印，注意其中的media属性。

　　但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

　　5. 图片替换技巧

　　一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。