css样式设计思路总结

2023-05-01 01:01:02html-css017

css样式设计思路总结,第1张

如何清除图片下方出现几像素的空白间隙？

方法1：

方法2：

除了top值，还可以设置为text-top | middle | bottom | text-bottom

甚至特定的<length>和<percentage>值都可以

方法3：

如何让文本垂直对齐文本输入框？

如何让单行文本在容器内垂直居中？

如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？

按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）

为什么Standard mode下IE无法设置滚动条的颜色？

将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可

如何使文本溢出边界不换行强制在一行内显示？

设置容器的宽度和white-space为nowrap即可，其效果类似<nobr>标签

如何使文本溢出边界显示为省略号？

方法（此方法Firefox5.0尚不支持）：

如何使连续的长字符串自动换行？

word-wrap的break-word值允许单词内换行

如何清除浮动？

方法1：

方法2：

方法3：

如何定义鼠标指针的光标形状为手型并兼容所有浏览器？

若将cursor设置为hand，将只有IE和Opera支持，且hand为非标准属性值

如何让已知高度的容器在页面中水平垂直居中？

Know More：已知高度的容器如何在页面中水平垂直居中

如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？

如何设置span的宽度和高度（即如何设置内联元素的宽高）？

如何给一个元素定义多个不同的css规则？

如何让某个元素充满整个页面？

如何让某个元素距离窗口上右下左4边各10像素？

如何去掉超链接的虚线框？

IE7及更早浏览器由于不支持outline属性，需要通过js的blur()方法来实现，如<a onfocus="this.blur()"...

如何容器透明，内容不透明？

原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上

方法2：

高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果

如何让整个页面水平居中？

定义body的text-align值为center将使得IE5.5也能实现居中

为什么容器的背景色没显示出来？为什么容器无法自适应内容高度？

通常出现这样的情况都是由于没有清除浮动而引起的

如何做1像素细边框的table？

方法1：

方法2：

IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。

如何使页面文本行距始终保持为n倍字体大小的基调？

注意，不要给n加单位

标准模式Standard mode和怪异模式Quirks mode下的盒模型区别？

标准模式下：Element width = width + padding + border

怪异模式下：Element width = width

以图换字的几种方法及优劣分析

思路1：使用text-indent的负值，将内容移出容器

该方法优点在于结构简洁，不理想的地方：

1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；

2.当该元素为链接时，在非IE下虚线框将变得不完整；

3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异

思路2：使用display:none或visibility:hidden将内容隐藏；

该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂

思路3：使用padding或者line-height将内容挤出容器之外；

该方法优点在于结构简洁，缺点在于：

1.由于使用场景不同，padding或line-height的值可能会不一样，不易抽象成公用样式；

2.要兼容IE5.5及更早浏览器还得hack

思路4：使用超小字体和文本全透明法；

该方法结构简单易用，推荐使用

为什么2个相邻div的margin只有1个生效？

本例中box1的底部margin为10px，box2的顶部margin为20px，但表现在页面上2者之间的间隔为20px，而不是预想中的10+20px=30px，结果是选择2者之间最大的那个margin，我们把这种机制称之为“外边距合并”；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。

简单列举几点注意事项:

　外边距合并只出现在块级元素上；

　浮动元素不会和相邻的元素产生外边距合并；

　绝对定位元素不会和相邻的元素产生外边距合并；

　内联块级元素间不会产生外边距合并；

　根元素间不会不会产生外边距合并（如html与body间）；

　设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；

如何在文本框中禁用中文输入法？

ime-mode为非标准属性，写该文档时只有IE和Firefox支持

如何解决列表中list-style-image不能精准定位的问题？

不使用list-style-image来定义列表项目标记符号，而用background-image来代替，

并通过background-position来进行定位

如何解决伪对象:before和:after在input标签上的怪异表现的问题？

现象：

在编写本条目时，除了Opera，在所有浏览器下input标签使用伪对象:before和:after都没有效果，即使Opera的表现也同样令人诧异。大家可以试玩一下。浏览器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

除了Firefox，在所有浏览器下伪对象:before和:after无法定义过渡和动画效果。

如果这个过渡或动画效果是必须，可以考虑使用真实对象。

css的基本语法

cascading stylesheet(级联样式表)。为网页提供外观（也就是，网页的表现形式）。将网页的外观写在一个css文件里，方便页面代码的维护（将表现与数据分离）。为方便大家学习css，我为大家分享css的基本语法如下：

css的基本语法

选择器{

属性1:属性值1

属性n:属性值n

符合选择器要求的标记，会添加对应的样式。

Chrome浏览器为SVG和CSS添加GPU加速功能

互联网有消息透露，谷歌正在为Chrome浏览器增加新的GPU加速功能。Chrome18浏览器将内建开关选项，让消费者选择使用GPU硬件加速基于矢量的SVG图形和CSS过滤器，让Chrome浏览器在未来网页显示上获得突破性速度，并且达成惊人的视觉效果。

Chrome浏览器的SVG和CSSGPU加速支持Windows，Mac，Linux和谷歌的Chrome操作系统，但目前这个功能仍然主要是实验性质，因为只有几个少数网站部署了SVG和CSSGPU加速。

但也有信息表示，tomshardware测试发现Chrome这项功能在显示目前网页方面，显示速度并没有出现任何显着增加，在WebVizHTML5基准测试当中出现了不稳定和崩溃问题。

评论表示，虽然SVG和CSSGPU加速还有待完善，但是Mozilla火狐、微软IE和其他版本浏览器之间的竞争，肯定会推动这种技术快速发展和完善。

设置容器中的内容垂直居中css代码

如实例1设置网页整体居中的代码中内容是居容器的顶部的，而在表格布局时默认是垂直居中的，当我们需要垂直居中的时候该怎么办呢？别害怕，跟我来，也是比较简单的，只用设置容器内的行高就行了。

line-height:500px

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/htmlcharset=gb2312"/>

<title>标准之路www.aa25.cn</title>

<style>

#layout{width:778pxmargin:0autotext-align:centerborder:1pxsolid#44b6dcbackground:#e1edfbheight:500pxline-height:500px}

</style>

</head>

<body><pid="layout">标准之路www.##.cn </p>

</body>

</html>

提示：可以先修改部分代码后再运行

这是一种方法，另外和种方法就是设置的`它内边距padding了，自己可以试试哟～～

CSS对不同浏览器的兼容性解决办法

CSS 对不同浏览器的兼容性解决办法由于CSS 在不同浏览器中存在兼容性问题，所以在使用 p+CSS 布局中，可能导致相同的内容在不同浏览器中出现不同的显示效果，为了解决这些方面的问题，以下针对CSS 某些属性的用法提出相应的一些解决办法。 1、页面居中问题在IE 浏览器下，可以通过定义CSS 样式body {text- align: center}来实现页面居中，但在FireFox（以下简写为FF）浏览器下此属性就失效了。解决办法：使用"margin- left: automargin- right : auto" www.diannao114.cn2、padding 属性在不同浏览器的显示问题当给p 设置padding 属性后，在FF 浏览器中会导致 width 和height 增加(p 的实际宽度=p 宽+Padding), 但在 IE 浏览器中width 和height 不会增加，这就导致相同的内容在不同浏览器中出现不同的显示效果。解决办法：给p 设定IE、FF 两个宽度，在IE 的宽度前加上IE 特有标记" * " 号。例如： #pwidth{ padding:5pxwidth:100px*width:110px} 3、奇怪的间隙问题有的时候我们明明设好了高度，可在IE6 上却看见一些奇怪的间隙。解决办法：试试在有空隙的p 上加上"font- size:0px" 4、关于手形光标要将页面内容的光标显示为手形，通常的做法是使CSS 属性cursor: hand但这于做法只适用于IE. 解决办法：cursor: pointer5、浮动在IE6 产生双倍距离问题例如： #box{ float:leftwidth:100pxmargin:0 0 0 100px} 这种情况之下IE6 会产生200px 的距离。解决办法：在以上属性的基础上，加上display:inline，使浮动忽略。6、UL 和FORM标签的padding 与margin ul 标签在FF 中默认是有padding 值的, 而在IE 中只有 margin 默认有值。FORM标签在IE 中,将会自动margin 一些边距,而在FF 中margin 则是0；解决办法：css 中首先都使用这样的样式ul,form{margin:0padding:0}。 7、截字省略号 .hh { - o- text- overflow:ellipsistext- overflow:ellipsiswhite- space:nowrapoverflow:hidden} 这个CSS 是定义当内容溢出宽度后会自行的截掉超出部分的文字，并以省略号结尾，但注意Firefox 并不支持。

p+CSS 网页布局的分类

p+CSS 网页布局的分类1、一列固定宽度一列布局是所有布局的基础，也是最简单的布局方式，用 p+CSS 布局的代码如下： XHTML 代码：一列固定宽度CSS 代码： #main1 { width: 400pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999} 2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值，是网页设计中一种非常灵活的布局形式，用 p+CSS 布局的代码如下： XHTML 代码：一列自适应宽度CSS 代码： #main2 { width: 70%height: 300pxbackground- color: #EEEEEEborder: 1px solid #999999} 3、一列固定宽度居中页面整体居中是网页布局中最常见到形式，在传统的表格布局中，使用TABLE 的align="center" 属性来实现，在p+CSS 布局中采用如下代码来实现：XHTML 代码：一列自适应宽度CSS 代码： p+CSS 网页布局方法探析。如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利，传统的TABLE 网页布局由于其庞大的HTML 代码，使得其在搜索引擎方面显得有些无能为力，而用p+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS 对不同浏览器存在兼容性问题，所以对于初学者来说，在使用p+CSS 进行网页布局过程中可能会遇到各种问题，本文就给大家探讨几点p+CSS 布局的技巧。4、二列固定宽度在有一列固定宽度布局的基础上，实现二列固定宽度也就很简单了，用p+CSS 布局的代码如下：XHTML 代码：左侧右侧CSS 代码： #left { width: 150pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} #right{ width: 400pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} 5、二列固定宽度居中从一列固定宽度居中的布局方法中，我们就不难完成二列固定宽度居中了，可以使用一个居中的p 作为容器，将二列分栏的p 放置在容器中，从而就实现二列的居中显示。 p+CSS 的代码如下： XHTML 代码：左侧右侧CSS 代码： #main{ width:554pxmargin:0px auto#left { width: 150pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} #right{ width: 400pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} 这里仅列举了一列、二列的布局方式，实际上三列、四列等多列的布局方式也和二列的布局方式的实现方法是一样的。事实上不管多么复杂的页面设计，在p+CSS 网页布局中，均是以p 为基础，通过一列、二列、三列这些基础的布局方式的相互组合与嵌套来实现复杂的布局。

p+CSS网页布局技巧：设置网页整体居中的css代码

以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，现在呢，用p+CSS样式表控制，好像不是那么容易了，其实也很简单，只不过方式不同而已。

<style>

#layout { width:778pxmargin:0 autotext-align:center}

</style>

<p id="layout">标准之路www.aa25.cn</p>

请看这段代码，宽度为适合800×600分辨率浏览器的宽度，margin:0 auto这句代码就是让居中了，意思是外边距上下设置为0，左右设为自动。这样它就居中了。

那么可能你要问了，text-align:center为什么还要让内容居中呢？呵呵，别着急，这句是为了适应IE6以下版本的浏览器而加的，IE6以下对margin:0 auto不能解析为居中，所以用这种方式来补救，以下在设计内容时再用 text-align:left就可以了。

注：margin和padding的值的顺序为顺时针上右下左，如margin:1px 2px 3px 4px还可以缩写为上下、左右，如本例，如果为margin:0px则是各边都为0

提示：可以先修改部分代码后再运行

CSS(Cascading Stylesheets，层叠样式表)是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。

层叠样式表的特点

且不说过去的网页缺少动感，就是在网页内容的排版布局上也有很多困难，如果不是专业人员或特别有耐心的人，很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试，才能驾驭好这些信息的排版，过程十分漫长和痛苦。为了Internet的发展，让更多人早日踏足这个多姿多彩的世界，新的HTML辅助工具呼之欲出。

样式表就是在这种需求下诞生的，它首先要做的是为网页上的元素精确地定位，可以让网页设计者象导演一样，轻易地控制由文字、图片组成的演员们，在网页这个舞台上按剧本要求好好地表演。

其次，它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式控制来帮忙了。以前两者在网页上的分布是交错结合的，查看修改很不方便，而现在把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离，使得网页可以光由内容构成，而将所有网页的格式控制指向某个CSS样式表文件。这样一来的好出表现在两个方面:

第一，简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。

第二，只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量，当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐!^_^

添加层叠样式表的方法

我们为网页添加样式表的方法有四种。

1.最简单的方法是直接添加在HTML的标识符(tag)里:

举个例子:

<p style=”color: bluefont-size: 10pt”>CSS实例</p>

代码说明:

用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。

2.添加在HTML的头信息标识符<head>里:

<head>