这个段代码div+css漂浮css div float 不换行语法上有什么错误吗？
点击联系发帖人
时间：2018-04-14 09:22
CSS布局之float浮动
时间： 23:54:14
&&&& 阅读：148
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&之前对CSS的浮动布局总是一知半解，最近开发中用的多了，对它的用法进行一些总结，以便以后忘记时可以查到。哈哈，别说我记性不好，我可是说真的，毕竟前端的知识实在是多而杂，多做笔记，遇到问题时网上搜索资料是其一，但我觉得更重要的是把你遇到的问题和解决方法记录下来。。这样以后你的开发效率是多高。言归正传，对浮动进行一些记录。
1.首先，网页是一个文档流，默认按块元素和级联元素从左到右，从上至下的依次显示。而Float浮动元素，就好比是漂浮在了文档流之上，不占据文档流的位置。
如下就是不进行任何浮动的文档页面：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
&style rel="stylesheet"&
width: 500px;
border: 1px solid red;
background: cornflowerblue;
height: 400px;
width: 100px;height: 100px;
background: red;
border: 1px solid #f7ffec;
height: 50px;
background: yellow;
border: 1px solid #195dff;
&div class="content"&
&div class="nofloat"& 我占据父级的一整行&/div&
&div class="boat"&我是漂浮的小船 现在没浮动&/div&
&div class="boat"&我是漂浮的小船 现在没浮动&/div&
&div class="boat"&我是漂浮的小船 现在没浮动&/div&
2.接下来我们把小船进行浮动，左浮动右浮动都行。效果如下：
width: 100px;height: 100px;
background: red;
border: 1px solid #f7ffec;
float: left;
&可以清楚的看到，当浮动元素的兄弟元素（同级元素）独占一行或者预留的空间不足时，浮动元素会换行浮动。浮动是相对的，是相对其直接父级元素浮动，如在此处，.boat是相对于.content浮动的，可以用此来进行响应式布局，相对于父元素宽高的百分比。另外，如果不想让浮动元素不浮动在一行或者相邻，可以让后来的浮动元素不浮动去靠着之前浮动好了的元素，什么意思呢？就是如果小船3说小船1和2太烦了，不想浮动在他门后面，这时他可以告诉上帝（浏览器说）我的左边不能有浮动，代码为：
.boat:last-child{
clear: left;
注意：因为这些类名都相同，所以用.boat:last-child选择最后一个DOM元素，当然也可以为三个小船设置不同的class类名。
效果如下：
&同理：一个浮动元素如果不想让其右边右浮动元素，也可以在右边的浮动元素上加上clear:left或者right。注意，不是在本身加，而是在原本挨着但是现在想踢开的那个元素上加。还有也可以不让左右两边有浮动的元素，利用clear:both；
个人理解的总结，如有错误之处，欢迎指正
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：http://www.cnblogs.com/alvin/p/4951355.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！div css float浮动用法(left right)_百度知道
div css float浮动用法(left right)
float的作用？： ？float语法float是什么意思
我有更好的答案
进入对应css手册中float手册了解float基本信息。float的作用;* css注释。float语法 ：Float常跟属性值left，翻译成中文也是浮动意思float是浮动、noneFloat、right：通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动：设置div对象浮动靠左（left） */:left 靠左浮动Float:right 靠右浮动Float浮动用于设置对象靠左与靠右浮动样式，可以实现我们所需要的让DIV、SPAN等标签居左居右浮动。简单使用语法div{float:left} / div{float:right} /* css注释：设置div对象浮动靠右(right) */:none 不使用浮动Float
float是浮动，翻译成中文也是浮动意思。进入对应css手册中float手册了解float基本信息。float的作用通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动: 对象不浮动left : 对象浮在左边right : none | left |right参数值： none 。Float常跟属性值left、right、noneFloat:none 不使用浮动Float:left 靠左浮动Float： float :right 靠右浮动float语法float是什么意思
为您推荐：
其他类似问题
float的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。css float浮动属性的深入研究及详解拓展(一)
互联网 & 01-07 09:30:25 & 作者：佚名 &
我并没有对CSS所有的属性都有很清晰的情感化的理解，我用CSS才几年啊，我要学的还有很多。但是，对于CSS中常用的float属性，我还是有些感觉的，这也是本文的主旨所在。本文将会从我的一些感性的认识的角度讲解CSS float属性
个人感悟之CSS代码的情感化思维
个人观点之浮动的意义仅仅是文字环绕显示而已
个人观点之浮动的本质是&包裹及破坏&
个人观点之目前大多数浮动应用都不是浮动应该做的
个人观点之浮动其实是个魔鬼、混球
你我看待事物的方式不同，价值取向也不同，因为我们有着不同的世界观，价值观。这种世界观的差异不仅仅体现在实际的生活中，也反映在代码上。你我看待代码的方式，或者说是代码在我们情感层面的位置是不一样的，我这里说的是情感层面，与逻辑无关，与算法无关（虽然算法受情感影响）。这种看待代码的方式是我们在不断学习与工作的过程中积累出来的，是在潜意识层面逐渐积累起来的，一切悄然而至，不知不觉。当我们积累到一定阶段后，会突然发现，关于代码，我们已经形成了自己的世界观和属于自己的准则。回到我刚提到的&情感层面&，这个词也可以用&感性思维&来代替。通常而言，程序-代码属于很理性很逻辑的东西，与感性-情感这类词搭不上边，但是CSS例外。CSS也属于代码范畴，而且是一种伟大的代码，其有别于C，JAVA之类程序语言&&没有算法，没有复杂的逻辑。于是，CSS有了先天的优势可以渗入一些感性的情感化的东西。正如我上面提及的，大多数情况下，这种渗入是无意识的（除非有人直接表露&&就像我现在所做的），并且是个体差异明显的（因为是专属于自己的情感化的东西）。弗洛伊德将人格划分为无意识、前意识和意识，我发现代码的情感化思维形成正是走的从无意识到前意识到意识的路线，所以我个人认为：情感化的代码也属于人格的一部分。于是，有了&CSS-情感化代码-人格&这一微妙的关系。
我不清楚他人是如何看待CSS的，CSS的这些属性在他们心中是个什么东西，他们到底赋予了多少自身的情感（或人格或品性或特质等）在这些代码身上，他们是否已经意识到这些CSS属性身上正一点一点地融入他们情感化的一些东西。但我清楚自己，在这些CSS的属性身上添加了很多个人的色彩，这种情感化的东西可以说让我更好的理解CSS，我想这不难理解，举个例子：假设你将每个CSS属性看做是你的孩子，每个孩子有着不同的性格，随着学习你会挖掘到更多的一些性格，这就好比母亲看着自己的孩子一点点长大，到了一定的程度就会把自己的孩子的性格摸得一清二楚，管教也就从容了。当然，我并没有对CSS所有的属性都有很清晰的情感化的理解，我用CSS才几年啊，我要学的还有很多。但是，对于CSS中常用的float属性，我还是有些感觉的，这也是本文的主旨所在。本文将会从我的一些感性的认识的角度讲解CSS float属性。所以，这里，你会看到别样的技术文章。
二、浮动的情感化认识
我对浮动感性化的认识：浮动就是一个变态，魔鬼，自私自利且影响他人的混球。我讨厌浮动。
三、浮动的原始意义是什么？
我们使用float浮动做了很多其本职工作以外的事情，于是我们会混淆，我们会回看不清float真正的面目。浮动真正的意义在哪里呢？要知道这个问题的答案很简单，假设现在CSS中没有浮动(float)属性，那么会变成一个什么样子。我们会发现，目前流行采用浮动方法实现的无论是分栏布局，还是列表排列我们都可以用其他一些CSS属性（不考虑table）代替实现，唯一一个实现不了的就是&文字环绕图片&，我是想不出来能有什么方法可以让文字环绕图片显示。好，这个替代不了的作用才是float真正的意义所在。此作用类似于word中的版式，很基础的原始的作用：
例如左边这张word截图就含有左浮动属性(float:left)，这才是浮动应该做的事情。这是非常重要的结论，这是深入理解浮动属性的基础，我们后面探讨的一些浮动相关的问题都可以由这里引申出来，所以，请记住，浮动出现的意义其实只是用来让文字环绕图片而已，仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情。
四、浮动的本质是什么？
我将浮动的本质定义为&包裹与破坏&！
1. 浮动的&包裹性&先说句您应该没有见过的结论：撇开浮动的&破坏性&，浮动就是个带有方位的display:inline-block属性。
display:inline-block某种意义上的作用就是包裹(wrap)，而浮动也有类似的效果。举个常见例子，或许您有实现宽度自适应按钮的经验，实现宽度自适应的关键就是要让按钮的大小自适应于文字的个数，这就需要按钮要自动包裹在文字的外面。我们用什么方法实现呢？一就是display:inline-block；二就是float。例如我们要实现新浪博客中的&发表文章&之类的宽度自适应按钮（如下图）:
背景图片为：
display:inline-block方法
CSS代码如下： 代码如下:.btn1{display:inline- background:url(//files.jb51.net/file_images/article/4.png) no- padding-left:3 color:#000000; font-size:12 text-decoration:}.btn1 cite{display: line-height:26 padding:0 13px 0 10 background:url(//files.jb51.net/file_images/article/4.png) no-}HTML代码如下：代码如下:&a href="javascript:void(0);" class="btn1"&&cite&inline-block方法&/cite&&/a&结果如下图：
float:left方法此方法的CSS代码与上面的inline-block方法唯一不同之处就在于这里是float:
CSS代码如下： 代码如下:.btn1{float: background:url(//files.jb51.net/file_images/article/4.png) no- padding-left:3 color:#000000; font-size:12 text-decoration:}.btn1 cite{display: line-height:26 padding:0 13px 0 10 background:url(//files.jb51.net/file_images/article/4.png) no-}HTML代码如下：代码如下:&a href="javascript:void(0);" class="btn1"&&cite&float方法&/cite&&/a&结果如下图：
上面这个例子旨在说明浮动属性（无论是左浮动还是右浮动）某种意义上而言与display:inline-block属性的作用是一模一样的，所以类似于display: float:的CSS代码超过95%的情况是没有道理的(display:block是多余的)。然而，float无法等同于display:inline-block，其中原因之一就是浮动的方向性，display:inline-block仅仅一个水平排列方向，就是从左往右，而float可以从右往左排列，这就是两者的差异。然而，我们又有多少情况需要元素从右往左排列呢？很少，所以，CSS中，没有浮动这一属性不是什么大不了的事情，它其实就那么回事。
2. 浮动的&破坏性&浮动可以说是所有CSS属性中的&破坏之王&。要理解浮动的破坏性，我们要从浮动最原始的意义入手。我在上面把浮动的原始意义用粗斜体表示出来了，就是&只是用来让文字环绕图片而已，仅此而已。&
所以，只要您弄明白了为什么文字会环绕含浮动属性的图片，您就会知道我所说的浮动的&破坏性&是什么意思了。//下面这部分内容是本文核心，多个人观点，我尽量表述清楚。您若有兴趣，可以放慢在这里的阅读速度。
先说结论：文字之所以会环绕含有float属性的图片时因为浮动破坏了正常的line boxes。
这里有必要先讲讲line boxes模型。先看下面一段普通的HTML代码：代码如下:&p&这是一行普通的文字，这里有个 &em&em&/em& 标签。&/p&这段HTML代码涉及到4种boxes：1、首先是p标签所在的containing box，此box包含了其他的boxes；
2、然后就是inline boxes，如下图标注，inline boxes不会让内容成块显示，而是排成一行，如果外部含inline属性的标签(span,a,cite等)，则属于inline boxes，如果是个光秃秃的文字，则属于匿名inline boxes。
3、line boxes，见下图的标注：在containing boxes里，一个一个的inline boxes组成了line boxes。这是浮动影响布局的关键box类型，下面会详细阐述。
4、content area，见下图标注：content area 是一种围绕文字看不见的box。content area的大小与font-size大小相关。
正常的图文混排默认情况下，图片与文字混排应该是这个样子：图片与文字基线对齐，图片与文字在同一行上，如下图所示：上图中，图片为一个inline boxes，两边的文字也是inline boxes。由于line boxes的高度是由其内部最高的inline boxes的高度决定的，所以这里line boxes的高度就是图片的高度。此时图片与文字是同一box类型的元素（都是inline boxes），是在同一行上的，所以，默认状态下，一张图片只能与一行文字对齐。而要想让一张图片要与多行文字对齐，您唯一能做的就是破坏正常的line boxes模型。
含有浮动属性的图片与文字先看一下图片添加了float:left样式后的表现，见下图：刚才说过，正常情况下，图片自身就是个inline boxes，与两侧的文字inline boxes共同组成了line boxes，但是，一旦图片加入了浮动，情况就完全变了。我认为是浮动彻底破坏了img图片的inline boxes特性，至少有一点我可以肯定，图片的inline boxes不存在了，被恶魔附体，变身了，而这个恶魔就是浮动。一旦图片失去了inline boxes特性就无法与inline boxes的文字排在一行了，其会从line boxes上脱离出来，跟随自身的方位属性，靠边排列。这种状态跟限制性内切酶起作用几乎一致，一条基因链上(line boxes)有很多的基因(inline boxes)，然后限制性内切酶(float)会切除特定的DNA序列，此序列(float元素)就会从基因链上脱离出来。
这个从line boxes上脱离的浮动元素其实就是一个躯体，一个空壳子，表象。因为其没有inline boxes。有人可能会问，没有inline boxes就没有呗，有什么大不了的？非也非也！这个inline boxes很个很重要的概念。我曾在&&一文中提到过高度的本质，这里有必要再讲一遍。
在目前的CSS的世界中，所有的高度都是有两个CSS模型产生的，一个是box盒状模型，对应CSS为&height+padding+margin&，另外一个是line box模型，对应样式为&line-height&。前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起作用，即使您看不到&height&这个词。而后者针对于文字等这类inline boxes的元素（图片也属于inline boxes，但其height比line-height作用更凶猛，故其inline boxes高度等于其自身高度，对line-height无反应），inline boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个原因），而真正的高度表现则是由每行众多的inline boxes组成的line boxes（等于内部最高的inline box的高度），而这些line boxes的高度垂直堆叠形成了containing box的高度，也就是我们见到的div或是p标签之类的高度了。所以，对于line box模型的元素而言，没有inline boxes，就没有高度了，而浮动却恰恰做了这么龌龊的事情，其直接将元素的inline boxes也破坏了，于是这些元素也就没有了高度。
我们所处的这个世界时需要坏人来维持平衡的。武侠世界里不是常有要消灭某个超牛叉的大魔头时，会有人修炼魔功与之抗衡嘛。浮动似乎就是这样的一个角色，在网页最初的时候就是显示一些图片的文字啊什么的，所需要的布局也就那么几个，其中之一就是文字环绕图片显示了，可是怎么实现这样的效果呢？聪明的CSS开发者就创造了一个修炼&魔功&的float属性，其作用就是破坏line boxes模型好让文字环绕图片显示，最后实现了吗？确实实现了。还记得我多次说到的浮动的意义吗&&只是用来让文字环绕图片而已，而要实现这个就需要用到浮动的&破坏性&。
沿用上面图片的例子。浮动破坏了图片的inline box，产生了两个结果：一是图片无法与文字同行显示，脱离了其原来所在的line box链；二是没有了高度（无inline box -& 无line box -& 无高度）。而这些结果恰恰是文字环绕图片显示所必须的。
文字环绕图片显示的原因先看下面的flash动画演示（点击按钮开始）：如果没有显示flash动画，可能您看到的不是原出处，请访问 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com
动画所演示的关键点其实就是上面的一系列分析与讲解，即&包裹与破坏&！包裹是让标签占据的空间水平收缩，破坏是破坏的inline box。正如上面讲解的，inline boxes是高度形成的基础，浮动破坏了inline boxes也就没有高度可言了。真是由于浮动元素没有了inline boxes，没有了inline boxes高度，才能让其他inline boxes元素重新整合，环绕浮动元素排列。
我们现在假设浮动没有破坏inline boxes，那么虽然图片会靠左显示，但是其会与文字形成新的高度包络线（同类聚合），且只能与一行文字形成line box，无法实现文字环绕效果，所以浮动破坏inline boxes是必须的。
我们可以拿浮动元素与绝对定位元素做对比或许可以帮助理解。与浮动元素一样，绝对定位元素也具有&包裹性&，此&包裹性&适用于任何元素。那么，浮动元素与绝对定位元素的差别在哪里呢？我觉得最主要的差别在于：绝对定位的元素脱离了文档流，而浮动元素依旧在文档流中；而这造成的显示上的差异就是：同处于文档流中的文字实体不会与浮动元素重叠，而会与绝对定位元素重叠。这就是文字环绕显示的重要原因之一：虽然图片实际占据的高度为0，但是由于其宽度实体存在（包裹性），同样是content area 实体的文字不会与之重叠（外部的容器盒子containing box(p,div,ul,li)会重叠），这就好比篮球场上站了个植物人，虽然其几乎不可能得分，运球之类，但是他的实体在那里，它可以阻挡同一水平空间上的同一类型的个体（即人）直接穿过去，要通过，得绕道。但是其无法阻挡整个球队的向前推进。见下图（firebug显示截图）：
简短的小结虽然唠唠叨叨说了这么多，但是我个人觉得还是没有讲清楚，因为这里面涉及的东西都是看不见的，很多概念性的抽象的东西，即使我做了动画，也配了图，但是还是觉得没有讲得很明白。尤其我所说的浮动元素没有高度，&你看，那图片实实在在就在那儿，怎么没有高度？没有高度为什么文字会绕行？&所以我免不了在实际高度与inline boxes的关系这类概念间折腾，越折腾显得越乱。不过没有关系，下面我会根据上面的讲解分析浮动元素各种各样的表现，相信会对浮动的深入理解有更多的帮助。本文仅完成了三分之一，内容较多，我要分篇发布。&
大家感兴趣的内容
12345678910
最近更新的内容评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
第一章 CSS3 教程 （基础）
第二章 CSS3 教程（高级）赞助商链接
当前位置： >>
div+css教程(入门到精通)详细讲解
div＋css 教程(入门到精通）目录：一、div＋css 教程(入门到精通）详细讲解 二、DIV+CSS 网页布局常用基础知识 三、div＋css 常用布局入门 四、div＋css 网站首页布局实例教程一、div＋css 教程(入门到精通）详细讲解CSS 高度_css height DIV CSS 高度基础知识 这里的 CSS 高度是指通过 CSS 来控制设置对象的高度。 使用 CSS 属性单词 height。 单位可以使用 PX，em 等常用使用 PX（像素）为单位。 实例： .yangshi{height:300}即设置了 yangshi 选择器对象高度为300px。 CSS 高度单词：height CSS 最大高度：max-height (IE7及以上版本浏览器支持) CSS 最小高度：min-height (IE7及以上版本浏览器支持) CSS 上下居中：line-height 以上可跟值为数字加单位。 Html 初始高度与 DIV+CSS 高度对照 以前 html 直接设置高度 width=&300&这种方式嵌入表格标签内，而且无需带单 位，默认以 px（像素）为单位。 实例： &table& &tr& &td height=&100&&我的高度为100px&/td& &/tr& &tr& &td height=&50&&我高度为50px&/td& &/tr& &/table& 分别设置了高度为100px 和50px 的两行表格 接下来我们讲解 CSS 高度使用方法及技巧 1、CSS 自适应高度 一般我们需要让宽度一定时高度随内容增加而增高。 此时我们将无需设置高度即 可实现此效果。 同时也无需使用 height:auto 来实现高度自适应。通常默认情况 下不设置高度，对象高度即是自适应高度。 2、固定高度及隐藏超出固定高度的内容 很多时候我需要设置对象固定高度同时让多余的内容不显示出来。 解决办法：设置固定高度值，和设置内容不被溢出（隐藏超出内容） 如设置一个高度为50px；宽度为50px，并禁止内容超出此高度宽度，为了观看效 果同时设置对象为1px 黑色边框演示， CSS 代码： .yangshi{ height:50 width:50 overflow: border:1px solid #666;} Html body 内代码： &div class=&yangshi&&www.divcss5.com 演示，内容 测试内容高度超出演示实例，divcss5实例 &/div& CSS 固定高度效果截图： 3、说明观看此上图，看出设置固定高度宽度并设置1px 的黑色边框，并且实现内容 未超出设置高度宽度。 禁止溢出设置 CSS 高度、CSS 宽度的 CSS 属性单词及值 overflow: 。 3、设置最小高度 使用 CSS 单词：min-height 为什么要设置最小高度？ 有时特别是在文章页面里因为文章内容多少参差不齐， 所以我们可以使用最小高 度设置让左右结构的布局对齐，感觉饱和一点，但是我们又不能设置固定高度， 因为内容可能多可能少，当多的时候自然设置固定高度就不会显示完整内容。 这里有个问题就是 IE6不支持最小高度设置（min-height） ，解决办法使用 css hack 方法来解决，大家知道区别不同浏览器时候用的 css hack 中 IE6可以使用 “_”来区别其它浏览器。 最小高度运用： .yangshi{min-height:50 _height:50}这样就可以解决此问题，说明这里 就不能再使用 overflow:-CSS overflow 设置隐藏超出内容溢出。 完整 CSS html 最小高度实例代码： &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /& &title&CSS 高度实例&/title& &style& .yangshi{ min-height:50 _height:50width:150border:1px solid #666;} &/style& &/head& &body& &div class=&yangshi&&www.divcss5.com 演示，内容 测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实 例，divcss5实例 &/div& &/body& &/html&效果图： 以上是超出内容自动适应高这里是内容够少，未能充满设置最小高度。 无论在 IE6还是 IE7及以上版本浏览器或者火狐谷歌浏览器都支持最小高度的设 置。 关于 CSS height 高度总结说明： 这里讲解 CSS height 与 html height 区别及用法，同时讲解了最小高度、自适 应高度、固定高度的设置及运用。二、CSS 宽度――CSS width 一、宽度基础知识 CSS 宽度是指通过 CSS 样式设置对应 div 宽度，以下我们了解传统 html 宽度、 宽度自适应、固定宽度等宽度知识。 传统 Html 宽度属性单词：width 如 width=&300&; CSS 宽度属性单词：width 如 width:300 最大宽度单词：max-width 如 max-width:300 css 手册中了解 max-width： http://www.divcss5.com/shouce/c_maxwidth.shtml。 最小宽度单词：min-width 如：min-width:300px css 手册中了解 min-width： http://www.divcss5.com/shouce/c_minwidth.shtml 同时你可以进入 CSS 在线手册中 width 手册了解详细基础知识： http://www.divcss5.com/shouce/c_width.shtml 二、Html 初始宽度与 DIV+CSS 宽度对照 1、传统 html 中宽度 width=&300&，即设置对应元素宽度为300px（像素） 。而宽 度值后无需跟单位，默认情况下以像素（px）为单位。 如：&td width=&300&&我的宽度为300px&/td& 即：设置了对应表格 td 的宽度为300px. 2、div css 中宽度设置 width:300，即设置对应 CSS 样式为300px，这里需要 跟单位。 如：#header{ width:300} 即：定义 header CSS 选择器样式为300px 宽度。 而在标签运用：&div id=&header&&我的宽度为300px 宽度&/div& 三、css 宽度演示与讲解 1、CSS 宽度自适应 常常我们看见一个网页宽度随浏览器宽度改变而自动改变，如 www.divcss5.com 一样，宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。 如果网页总宽度为80%即 width:80%;，将使此宽度知道自适应宽度为浏览器80%。 当然前提是设置最外层没有宽度限制条件下。 DIV CSS 自适应宽度例子： CSS 样式代码： &style type=&text/css&& body{ margin:0 text-align:} .yangshi{ width:80%; border:1px solid #003; margin:0} &/style&Html 中 body div 代码： &div class=&yangshi&&我是80%自适应宽度&/div& 这样即设置内容居中，为了方便测试加上1px 黑色边框。大家可以测试观察其内 容是随浏览器拉大而宽度变宽而自适应宽度80%，而左右两边始终有10%宽度留 着，因为设置此 box 宽度为80%。以上为 CSS 宽度（width）演示图解。 2、CSS 宽度固定 固定即设置宽度为固定值即可如 很多时候需要对网页的宽度样式设置为固定，这时只需要设置宽度 width:300px，即设置对应固定宽度为300像素。 3、最小固定宽度 CSS 样式属性单词：min-width 兼容支持：min-width 除 IE6不支持为，IE7以上浏览器、火狐、谷歌都支持 常常用于设置宽度最小值，如设置对应 DIV 的样式最小宽度值限制。 例： .yangshi{border:1px solid #003; min-width:300} 即设置最小宽度为300px， 当然一般很少设置最小宽度。如果要使用最小宽度即， 使用浮动（float）可使用最小宽度限制。 最大固定宽度 CSS 属性单词：max-width 兼容支持：max-width 除 IE6不支持为，IE7以上浏览器、火狐、谷歌都支持 最大固定宽度是对对应的样式 div 设置最大宽度限制， 即内容不超过此设置最大 宽度。 最大宽度限制例子： .yangshi{border:1px solid #003;max-width:300} 即设置了最大宽度限制为300px，以下为设置最大宽度限制演示图：通过图例和基础知识 DIVCSS5给大家讲解了关于 css 宽度知识，希望大家能掌握 其宽度运用。CSS 边框即 CSS border CSS 边框基础知识 CSS 边框即 CSS border 是控制对象的边框边线宽度、颜色、虚线、实线等样 式 CSS 属性。 Html 原始边框与 DIV+CSS 边框对照 Html 表格控制边框： border=&1& bordercolor=�& 说明：控制表格边框宽度为 1px，颜色为黑色，默认为实线样式边框。 DIV CSS 边框：border-color:#000; border-style: border-width:1 说明：以上代码为设置对象边框颜色为黑色、边框为实线、宽度为 1px 边框 边框样式包括 设置上边框：border-top ： 设置下边框：border-bottom ： 设置左边框：border-left ： 设置右边框：border-right ： 边框显示样式： border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 参数值解释： none : 无边框。与任何指定的 border-width 值无关 hidden : 隐藏边框。IE 不支持 dotted : 在 MAC 平台上 IE4+与 WINDOWS 和 UNIX 平台上 IE5.5+为点线。 否则为实线 dashed : 在 MAC 平台上 IE4+与 WINDOWS 和 UNIX 平台上 IE5.5+为虚线。 否则为实线 solid : 实线边框 double : 双线边框。两条单线与其间隔的和等于指定的 border-width 值 groove : 根据 border-color 的值画 3D 凹槽 ridge : 根据 border-color 的值画菱形边框 inset : 根据 border-color 的值画 3D 凹边 outset : 根据 border-color 的值画 3D 凸边 例子： 设置上边框为 1px 实线黑色边框。 border-top-color:#000; border-top-style: border-top-width:1 或简写 border-top:#000 solid 1 可以根据以上实例举一反三，可以设置左、右、下的边框 CSS 样式。 DIV CSS 边框技巧 如果设置对象上、下、左、右边框相同样式，可以简写无需分别写出上下左右的 属性及对应值。 例，设置上下左右边框为 1px 宽度、实线、黑色边框 CSS 代码如下： border:1px solid #000; 完整 DIV CSS 实例： 实例内容设置 CSS 命名为 yangshi 的 css 选择器， 设置该属性选择器样式为边 框为 1px 宽度实线黑色边框、宽度为 200px,高度为 50px 的矩形。 CSS 代码： div,body{ border:0; margin:5 padding:0;}/* 初始化网页样式 */ .yangshi{ border:1px solid #000; width:200 height:50}/* 设置对象样 式 */ HTML 中对应 DIV 代码： &div class=&yangshi&&divcss5 实例-CSS 边框实例&br /& www.divcss5.com CSS 实例 &/div& 上图为 CSS 边框（CSS border）实例主要片段代码截图 说明： 以上代码对应显示效果， 看到实线以外虚线是因 DW 软件特自动对 DIV box 区加虚线，实际浏览是没有此虚线，特此说明。三边有边而一边没有设置技巧 如左右下有边框并且样式为黑色 1PX 宽度实线边框，而上边没有边框。 CSS 代码： border:1px solid #000; border-top: 注意 border:1px solid #000; 和 border-top:前后顺序不能调换。因为 CSS 读取有从上到下、从左到右读取原理，而先设置了整个边框样式，后再加上声明 顶部上边边框为“none”没有意思， 即实现该实例要的样式。 从而无需分别设置下、 左、右，从而节约一定代码。 总结 CSS 边框，常见对对象设置 CSS 样式使用属性代码：border:1px solid #000;CSS 背景-CSS background CSS 背景基础知识 CSS 背景这里指通过 CSS 对对象设置背景属性，如通过 CSS 设置背景各种样 式。 CSS 中背景单词： background CSS 手册查询-background 手册 background-color 设置颜色作为对象背景颜色 background-image 设置图片作为背景图片 background-repeat 设置背景平铺重复方向 background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。 background-position 设置或检索对象的背景图像位置。 Html 原始背景与 CSS 背景对照 Html 是指对应效果的 table 背景设置， Html 背景单词： Bgcolor 设置背景颜色 与 CSS 背景颜色对应 background-color Background 设置图片作为背景与 CSS 背景图片对应 background-image 最原始 HTML 背景设置演示代码： &table bgcolor=󳓸&& &tr& &td background=&http://www.divcss5.com/img/css-logo.gif& width=&130& height=&100&&&&/td& &/tr& &/table& 这里设置了 table 背景颜色为#996600，然后设置了 td 的背景图片为 http://www.divcss5.com/img/css-logo.gif 背景颜色 如果是给 table 设置背景颜色可以使用 bgcolor=&颜色值&即可设置对象背景颜 色。 如果是 CSS 背景颜色，可使用 background-color:颜色值;或 background:颜色 值设置对象背景颜色。 CSS 背景颜色设置 DIV+CSS 演示图： 以上截图分别使用 background-color 和 background 来设置对象背景颜色 CSS 图片背景 这里说的是以图片作为背景图片 - CSS 背景图片详细介绍： http://www.divcss5.com/jiqiao/j80.html CSS 可以使用 background 或 background-image 直接引用图片地址来设置图片 作为对象背景。 background:url(http://www.divcss5.com/img/logo.gif);设置 DIVCSS5 的 LOGO 图片作为背景 或 background-image:url(http://www.divcss5.com/img/logo.gif);具有相同效果。这 样设置图片作为背景有个缺陷就是图片会上下左右的重复， 接下来我们只需看以 下图例教程即可掌握 CSS background 图片背景样式（固定、滚动） 实现这个效果使用 CSS 单词是 background-attachment 当然通常情况下背景默 认是固定的如果是自己使用 CSS background 简写则如上图。 background-attachment 使用解析： background-attachment:fixed； 背景固定 background-attachment:scroll 背景图像是随对象内容滚动DIV CSS 背景居中 CSS 背景分为左右居中和上下居中，具体左右居中方法见上图。 背景图像上下居中，可以使用计算上下高度然后平分设置，如上下高度距离为 500px，那就设置图片居顶部多少 PX 可以让图片实现上下居中。CSS background（背景）总结： 使用图片作为背景在一个网页布局中常常会遇到， 希望大家能在实际中掌握其知 识。一般设置对象图片作为背景属性实例 background:#666 url(图片地址) no-（解释首先设置背景颜色 紧跟设置图片作背景 紧跟图片 是否重复 然后跟图片在对象位置。前面的背景颜色可以不用设同时不是必须， 一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片 位置） 1、设置图片作为背景如果图片设置图片在 X 坐标方向重复，如果再设置图片在 对象位置的左或右位置时将无效，可设置在对象上或下位置开始显示。 2、设置图片作为背景如果图片设置图片在 Y 坐标方向重复，如果再设置图片在 对象位置的上或下位置时将无效，可设置图片在对象左或右位置开始显示。 3、如果设置背景完全重复显示，那设置图片在对象上下左右位置开始显示将无 线。 希望大家好好理解有不懂的地方可以进入 CSS 研教室讨论区发表问题，我们将 尽力答复您。 div+css 中 float 认识及 css float 用法 float 是什么意思？ float 是浮动， 翻译成中文也是浮动意思。 进入对应 css 手册中 float 手册了解 float 基本信息。 float 的作用 通过 css 定义 float（浮动）让 div 样式层块，向左或向右（靠）浮动。 float 语法： float : none | left |right 参数值： none : 对象不浮动 left : 对象浮在左边 right : 对象浮在右边 接下来我们来通过一个 div+css 实例讲解 float 使用技巧。 DIV CSS 实验一 Css 样式实例内容，我们让文字和图片在一个固定宽度 div 层内，让蓝色背景文 字内容居右，小图片居左。 www.divcss5.com CSS 案例演示最终效果图如下1、首先我们设置一个最外层的宽度为 300px，高度为 200px 的 css 命名为 box 的 css 选择器代码如下（知识点 px 是什么意思） .box{width:300 height:200} 2、设置 box 内的文字内容部分 css 样式命名为 yangshi，并设置背景为蓝色， 宽度为 120px，居右浮动 .yangshi{ width:120 float: background:#0066FF;} 3、设置图片居左浮动 div+css 样式 img { float:} 4、body 内的 div 布局，代码如下 &div class=&box&& &div class=&yangshi&&我是 www.divcss5.com 网站，测试内容&/div& &img src=&demo.gif& /& &/div& 说明：这里 img 标签是链接外部图片，图片名为 demo.gif 最终演示结果截图CSS 实验二 接下来我们演示使用 div+css 让这里小图片居右（上个例子是居左），蓝色背景 文字内容区居左（上个例子是居右）(扩展 css 居中)。这里我们只需要改变 yangshi 的 float:为 float:left 和图片 css 样式 img { float:}为 img { float:} CSS 代码如下： .box{width:300 height:200} .yangshi{ width:120 float: background:#0066FF;} img{ float:} html 中的 css 代码和内容不变 最终演示结果截图如下：希望通过以上两个 css 实例对你认识 float 有帮助。希望大家多少实际操作实践 试试！css font _ css 文字 DIV+Css 开发中设置字体常用 css 属性单词英文 css font-可进入 CSS 手册查看 更详细 CSS 文字知识 font、font-family(字体)、font-size（字大小）、font-style（字样式）、 font-weight（加粗）、text-decoration（下划线）、font-variant（字母大小 写）、text-transform（英文大小写）、letter-spacing（间隔） 接下来，我们一一实例讲解通过 css 文字控制方法 1、字体大小使用到 font-size，实例如下 TOP首先设置了 font-size 的值为 36px,则下面结果显示字体比较大。 2、 文字的颜色使用 css 中 color 颜色属性通过 color 更样式值设置文字样式的颜 色为红色 TOPTOP 3、Css 来控制文字的下划线方法 css font，用到 text-decoration 可以进 css 手册了解对应值，你还可能还希望了解 css 链接，css 超链接样式、css 下 划线TOP 4、文字的间隔-进入详细的 CSS 字间距了解 TOP 5、文字的字体-用到 css 样式属性 font-family，字体设置图例如下一般 font-family 字体可以跟常见的“宋体”，“新宋体”，“黑体”，注意的是不能自 己设置不参加的字体样式， 虽然在自己电脑上可能自己设置字体能表现出了，但 是一般电脑用户都没有添加字体的，所以在这里字体只能设置常见，系统自带的 字体，而不能设置自己安装的字体。 电脑自带字体，和常设置文字字体有黑体、新宋体、宋体、Arial, Helvetica, sans-serif 等 TOP 6、文字的上下行间距，使用到 css 文字设置单词 line-height，这里设置 line-height:50 可以看到演示 css font 文字段“我是被 css 控制文字样式演示。”离上下文字间隔 距离是通过 line-height 来实现。也许你需要了解 br 和 p 的区别。 TOP 7、字体样式（斜体）使用到 css 样式中 font-style 标签设置如 font-style: italic,当然可以使用&em&标签将文字变为斜体TOP 8、字加粗方式-可以直接对需要加错文字前加&b&文字后加&/b&或 &strong&&/strong&来实现，对文字的加粗，这里你可以用 css 来控制对文字加 粗。这里用到 font-weight 来设置如 font-weight: 这里 font-weight 的值可以为 100-900 不等的方式为值，值越大字体越粗，如果 值为 bold 则为正常加粗，同使用 b 或 strong 一致效果。 TOP 9、英文字、字母大小写 css font。使用 css 中 font-variant 字母全大小， 如 font-variant:small-，选择性大小写 text-transform 如 text-transform:开头第一个字母大写。text-transform 语法 text-transform : none | capitalize | uppercase | lowercase 参数： none : 无转换发生 capitalize : 将每个单词的第一个字母转换成大写，其余无转换发生 uppercase : 转换成大写 lowercase : 转换成小写 font-variant 语法 font-variant : normal | small-caps 参数： normal : 正常的字体 small-caps : 小型的大写字母字体 提升与扩展思维 css font 代码：font:12px/1.5 Arial, Helvetica, sans- 一般常用以上代码定义一个网页的文字的 css 样式意思， 这段代码以上是字体的 大小是 12px， line-height 为 1.5 倍字体尺寸， 字体是 Arial, Helvetica, sans-serif。 Css font 提升图例讲解这样一定义可以节约很多代码，使用更简便以上即是 div css 网站为大家通俗的 介绍 css font，css 文字相关知识与实例图讲。 CSS 加粗知识与 CSS 加粗实例 DIV+CSS 基础知识 CSS 加粗这里指的是通过 DIV CSS 控制对象的加粗。 使用 CSS 属性单词 font-weight 对象值：从 100 到 900，最常用 font-weight 的值为 bold font-weight 参数： normal : 正常的字体。相当于 number 为 400。声明此值将取消之前任何设置 bold : 粗体。相当于 number 为 700。也相当于 b 对象的作用 bolder : IE5+ 特粗体 lighter : IE5+ 细体 number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 详细基础加粗知识请进 CSS 手册中的 font-weight 手册。 Html 常规加粗标签 以前 html 直接对对象加粗的标签如下： &b&&/b&或&strong&&/strong&两者效果相同。 加粗实例，代码如下： &strong&我被加粗&/strong&&br /& &b&我也被加粗了&/b&&br/& 我未被加粗 html 加粗实例截图：CSS 加粗基础技巧实例 CSS 代码： .yangshi1{ font-weight:bold} .yangshi2{ font-weight:800} Div html 代码： &span class=&yangshi1&&我被加粗&/span&&br /& &span class=&yangshi2&&我也被加粗了&/span&&br /& 我未被加粗 CSS 加粗结果演示： 说明此图为 CSS 加粗实例片段代码和结果图。这里通过 CSS 来控制加粗文字 方式来加粗对象。所以一般对文字对象加粗标题加粗即可使用此方法对其加粗。 总结与推荐： 1、在 html 对对象直接加粗可以用&b&或&strong&对其加粗 2、使用 CSS 加粗对象可以使用 font-weight:bold 即可实现加粗。DIV+CSS 下划线基础 CSS 控制下划线出现用到地方 - TOP 在 DIV CSS 网页中常常使用 CSS 代码来人对象文字内容加上下划线。 使用 CSS 属性单词： text-decoration -CSS 手册了解： http://www.divcss5.com/shouce/c_textdecoration.shtml text-decoration : none || underline || blink || overline || line-through text-decoration 下划线 CSS 单词值参数： none : 无装饰 blink : 闪烁 underline : 下划线 line-through : 贯穿线 overline : 上划线 二、HTML 常规下划线标签 - TOP 在 HTML 直接使用下滑线标签“U”即可对对象文字加下划线。 实例： &u&我被 U 标签加下滑线&/u&三、CSS 控制对象下划线属性样式- TOP下面我们进行使用“U”标签和 text-decoration 进行设置下划线实例对比如下图 四、下划线高级运用 - TOP 我们接下来为大家讲解常见 CSS 超链接,当随便经过时候文字对象被加下划线。 代码如下： &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /& &title&下划线演示 WWW.DIVCSS5.COM&/title& &style& .yangshi a{ text-decoration:}/* 鼠标经过热点文字被加下划线 */ .yangshi a:hiver{ text-decoration:}/* 鼠标经过热点文字被加下划 线 */ &/style& &/head& &body& &p& &span class=&yangshi&& &a href=&http://www.divcss5.com&&divcss5&/a& &/span& &/p& &/body& &/html& 请将以上代码复制新建 HTML 即可查看该实例样式。 更详细超链接讲解请进 DIV CSS 超链接。 css 注释_css 注解 什么是 CSS 注解？什么是 CSS 注释？CSS 注释是什么？CSS 注解是什么？ css 注解（css 注解）又被称作 CSS 注释（css 注释）是有 css 文件代码间加 入注释，解释说明意思，就像我们学习语文一样在文言文、诗词、文章用不同颜 色进行批注说明一个道理， 通常情况下 css 注解是不会被浏览器解释或被浏览器 忽略的。 CSS 注解作用,CSS 注释作用 css 注解（css 注释）可以帮助我们对自己写的 CSS 文件进行说明，如说明某 段 CSS 代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂 的方便性， 同时在团队开发网页是时候合理适当的注解有利于团队看懂 css 样式 是对应 html 哪里的，以便顺利快速开发 div css 网页。 CSS 注解用法，css 注释用法 （css 注解）CSS 注解是以“/*”斜杠一个星号开始，以“*/”星号斜杠结束，注解说 明内容放到“/*”“*/”中间。 css 注解――div+CSS 注释示例如下： /* www.divcss5.com 的 css 注解实例 css 注释实例 */ /* body 定义 */ body{ text-align: margin:0} /* 头部 css 定义 */ #header{ width:960 height:120} 实例图如下：css 注解，CSS 注释 注意说明：注解“/*”和“*/”必须以半角英文小写，并且“*”符号不要和注释内容紧挨 在一起，至少需要一个空格位置空着。 padding_css padding 用法详解 padding 属性是 css 用于在一个声明中设置所有 padding 属性的简写属性。 Padding 属性包含了 padding left ：左补距离（设置距左内边距） ；padding top：头顶补距离（设置距顶部内边距）；padding right ：右补距离（设置距 右内边距） ；padding bottom ：底补距离（设置距低内边距）。其二维构建 图可见 CSS 属性二维图。padding 的解剖图padding left 用法：padding-left:10 这个意思距离左边补距 10 像素，可跟 百分比如（padding-left:10%; 距离左边补 10%的距离）； padding right 用法：padding-right:10 这个意思距离右边补距 10 像素，可 跟百分比如（padding-right:10%; 距离右边补 10%的距离）； padding top 用法： padding-top:10 这个意思距离顶边补距 10 像素， 可跟百 分比如（padding-top:10%; 距离顶边补 10%的距离）； padding bottom 用法： padding-bottom:10 这个意思距离低边补距 10 像素， 可跟百分比如（padding-bottom:10%; 距离底边补 10%的距离）； 注意 padding 中间的链接“ - ”号，设置距离值时用“ ： ”并赋予值，并以“ ； ”结 束，并且全部用小写半角字母。 如果是左右上下都需要设置 padding 的值时可以简写来实现，以优化 css 。 如简写方式有： padding:10 意思就是上下左右补丁距离就是 10px（10 像素）等于 padding-top:10 padding-bottom:10 padding-left:10 padding-right:10 一样效果简写； padding:5px 10 意思上下补丁距离为 5px，左右的补丁距离为 10px，等于 padding-top:5 padding-bottom:5 padding-left:10 padding-right:10 一样效果简写； padding:5px 6px 7 意思上补丁距离 5px，下补丁距离为 7PX，左右补丁距离 为 6px，等于 padding-top:5 padding-bottom:7 padding-left:6 padding-right:6 一样效果简写； padding:5px 6px 7px 8 意思上补丁为 5px，右补丁距离为 6px ，下补丁距 离为 7px，左补丁距离 8px，等于等于 padding-top:5 padding-right:6 padding-bottom:7 padding-right:8 一样效果简写； 其中 padding:5px 6px 7px 8 的转法为顺时针即图：padding 的属性转法图解上面即是 div+css 网站总结的 padding 的属性与用法。其中 margin 的用与 padding 相同。 CSS 外边距 基础知识 - TOP DIV CSS 外边距指 CSS 属性单词 margin， margin 是设置对象四边的外延边距， 没有背景颜色也无颜色。 运用地方 - TOP 两个布局之间距离设置。如上图中“CSS 手册”和“DIV CSS 研教室”黄颜色的背景之间空隙（背景土红）。 margin 缺点 - TOP 在使用 CSS margin 的时候容易造成 CSS HACK。 解释此属性的时候容易造 IE6 成双倍距离。 您可能需要了解 CSS 兼容浏览器知识。 使用技巧与 CSS 代码优化 - TOP margin:10 意思就是上下左右元素块距离就是 10px（10 像素）等于 margin-top:10 margin-bottom:10 margin-left:10 margin-right:10 一 样效果简写； margin:5px 10 意思上下元素块距离为 5px，左右的元素块距离为 10px，等 于 margin-top:5 margin-bottom:5 margin-left:10 margin-right:10 一 样效果简写； margin:5px 6px 7 意思上元素块距离 5px，下元素块距离为 7PX，左右元素 块距离为 6px，等于 margin-top:5 margin-bottom:7 margin-left:6 margin-right:6 一样效果简写； margin:5px 6px 7px 8 意思上元素块为 5px，右元素块距离为 6px ，下元素 块距离为 7px，左元素块距离 8px，等于 margin-top:5 margin-right:6 margin-bottom:7 margin-right:8 一样效果简写； 其中 margin:5px 6px 7px 8 你可以再了解以前 divcss5 介绍 margin 知识： http://www.divcss5.com/shili/s6.html。 CSS 文本 这里讲解 CSS 文本，主要介绍文本字段换行、文本文字间间隔、文本缩进、文 本文字上下排间隔等 DIV CSS 文本样式 DIV CSS 文本知识整理 1、文本字段换行 - TOP html 中使用&br /&和&p& &br /&和&p& 2、文本上下排字间间隔 - TOP 使用 CSS 属性单词：line-height 作用：定义对象行高，后面跟具体的数值和单 位 line-height-DIV+CSS 示例： div {line-height:22 } 即定义行高为 22px 3、CSS 文本缩进 - TOP 使用 CSS 单词：text-indent 作用：设置对象中的文本的缩进，后面也跟具体数 值和单位 text-indent DIV+CSS 示例： div { text-indent : 25 } 即定义对象内开头的文字往后缩进 25px 效果如下： 4、文本文字间间隔 - TOP 使用单词 letter-spacing 作用：设置对象内文本字与字之间间距距离，后跟具体 数值和单位 CSS 教程示例： div {letter-spacing:5 } 即定义字与字之间距离为 5px更多学习方法 - TOP 更多 CSS 单词可进入 CSS 手册查看-知识+CSS 实例。 CSS 颜色 认识 CSS 颜色（CSS color） - TOP 这里要介绍的是网页设置颜色包含有哪些；网页颜色规定规范。 1、常用颜色地方包含：字体颜色、超链接颜色、网页背景颜色、边框颜色 2、颜色规范与颜色规定：网页使用 RGB 模式颜色 颜色基础知识 - TOP网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于有区别、有动 感（特别是超链接中运用）、美观之用，同时颜色也是各种各样网页的样式表现 元素之一。 传统的 html 颜色与 w3c 标准下的 css 颜色对比和 DIV CSS 运用颜色 1、文字颜色控制一样： - TOP 传统 html 和 css 文字颜色相同使用“color：”+“RGB 颜色取值”即可，如颜色为 黑色字即对应设置 CSS 属性选择器内添加“color:#000;”即可。 2、网页背景颜色设置区别： - TOP 传统设置背景颜色使用“bgcolor=颜色取值”， CSS 中则“background:”+颜色取 而 值。例如：设置背景为黑色，传统 Html 设置，即在标签内加入“bgcolor=�&” 即可实现颜色为黑色背景，如果在 W3C 中即在对应 CSS 选择器中始终 “background:#000”实现。 3、设置边框颜色区别： - TOP 传统“bordercolor=取值”，CSS 中“border-color:”+颜色取值。例如：在传统 html 直接在 table 标签加入“bordercolor=�&”即可，在现在 CSS 中设置 “border-color:#000;”即可让边框颜色为黑色，同时记得对包括设置宽度和样式 （虚线、实现）。 DIV+CSS 颜色值扩展知识： 颜色值是一个关键字或一个数字的 RGB 规范。 16 个关键字是采取从 Windows 的 VGA 调色板： 水色 ， 黑色 ， 蓝色 ， 紫 红色 ， 灰 ， 绿 ， 灰 ， 褐红色 ，藏青色， 橄榄色 ， 紫色 ， 红色 ， 银 色 ， 青色 ， 白色 ， 黄色 。 RGB 颜色给出了四种方法之一： - TOP1、#rrggbb（ 如 ，＃00cc00） （强烈推荐使用此表示颜色取值） 2、#的 RGB（ 如 ，＃0c0） 3、RGB（十中，x，x）的 x 是一个包容性的 0 和 255 之间的整数（ 如 的 RGB （0,204,0）） 4、 RGB （?％， ?％， ?％） 其中 y 是一个包容性的数量介于 0.0 和 100.0 如 ， （ 的 RGB（0％，80％，0％）） 以下是 RGB 颜色表： - TOP 当然一般的网页开发软件都有颜色取值器：网页开发软件 DW 软件中 CSS 取色器 用 CSS 控制超链接文字样式 本文将讲解通过 css 样式或通过 css 来控制超链接样式。 这里主要讲文字类型的 超链接，超链接的样式包括通过 CSS 来控制设置超链接有无下划线、超链接文 字颜色等样式。 什么是超链接？ 超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网 页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址， 一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一 段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显 示在浏览器上，并且根据目标的类型来打开或运行。 超链接的代码 &a href=&http://www.divcss5.com/& target=&_blank& title=&关于 div css 的网站 &&DIV+CSS&/a& 解析如下： href 后跟被链接地址目标网站地址这里是 http://www.divcss5.com/ target _blank -- 在新窗口中打开链接 _parent -- 在父窗体中打开链接 _self -- 在当前窗体打开链接,此为默认值 _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页) title 后跟链接目标说明，也就是超链接被链接网址情况简要说明，或标题 CSS 可控制超链接样式-css 链接样式如下 a:active 是超级链接的初始状态 a:hover 是把鼠标放上去时的状况 a:link 是鼠标点击时 a:visited 是访问过后的情况 超链接样式案例 1、通常对全站超链接样式化方法 a{color:#333;text-decoration: } //对全站有链接的文字颜色样式为 color:#333;并立即无下划线 text-decoration: a:hover {color:#CC3300;text-decoration:}//对鼠标放到超链接上文字 颜色样式变为 color:#CC3300;并文字链接加下划线 text-decoration: 2、通过链接内设置类控制超链接样式 css 方法 案例超链接代码&a href=&http://www.divcss5.com/& class=&yangshi&&CSS&/a& 对应 CSS 代码 a.yangshi{color:#333;text-decoration: } a.yangshi:hover {color:#CC3300;text-decoration:} 通过这样的设置可以控制链接内的 css 类名为“yangshi”超链接的样式 3、通过对应超链接外的父级的 css 类的 css 样式来控制超链接的样式 案例超链接代码&div class=&yangshi&&&a href=&http://www.divcss5.com/&&CSS&/a&&/a& 对应 CSS 代码 .yangshi a{color:#333;text-decoration: } .yangshi a:hover {color:#CC3300;text-decoration:} 这里值得注意的是 a.yangshi 与.yangshi a 的样式 css 代码区别 这里就是常见的通过 div css 来对超链接样式设置案例及分析。 DIV CSS 优化 一、CSS 代码优化地方： 1、border(CSS 边框)简写： border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000; 可以简写为：border:1px solid #000; 2、padding（CSS padding）简写： padding-top:1padding-right:2padding-bottom:3padding-left:4 可简写为：padding:1px 2px 3px 4 padding-top:1padding-right:1padding-bottom:1padding-left:1 可简写为：padding:1 3、margin 简写 margin-top:1margin-right:2margin-bottom:3margin-left:4 可简写为：margin:1px 2px 3px 4 margin-top:1margin-right:1margin-bottom:1margin-left:1 可简写为：margin:1 4、background 简写 background-color:#000;可以简写为 background:#000; background-image:url(图片地址) 可简写为：background:url(图片地址) 5、font 简写 font-size:12 line-height:12 font-family:Arial, Helvetica, sans- 可简写为：font:12px/12px Arial, Helvetica, sans-二、CSS 重用优化 这里主要介绍是 CSS 代码的共用属性提取来达到节约代码、维护方便，CSS 实 例如下： .yangshi_a{ width:100 height:20 text-align: float: font-size:24} .yangshi_b{ width:100 height:20 text-align: float: font-size:24} 他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同(你可能 需要了解 CSS 居中)，我们就可以提取他们相同属性 优化后: .yangshi_a ,.yangshi_b{ width:100 height:20 text-align: float: font-size:24} .yangshi_b{text-align: } 注意观察以上代码，自己理解，不懂可到 CSS 论坛提出问题。 CSS id 与 CSS class 前面我们介绍过了 id 与 class 区别，接下来再简单介绍 CSS id 与 CSS class 区 别与用法。CSS id 知识： 在一个网页里 ID 只能使用一次。当然即使一个 id 在一个网页内被使用多次，其 CSS 样式仍然可以实现生效，但是一般规定 W3C 标准是使用一次。因为 ID 在 html 里可以赋予 html 标签特殊的属性如一下 JS 动作、表单传值等特性所以区 别于一个 class 可以使用多少的次， 而一个 CSS 命名的 id 只能使用一次避免一 些特定动作、传的表单值的兼容性特性错误即使没有其它 JS 脚本动作、表单传 值特性但是我们也一定执行一个页面只能使用一次。 id 选择器以 &#& 来定义，命名 CSS 选择器。 定义命名 css id 选择器例子： #yangshi1{color:#F00;}定义红色 www.divcss5.com 实例 #yangshi2{color:#0F0;}定义绿色 对应 html 中 div 引用 &div id=&yangshi1&&我颜色为红色&/div& &div id=&yangshi2&&我颜色为绿色&/div& 一个 div 标签的定义只能使用一个 id 如： &div id=&yangshi1& id=&yangshi2&&www.divcss5 测试内容&/div& 或 &div id=&yangshi1 yangshi2&&www.divcss5 测试内容&/div& 两个都是不正确的，并且 CSS 样式属性也不能生效- 成为 CSS 失效之一。 CSS class 知识： 与 CSS ID 不同特性是 clsss 类可以在一个网页内无限次引用。 Class 选择器定义以“.”来定义。定义 css class 选择器例 子： .yangshi1{color:#F00;} 定义文字为红色.yangshi2{font-size:28}定义文字 大小为 18px 对应 html 中 div+css 引用： &div class=&yangshi1&&我颜色为红色&/div& &div class=&yangshi2&&www.divcss5.com 我字体大小为 28px&/div& &div class=&yangshi1 yangshi2&&我颜色为红色文字大小为 28px&/div& 以上即是“yangshi1”“yangshi2”类的正确使用方法 扩展知识：能否使用数字命名 CSS 属性选择器 css 命名规范 以下为错误的 css 类使用方法： &div class=&yangshi1& class=& yangshi2&&我将无效&/div& 这样的引用方法即是错误的引用方法，同样可以得出一个只能出现一个&class=& 如果出现多个 css 类要应用到一个 div 标签内， 即可以使用&div class=&yangshi1 yangshi2&&来应用。 一个 div 标签内运用 id 和 class 是可以的： .yangshi1{... ...} #yangshi2{... ...} .yangshi3{... ...} &div class=&yangshi1& id=&yangshi2&&这样是可以的也是正确的. &div class=&yangshi1 yangshi3& id=&yangshi2&&同样是正确的可取的。 总结： 本文分别从知识点到实例讲解了 div css 中 id 和 class 的运用、需要注意地方、 正确运用引用方法。通过 divcss5 中 css 实例方式正确与错误运用 css id 和 css class 让大家能掌握 css 基础知识点。 CSS id 与 CSS class 前面我们介绍过了 id 与 class 区别，接下来再简单介绍 CSS id 与 CSS class 区 别与用法。 CSS id 知识： 在一个网页里 ID 只能使用一次。当然即使一个 id 在一个网页内被使用多次，其 CSS 样式仍然可以实现生效，但是一般规定 W3C 标准是使用一次。因为 ID 在 html 里可以赋予 html 标签特殊的属性如一下 JS 动作、表单传值等特性所以区 别于一个 class 可以使用多少的次， 而一个 CSS 命名的 id 只能使用一次避免一 些特定动作、传的表单值的兼容性特性错误即使没有其它 JS 脚本动作、表单传 值特性但是我们也一定执行一个页面只能使用一次。 id 选择器以 &#& 来定义，命名 CSS 选择器。 定义命名 css id 选择器例子： #yangshi1{color:#F00;}定义红色 www.divcss5.com 实例 #yangshi2{color:#0F0;}定义绿色 对应 html 中 div 引用 &div id=&yangshi1&&我颜色为红色&/div& &div id=&yangshi2&&我颜色为绿色&/div& 一个 div 标签的定义只能使用一个 id 如： &div id=&yangshi1& id=&yangshi2&&www.divcss5 测试内容&/div& 或 &div id=&yangshi1 yangshi2&&www.divcss5 测试内容&/div& 两个都是不正确的，并且 CSS 样式属性也不能生效- 成为 CSS 失效之一。 CSS class 知识： 与 CSS ID 不同特性是 clsss 类可以在一个网页内无限次引用。 Class 选择器定义以“.”来定义。定义 css class 选择器例 子： .yangshi1{color:#F00;} 定义文字为红色.yangshi2{font-size:28}定义文字 大小为 18px 对应 html 中 div+css 引用： &div class=&yangshi1&&我颜色为红色&/div& &div class=&yangshi2&&www.divcss5.com 我字体大小为 28px&/div& &div class=&yangshi1 yangshi2&&我颜色为红色文字大小为 28px&/div& 以上即是“yangshi1”“yangshi2”类的正确使用方法 扩展知识：能否使用数字命名 CSS 属性选择器 css 命名规范 以下为错误的 css 类使用方法： &div class=&yangshi1& class=& yangshi2&&我将无效&/div& 这样的引用方法即是错误的引用方法，同样可以得出一个只能出现一个&class=& 如果出现多个 css 类要应用到一个 div 标签内， 即可以使用&div class=&yangshi1 yangshi2&&来应用。 一个 div 标签内运用 id 和 class 是可以的： .yangshi1{... ...} #yangshi2{... ...} .yangshi3{... ...} &div class=&yangshi1& id=&yangshi2&&这样是可以的也是正确的. &div class=&yangshi1 yangshi3& id=&yangshi2&&同样是正确的可取的。 总结： 本文分别从知识点到实例讲解了 div css 中 id 和 class 的运用、需要注意地方、 正确运用引用方法。通过 divcss5 中 css 实例方式正确与错误运用 css id 和 css class 让大家能掌握 css 基础知识点。 css li 讲解 Css li 是使用 css 来控制 li 的样式-css 列表，如 li 列表的以点为开头，或图片 开头的列表形式。 Li 的基础知识 Li 是 html 的基本元素标签。 &li& 标签是用于定义列表项目。 &li& 标签可用在有序列表 (&ol&) 和无序列表 (&ul&) 中。 在 W3C 标准下 li 不能单独使用，需要与&ol&或&ul&配合使用，使用范例： &ol& &li&div+css 范例&/li& &li&div+css 范例之 li&/li& &/ol& &ul& &li&div+css 范例&/li& &li&div+css 范例之 li&/li& &/ul& 以上代码效果如下图： Css li 实例,li，ol li，ul li 的用法 经过实例演示知道了 li 的默认有序和无序的 css 样式，有序 ol 的样式是以阿拉 伯数字 1、2、3 为递增列表，而无序的 ul 的 CSS 样式是以一个圆黑点的列表形 式。 &li&兼容：所有的浏览器都支持兼容。 Css li 的样式引导 无论是有序还是无序的 li 列表，在 div+css 开发的时候都需要对 li 进行设置 css 样式。 一般对其设置代码如：设置 li 的 list-style 样式。 CSS 父级子级 认识了解 - TOP 简单讲 CSS 父级 CSS 子级是相对而言，如一个 DIV “A”被另外一个 DIV “B”包 裹着，这样我们就可以让我 B 是 A 父级，同样一个道理 举例说明： - TOP DIV CSS 父级子级说明例子： CSS 代码 .yangshi{...} .yangshi .yangshi_a{ ...} .yangshi .yangshi_b{ ...}Div 代码 &div class=&yangshi&& &div class=&yangshi_a&&内容 a&/div& &div class=&yangshi_b&&内容 b&/div& &/div& 以上 div+css 代码这里我们就可以认为 yangshi_a 父级（上一级）是 yangshi。 这样我们就可以利用 CSS 指针属性在 div css 中,最终 CSS 样式可以有相同命名 的属性选择器的，但是赋予不同的值。 这样我们通过.yangshi .yangshi_a 一看即可知道 yangshi_a 的父级是 yangshi 认识 CSS 父级子级目的： - TOP我们搞清 div css 之间父级自己关系，目的也是为我们维护和查找。 CSS 指针 什么是 CSS 指针？这里指针是指属于与被属于的关系 如.yangshi .yangshi_a{...} 对于 yangshi_a 是 yangshi 指向的样式 我们可以作 1 个实验来理解此 CSS 指针 是什么 原 CSS div 样式 .yangshi{ width:300 height:50 border:1px solid #F00; margin:0 text-align:} .yangshi .yangshi_a{ float: width:30 border:1px dashed #333;} .yangshi .yangshi_b{ float: width:50 border:1px dashed #333;}&div class=&yangshi&& &div class=&yangshi_a&&内容 a&/div& &div class=&yangshi_b&&内容 b&/div& &/div& &div class=&clear&&&img src=&images/s.gif& /&&/div& 浏览器显示结果：就我们以上实例来做 我们将.yangshi .yangshi_b{...} 改为.yangshic .yangshi_b{...} 得到 .yangshic .yangshi_b{ float: width:50 border:1px dashed #333;} 然后你浏览下结果 CSS 指针效果 是的 是不是感觉 yangshi_b 虽然我们 在 DIV 使用 class 调用了但是失效了 怎么多中间的虚线了 那就是因为 DIV 独占一行的特性出来了 而&div class=&yangshi_b&&内容 b&/div& 失效了 当然你会看到是的 是因为 CSS 指针属性，看到改后 yangshi_b 可以理解父级（yangshic）不存 在 （或 html 中改后 yangshi_b 父级是 yangshi 而不是 yangshic 所以为导致 yangshic 指针到 yangshi_b 的样式失败） 这个 CSS 指针我们可以很好利用 比如以后我们统一命名 比如在一个网页中很多栏目标题我们就以.titles 命名 我 们可以利用 CSS 指针给他赋予不同父级 在不同地方使用并赋予不同 CSS 样 式，利用这一特点 让我们维护更加容易，一看此命名就知道此处是某栏目标题 意思 DIV CSS 图片_CSS img css 图片_DIV CSS 图片_CSS img 这里为大家介绍的是 DIV CSS 对 img 图片控制。 我们常常会遇到以下情况： 1、img 图片多了边框，特别是链接后的图片带边框 2、图片超出撑破 DIV 下面我们通过 CSS 来解决这 2 个问题。 1、img 图片多了边框，特别是链接后的图片带边框 有边框的图片 根据以上图，我们对图片加链接，结果图片出现了边框， 解决方法： 我们只需在初始化 IMG 标签 CSS 即可 img{ padding:0; border:0;} 加入此 CSS 即可消除边框CSS 去掉图片边框效果 2、图片超出撑破 DIV 我们常常会遇到由于一个图片过宽过大，撑破了我们设置的宽度。 解决办法 使用 CSS 控制改对象 IMG 标签宽度即可，假如该对象为.yangshi 设置宽度为 500px，那我们就只需设置.yangshi img{max-width:500}但是在 IE6 中 max-width 是失效的，那我们最好解决办法，在上传图片的时候更加设置宽度， 让图片本身宽度小于该地方设置宽度即可，这样感觉很麻烦，但是很多大的网站 都是这样解决， 一可以避免撑破设置宽度，二可以降低图片大小让浏览器更快打 开网页。 总结： 1、一个网页中难免有图片，这时我们需要初始化 img 标签即：img{ padding:0; border:0;} 2、避免图片过宽撑破网页，我们建议在上传图片时候将图片剪切来比设置宽度 小， 同时还可以对该对象加入 overflow:hidden 属性，即隐藏超出内容包括图片。 px em pt 单位区别 PX\EM\PT 单位介绍 - TOP px 单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而 言的国内推荐； em 单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比 较多； pt 单位名称为点（Point），绝对长度单位一般老版本的 table 使用长度大小单 位但是现在基本上没有使用。 1. 以前 IE 无法调整那些使用 px 作为单位的字体大小,但现在几乎 IE 都支持 在 这里也推荐使用 PX 作为单位; 2. 国外的大部分网站能够调整的原因在于其使用了 em 作为字体单位; 3. Firefox 能够调整 px 和 em， 但是 96%以上的中国网民使用 IE 浏览器(或内核)。 px 像素(Pixel)。 相对长度单位。 像素 px 是相对于显示器屏幕分辨率而言的， QQ 截图也是使用 PX 作为长度宽度单位。 em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的 字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em 与 px 换算 - TOP 任意浏览器的默认字体高度 16px（16 像素）。所有未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em,10px=0.625em。为了简化 font-size 的换算， 需要在 css 中的 body 选择器中声明 font-size=62.5%，这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来 的 px 数值除以 10，然后换上 em 作为单位就行了。 em 单位有如下特点： - TOP1. em 的值并不是固定的; 2. em 会继承父级元素的字体大小。 我们在写 CSS 的时候如果要用 em 为单位，需要注意两点： 1. body 选择器中声明 Font-size=62.5%; 2. 将你的原来的 px 数值除以 10，然后换上 em 作为单位; 3. 重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。 也就是避免 1.2 * 1.2= 1.44 的现象。比如说你在#content 中声明了字体大 小为 1.2em，那么在声明的字体大小时就只能是 1em，而不是 1.2em, 因为此 em 非彼 em，它因继承#content 的字体高而变为了 1em=12px。 但是 12px 汉字例外，就是由以上方法得到的 12px(1.2em)大小的汉字在 IE 中并不等于直接用 12px 定义的字体大小，而是稍大一点。这个问题 Jorux 已经 解决， 只需在 body 选择器中把 62.5%换成 63%就能正常显示了。 原因可能是 IE 处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。 推荐网页单位 - TOP 所以为了单位换算错误推荐使用 PX（像素）作为网页制作单位。 以上为大家介绍了 px em pt 单位，及换算方式，一般现在我们使用长度单位都 以 px 为长度单位。这里我们也推荐使用以 px（像素）为网页的尺寸长度单位， 符合浏览器的像素单位，同时也为了方便计算长度尺寸。 DIV CSS display (block none inline)属性的用法教程 在一般的 CSS 布局制作时候，我们常常会用到 display 对应值有 block、none、 inline 这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过 CSS display 知识加实例、图演示讲解方法来学习和了解 DIV CSS display。 1、CSS display 使用 TOP 以下为 DIV CSS 运用 dispaly，说明这里 dispaly 值任意 CSS 代码： .divcss5{display:none} Html 对应运用： &div class=&divcss5&&我是测试内容&/div& 根据以上可以自己 DIV+CSS 下，看看使用结果 2、display 的值有哪些 TOP Css display 值与解释-（详细可见 CSS 手册的 CSS display 手册） 参数： block :块对象的默认值。用该值为对象之后添加新行 none :隐藏对象。与 visibility 属性的 hidden 值不同，其不为被隐藏的对象保留 其物理空间 inline :内联对象的默认值。用该值将从对象中删除行 compact :分配对象为块对象或基于内容之上的内联对象 marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after 及:before 伪元素一起使用 inline-table :将表格显示为无前后换行的内联对象或内联容器 list-item :将块对象指定为列表项目。并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell :将对象作为表格单元格显示 table-column :将对象作为表格列显示 table-column-group :将对象作为表格列组显示 table-header-group :将对象作为表格标题组显示 table-footer-group :将对象作为表格脚注组显示 table-row :将对象作为表格行显示 table-row-group :将对象作为表格行组显示 3、css display block TOP Display:block 是我们常用的，block 也是 Display 默认的值。 解释：该对象随后的内容自动换行。 css display block 实例 CSS 代码： .divcss5{display:block} Html 对应运用代码： &span class=&divcss5&&我的后面文字会换行&/span&我是被前面的 divcss5对应 CSS 属性换行。 &span&不会被换行,因为我没有被设置 display:block&/span& 对应结果截图: 说明这里使用 span 作实例，一个被设置 CSS 样式，一个未设置，自己可以对 比被设置 DIV display:block 样式的对象随后的内容被换行。 4、css display none TOP 此 display 的 none 值，我们也常常使用，用于隐藏对象内容，被隐藏的对象也 不会占用自身固有宽度高度空间。 详情可见 CSS 隐藏讲解：http://www.divcss5.com/jiqiao/j55.html 5、css display inline TOP Display:inline,我们常常在 li 中使用它。功能是让 li 排成一排（称：删除行） 。 接下来我们以一个未设置 li 列表与一个设置 css Display inline 样式对比实例演 示演示。 Css 代码 ul.divcss5 li{display:inline} 解释：ul.divcss5对应 li css 样式属性为 display:inline Html 对应代码： &ul& &li&我父级 ul 没有 divcss5样式&/li& &li&我是独行&/li& &li&我是独行&/li& &/ul& &ul class=&divcss5&& &li&我父级 ul 有 divcss5样式&/li& &li&我站成一排&/li& &li&我在 divcss5下 li 站成一排&/li& &/ul& 演示结果图： 说明：设置 css 为 display:inline 的 li 对象，li 被排成一排，而未设置的 li 列表对 象仍然继承原来自身独占一行的 CSS 样式。 以上是 DIVCSS5为大家整理和展示的关于 CSS display 常用的属性对应 display none、display inline、display block 值的详细讲解与实例，希望对你有帮助。同 时有什么问题或疑问请到 DIVCSS5的 CSS 论坛发贴讨论、求助。css 图片_DIV CSS 图片_CSS img 这里为大家介绍的是 DIV CSS 对 img 图片控制。我们常常会遇到以下情况： 1、img 图片多了边框，特别是链接后的图片带边框 2、图片超出撑破 DIV 下面我们通过 CSS 来解决这2个问题。 1、img 图片多了边框，特别是链接后的图片带边框 根据以上图，我们对图片加链接，结果图片出现了边框， 解决方法： 我们只需在初始化 IMG 标签 CSS 即可 img{ padding:0; border:0;} 加入此 CSS 即可消除边框2、图片超出撑破 DIV 我们常常会遇到由于一个图片过宽过大，撑破了我们设置的宽度。 解决办法 使用 CSS 控制改对象 IMG 标签宽度即可，假如该对象为.yangshi 设置宽度为 500px，那我们就只需设置.yangshi img{max-width:500}但是在 IE6中 max-width 是失效的，那我们最好解决办法，在上传图片的时候更加设置宽度， 让图片本身宽度小于该地方设置宽度即可，这样感觉很麻烦，但是很多大的网站 都是这样解决， 一可以避免撑破设置宽度，二可以降低图片大小让浏览器更快打 开网页。 总结： 1、一个网页中难免有图片，这时我们需要初始化 img 标签即：img{ padding:0; border:0;} 2、避免图片过宽撑破网页，我们建议在上传图片时候将图片剪切来比设置宽度 小， 同时还可以对该对象加入 overflow:hidden 属性，即隐藏超出内容包括图片。 3、使用 css 让大图片不超过网页宽度 让大图片不超过网页宽度，让图片不撑破通过 CSS 样式设置的 DIV 宽度！ 接下来，我们来介绍下网站在开发 DIV+CSS 的时候会遇到一个问题，在发布一 个大图片的时候因为图片过宽会撑破自己设置的 div 宽度的问题。 图片撑破布局原因 1、由于浏览器版本低（微软 IE6） 2、没有设置 div 布局的宽度 解决图片超出宽度或撑破 div css 布局方法 1、在文章中发布图片的时候将图片编辑缩小 2、通过对对应 div 的 css 来设置显示的图片最宽宽度 推荐 3、通过 css 对图片设定宽度。 通过 css 来解决图片撑破 div 布局案例 通过 css 来控制代码如下(cmcss 是对应父级类名)： .cmcss {margin:width: 600} .cmcss img{max-width: 100% ! height: auto! width:expression(this.width & 600 ? &600px& : this.width)!}这种图片第 一次加载时候图片不能显示 直接通过对对应的 div 内的内容图片宽度设置代码如下： .cmcss img{ width:500} 宽度自定，但是不推荐此方法，因为设置后此 div 布 局内的图片将全部宽度为500px，那样将造成图片小的，被放大显示模糊。 可以通过对图片设置最宽 css 可以使用 max-width 来设置，但是 IE6不支持，但 是可以使用浏览器的 css hack 来设置代码如下 .cmcss img{max-width:500_width:500} 说明：通过其他浏览器不支持带“_”的 css，但是 IE6支持。刚好可以通过此 css hack 来实现对图片宽度的现在。这里只能克服 IE6显示固定的宽度来符合其它 版本的兼容性。 扩展与提高 我们看区别不同浏览器 CSS HACK 的代码区别 FF，IE7，IE6： background:*background:green !*background: 你可能要问了，为什么不用“*”来代替“_”来区别 IE6浏览器，这里值得注意的是 ie6和 IE7都会解释和识别“*”的，但是 IE7对 important 的识别具有优先全，所以 IE7在 CSS 代码中有 important 将有优先识别并成为唯一性， 所以在有 important 时候 IE7和 IE6前面都可以用“*”号，但是无论带 important 在前或在后 IE7将识 别为唯一区别 css hack。所以这里没有 important 的时候需要用另外 IE6的 css hack 中“_”小写半角下划线。 案例如下（Blue hills.jpg 图片为800像素宽的图片） 代码： &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /& &title&www.divcss5.com 案例-图片不超过设置宽度&/title& &style type=&text/css&& &!-.cmcss img{ max-width:150_width:150} --& &/style& &/head& &body& 原始图片宽度为800PX，设置后如下图为150px &div class=&cmcss&&&img src=&Blue hills.jpg& /&&/div& &/body& &/html&截图如下： 通过此方法对图片的宽度设置最大宽度为多少，css 代码少方便，推荐此方法来 解决图片撑破 div css 布局的宽度。二、DIV+CSS 网页布局常用基础知识CSS 命名规范 全局样式：global.css； 框架布局：layout.css； 字体样式：font.css； 链接样式：link.css； 打印样式：print.css； 二．常用类/ID 命名规范 页 眉：header 内 容：content 容 器：container 页 脚：footer 版 权：copyright 导 航：menu 主导航：mainMenu 子导航：subMenu 标 志：logo 标 语：banner 标 题：title 侧边栏：sidebar 图 标：Icon 注 释：note 搜 索：search 按 钮：btn 登 录：login 链 接：link 信息框：manage ?? 常 用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对 于二级类/ID 命名，则采用组合书写的模式，后一个单词的首字母应大写： 诸如“搜索框” 则应命名为 “searchInput” 搜索图标” 、 “ 命名这 “searchIcon” 搜索按钮” 、 “ 命名为 “searchBtn CSS 书写规范及方法 一. 常规书写规范及方法 1. 选择 DOCTYPE： XHTML 1.0 提供了三种 DTD 声明可供选择： 过渡的(Transitional):要求非常宽松的 DTD，它允许你继续使用 HTML4.01 的标识(但是要 符合 xhtml 的写法)。完整代码如下： 严格的(Strict):要求严格的 DTD，你不能使用任何表现层的标识和属性，例如 。完整代码如下： 框架的(Frameset):专门针对框架页面设计使用的 DTD，如果你的页面中包含有框架，需要 采用这种 DTD。完整代码如下： 理 想情况当然是严格的 DTD，但对于我们大多数刚接触 web 标准的设计师来说，过渡的 DTD(XHTML 1.0 Transitional)是目前理想选 择(包括本站，使用的也是过渡型 DTD)。因为 这种 DTD 还允许我们使用表现层的标识、元素和属性，也比较容易通过 W3C 的代码校验。 2. 指定语言及字符集： 为文档指定语言： 为了被浏览器正确解释和通过 W3C 代码校验， 所有的 XHTML 文档都必须声明它们所使用的编 码语言；如： 常用的语言定义： 标准的 XML 文档语言定义： 针对老版本的浏览器的语言定义： 为提高字符集，建议采用“utf-8” 。 3. 调用样式表： 外部样式表调用： 页面内嵌法：就是将样式表直接写在页面代码的 head 区。 如： &style type=”text/css”&&!C body { background : color : } C& &/style& 外部调用法：将样式表写在一个独立的.css 文件中，然后在页面 head 区用类似以下代码调 用。 &link rel=” stylesheet” rev=” stylesheet” href=” css/style.css” type=” text/css” media=”all” /& 在符合 web 标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css 文件而改变 页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所 有文件的样式。 4、选用恰当的元素： 根据文档的结构来选择 HTML 元素，而不是根据 HTML 元素的样式来选择。例如，使用 P 元素 来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用 通用的 div 或者是 span； 避免过渡使用 div 和 span。少量、适当的使用 div 和 span 元素可以使文档的结构更加清晰 合理并且易于使用样式； 尽可能少地使用标签和结构嵌套， 这样不但可以使文档结构清晰， 同时也可以保持文件的小 巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视； 5、派生选择器： 可以使用派生选择器给一个元素里的子元素定义样式， 在简化命名的同时也使结构更加的清 晰化，如： .mainMenu ul li {background:url(images/bg.)} 6、辅助图片用背影图处理： 这里的” 辅助图片” 是指那些不是作为页面要表达的内容的一部分， 而仅仅用于修饰、 间隔、 提醒的图片。 将其做背影图处理， 可以在不改动页面的情况下通过 CSS 样式来进行改动， 如： #logo {background:url(images/logo.jpg) #FEFEFE no-} 7、结构与样式分离： 在页面里只写入文档的结构， 而将样式写于 css 文件中， 通过外部调用 CSS 样式表来实现结 构与样式的分离。 8、文档的结构化书写： 页面 CSS 文档都应采用结构化的书写方式，逻辑清晰易于阅读。如： &div id=”mainMenu”& &ul& &li&&a href=”#” &首页&/a&&/li& &li&&a href=”#” &介绍&/a&&/li& &li&&a href=”#” &服务&/a&&/li& &/ul& &/div& /*=====主导航=====*/ #mainMenu { width:100%; height:30 background:url(images/mainMenu_bg.jpg) repeat-x; } #mainMenu ul li { float: line-height:30 margin-right:1 cursor: } /*=====主导航结束=====*/ 9、鼠标手势： 在 XHTML 标准中，hand 只被 IE 识别，当需要将鼠标手势转换为“手形”时，则将“hand” 换为“pointer” ，即“cursor:” 二．注释书写规范 1、行间注释： 直接写于属性值后面，如： .search{ border:1px solid #/*定义搜索输入框边框*/ background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/ } 2、整段注释： 分别在开始及结束地方加入注释，如： /*=====搜索条=====*/ .search { border:1px solid # background:url(../images/icon.gif) no-repeat #333; } /*=====搜索条结束=====*/ 三．样式属性代码缩写 1、不同类有相同属性及属性值的缩写： 对于两个不同的类， 但是其中有部分相同甚至是全部相同的属性及属性值时， 应对其加以合 并缩写， 特别是当有多个不同的类而有相同的属性及属性值时， 合并缩写可以减少代码量并 易于控制。如： #mainMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:30 overflow: } #subMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:20 overflow: } 两个不同类的属性值有重复之处，刚可以缩写为： #mainMenu,#subMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; overflow: } #mainMenu {height:30} #subMenu {height:20} 2、同一属性的缩写： 同一属性根据它的属性值也可以进行简写，如： .search { background-color:#333; background-image:url(../images/icon.gif); background-repeat: no- background-position:50% 50%; } .search { background:#333 url(../images/icon.gif) no-repeat 50% 50%; } 3、内外侧边框的缩写： 在 CSS 中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不 同时也可直接缩写，如： .btn { margin-top:10 margin-right:8 margin-bottom:12 margin-left:5 padding-top:10 padding-right:8 padding-bottom:12 padding-left:8 } 则可缩写为： .btn { Margin:10px 8px 12px 5 Padding:10px 8px 12px 5 } 而如果当上边与下边、 左边与右边的边框属性值相同时， 则属性值可以直接缩写为两个， 如： .btn { margin-top:10 margin-right:5 margin-bottom:10 margin-left:5 } 缩写为： .btn {margin:10px 5} 而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如： .btn { margin-top:10 margin-right:10 margin-bottom:10 margin-left:10 } 缩写为： .btn{margin:10} 4、颜色值的缩写： 当 RGB 三个颜色值数值相}
时间： 23:54:14
&&&& 阅读：148
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&之前对CSS的浮动布局总是一知半解，最近开发中用的多了，对它的用法进行一些总结，以便以后忘记时可以查到。哈哈，别说我记性不好，我可是说真的，毕竟前端的知识实在是多而杂，多做笔记，遇到问题时网上搜索资料是其一，但我觉得更重要的是把你遇到的问题和解决方法记录下来。。这样以后你的开发效率是多高。言归正传，对浮动进行一些记录。
1.首先，网页是一个文档流，默认按块元素和级联元素从左到右，从上至下的依次显示。而Float浮动元素，就好比是漂浮在了文档流之上，不占据文档流的位置。
如下就是不进行任何浮动的文档页面：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
&style rel="stylesheet"&
width: 500px;
border: 1px solid red;
background: cornflowerblue;
height: 400px;
width: 100px;height: 100px;
background: red;
border: 1px solid #f7ffec;
height: 50px;
background: yellow;
border: 1px solid #195dff;
&div class="content"&
&div class="nofloat"& 我占据父级的一整行&/div&
&div class="boat"&我是漂浮的小船 现在没浮动&/div&
&div class="boat"&我是漂浮的小船 现在没浮动&/div&
&div class="boat"&我是漂浮的小船 现在没浮动&/div&
2.接下来我们把小船进行浮动，左浮动右浮动都行。效果如下：
width: 100px;height: 100px;
background: red;
border: 1px solid #f7ffec;
float: left;
&可以清楚的看到，当浮动元素的兄弟元素（同级元素）独占一行或者预留的空间不足时，浮动元素会换行浮动。浮动是相对的，是相对其直接父级元素浮动，如在此处，.boat是相对于.content浮动的，可以用此来进行响应式布局，相对于父元素宽高的百分比。另外，如果不想让浮动元素不浮动在一行或者相邻，可以让后来的浮动元素不浮动去靠着之前浮动好了的元素，什么意思呢？就是如果小船3说小船1和2太烦了，不想浮动在他门后面，这时他可以告诉上帝（浏览器说）我的左边不能有浮动，代码为：
.boat:last-child{
clear: left;
注意：因为这些类名都相同，所以用.boat:last-child选择最后一个DOM元素，当然也可以为三个小船设置不同的class类名。
效果如下：
&同理：一个浮动元素如果不想让其右边右浮动元素，也可以在右边的浮动元素上加上clear:left或者right。注意，不是在本身加，而是在原本挨着但是现在想踢开的那个元素上加。还有也可以不让左右两边有浮动的元素，利用clear:both；
个人理解的总结，如有错误之处，欢迎指正
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：http://www.cnblogs.com/alvin/p/4951355.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！div css float浮动用法(left right)_百度知道
div css float浮动用法(left right)
float的作用？： ？float语法float是什么意思
我有更好的答案
进入对应css手册中float手册了解float基本信息。float的作用;* css注释。float语法 ：Float常跟属性值left，翻译成中文也是浮动意思float是浮动、noneFloat、right：通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动：设置div对象浮动靠左（left） */:left 靠左浮动Float:right 靠右浮动Float浮动用于设置对象靠左与靠右浮动样式，可以实现我们所需要的让DIV、SPAN等标签居左居右浮动。简单使用语法div{float:left} / div{float:right} /* css注释：设置div对象浮动靠右(right) */:none 不使用浮动Float
float是浮动，翻译成中文也是浮动意思。进入对应css手册中float手册了解float基本信息。float的作用通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动: 对象不浮动left : 对象浮在左边right : none | left |right参数值： none 。Float常跟属性值left、right、noneFloat:none 不使用浮动Float:left 靠左浮动Float： float :right 靠右浮动float语法float是什么意思
为您推荐：
其他类似问题
float的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。css float浮动属性的深入研究及详解拓展(一)
互联网 & 01-07 09:30:25 & 作者：佚名 &
我并没有对CSS所有的属性都有很清晰的情感化的理解，我用CSS才几年啊，我要学的还有很多。但是，对于CSS中常用的float属性，我还是有些感觉的，这也是本文的主旨所在。本文将会从我的一些感性的认识的角度讲解CSS float属性
个人感悟之CSS代码的情感化思维
个人观点之浮动的意义仅仅是文字环绕显示而已
个人观点之浮动的本质是&包裹及破坏&
个人观点之目前大多数浮动应用都不是浮动应该做的
个人观点之浮动其实是个魔鬼、混球
你我看待事物的方式不同，价值取向也不同，因为我们有着不同的世界观，价值观。这种世界观的差异不仅仅体现在实际的生活中，也反映在代码上。你我看待代码的方式，或者说是代码在我们情感层面的位置是不一样的，我这里说的是情感层面，与逻辑无关，与算法无关（虽然算法受情感影响）。这种看待代码的方式是我们在不断学习与工作的过程中积累出来的，是在潜意识层面逐渐积累起来的，一切悄然而至，不知不觉。当我们积累到一定阶段后，会突然发现，关于代码，我们已经形成了自己的世界观和属于自己的准则。回到我刚提到的&情感层面&，这个词也可以用&感性思维&来代替。通常而言，程序-代码属于很理性很逻辑的东西，与感性-情感这类词搭不上边，但是CSS例外。CSS也属于代码范畴，而且是一种伟大的代码，其有别于C，JAVA之类程序语言&&没有算法，没有复杂的逻辑。于是，CSS有了先天的优势可以渗入一些感性的情感化的东西。正如我上面提及的，大多数情况下，这种渗入是无意识的（除非有人直接表露&&就像我现在所做的），并且是个体差异明显的（因为是专属于自己的情感化的东西）。弗洛伊德将人格划分为无意识、前意识和意识，我发现代码的情感化思维形成正是走的从无意识到前意识到意识的路线，所以我个人认为：情感化的代码也属于人格的一部分。于是，有了&CSS-情感化代码-人格&这一微妙的关系。
我不清楚他人是如何看待CSS的，CSS的这些属性在他们心中是个什么东西，他们到底赋予了多少自身的情感（或人格或品性或特质等）在这些代码身上，他们是否已经意识到这些CSS属性身上正一点一点地融入他们情感化的一些东西。但我清楚自己，在这些CSS的属性身上添加了很多个人的色彩，这种情感化的东西可以说让我更好的理解CSS，我想这不难理解，举个例子：假设你将每个CSS属性看做是你的孩子，每个孩子有着不同的性格，随着学习你会挖掘到更多的一些性格，这就好比母亲看着自己的孩子一点点长大，到了一定的程度就会把自己的孩子的性格摸得一清二楚，管教也就从容了。当然，我并没有对CSS所有的属性都有很清晰的情感化的理解，我用CSS才几年啊，我要学的还有很多。但是，对于CSS中常用的float属性，我还是有些感觉的，这也是本文的主旨所在。本文将会从我的一些感性的认识的角度讲解CSS float属性。所以，这里，你会看到别样的技术文章。
二、浮动的情感化认识
我对浮动感性化的认识：浮动就是一个变态，魔鬼，自私自利且影响他人的混球。我讨厌浮动。
三、浮动的原始意义是什么？
我们使用float浮动做了很多其本职工作以外的事情，于是我们会混淆，我们会回看不清float真正的面目。浮动真正的意义在哪里呢？要知道这个问题的答案很简单，假设现在CSS中没有浮动(float)属性，那么会变成一个什么样子。我们会发现，目前流行采用浮动方法实现的无论是分栏布局，还是列表排列我们都可以用其他一些CSS属性（不考虑table）代替实现，唯一一个实现不了的就是&文字环绕图片&，我是想不出来能有什么方法可以让文字环绕图片显示。好，这个替代不了的作用才是float真正的意义所在。此作用类似于word中的版式，很基础的原始的作用：
例如左边这张word截图就含有左浮动属性(float:left)，这才是浮动应该做的事情。这是非常重要的结论，这是深入理解浮动属性的基础，我们后面探讨的一些浮动相关的问题都可以由这里引申出来，所以，请记住，浮动出现的意义其实只是用来让文字环绕图片而已，仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情。
四、浮动的本质是什么？
我将浮动的本质定义为&包裹与破坏&！
1. 浮动的&包裹性&先说句您应该没有见过的结论：撇开浮动的&破坏性&，浮动就是个带有方位的display:inline-block属性。
display:inline-block某种意义上的作用就是包裹(wrap)，而浮动也有类似的效果。举个常见例子，或许您有实现宽度自适应按钮的经验，实现宽度自适应的关键就是要让按钮的大小自适应于文字的个数，这就需要按钮要自动包裹在文字的外面。我们用什么方法实现呢？一就是display:inline-block；二就是float。例如我们要实现新浪博客中的&发表文章&之类的宽度自适应按钮（如下图）:
背景图片为：
display:inline-block方法
CSS代码如下： 代码如下:.btn1{display:inline- background:url(//files.jb51.net/file_images/article/4.png) no- padding-left:3 color:#000000; font-size:12 text-decoration:}.btn1 cite{display: line-height:26 padding:0 13px 0 10 background:url(//files.jb51.net/file_images/article/4.png) no-}HTML代码如下：代码如下:&a href="javascript:void(0);" class="btn1"&&cite&inline-block方法&/cite&&/a&结果如下图：
float:left方法此方法的CSS代码与上面的inline-block方法唯一不同之处就在于这里是float:
CSS代码如下： 代码如下:.btn1{float: background:url(//files.jb51.net/file_images/article/4.png) no- padding-left:3 color:#000000; font-size:12 text-decoration:}.btn1 cite{display: line-height:26 padding:0 13px 0 10 background:url(//files.jb51.net/file_images/article/4.png) no-}HTML代码如下：代码如下:&a href="javascript:void(0);" class="btn1"&&cite&float方法&/cite&&/a&结果如下图：
上面这个例子旨在说明浮动属性（无论是左浮动还是右浮动）某种意义上而言与display:inline-block属性的作用是一模一样的，所以类似于display: float:的CSS代码超过95%的情况是没有道理的(display:block是多余的)。然而，float无法等同于display:inline-block，其中原因之一就是浮动的方向性，display:inline-block仅仅一个水平排列方向，就是从左往右，而float可以从右往左排列，这就是两者的差异。然而，我们又有多少情况需要元素从右往左排列呢？很少，所以，CSS中，没有浮动这一属性不是什么大不了的事情，它其实就那么回事。
2. 浮动的&破坏性&浮动可以说是所有CSS属性中的&破坏之王&。要理解浮动的破坏性，我们要从浮动最原始的意义入手。我在上面把浮动的原始意义用粗斜体表示出来了，就是&只是用来让文字环绕图片而已，仅此而已。&
所以，只要您弄明白了为什么文字会环绕含浮动属性的图片，您就会知道我所说的浮动的&破坏性&是什么意思了。//下面这部分内容是本文核心，多个人观点，我尽量表述清楚。您若有兴趣，可以放慢在这里的阅读速度。
先说结论：文字之所以会环绕含有float属性的图片时因为浮动破坏了正常的line boxes。
这里有必要先讲讲line boxes模型。先看下面一段普通的HTML代码：代码如下:&p&这是一行普通的文字，这里有个 &em&em&/em& 标签。&/p&这段HTML代码涉及到4种boxes：1、首先是p标签所在的containing box，此box包含了其他的boxes；
2、然后就是inline boxes，如下图标注，inline boxes不会让内容成块显示，而是排成一行，如果外部含inline属性的标签(span,a,cite等)，则属于inline boxes，如果是个光秃秃的文字，则属于匿名inline boxes。
3、line boxes，见下图的标注：在containing boxes里，一个一个的inline boxes组成了line boxes。这是浮动影响布局的关键box类型，下面会详细阐述。
4、content area，见下图标注：content area 是一种围绕文字看不见的box。content area的大小与font-size大小相关。
正常的图文混排默认情况下，图片与文字混排应该是这个样子：图片与文字基线对齐，图片与文字在同一行上，如下图所示：上图中，图片为一个inline boxes，两边的文字也是inline boxes。由于line boxes的高度是由其内部最高的inline boxes的高度决定的，所以这里line boxes的高度就是图片的高度。此时图片与文字是同一box类型的元素（都是inline boxes），是在同一行上的，所以，默认状态下，一张图片只能与一行文字对齐。而要想让一张图片要与多行文字对齐，您唯一能做的就是破坏正常的line boxes模型。
含有浮动属性的图片与文字先看一下图片添加了float:left样式后的表现，见下图：刚才说过，正常情况下，图片自身就是个inline boxes，与两侧的文字inline boxes共同组成了line boxes，但是，一旦图片加入了浮动，情况就完全变了。我认为是浮动彻底破坏了img图片的inline boxes特性，至少有一点我可以肯定，图片的inline boxes不存在了，被恶魔附体，变身了，而这个恶魔就是浮动。一旦图片失去了inline boxes特性就无法与inline boxes的文字排在一行了，其会从line boxes上脱离出来，跟随自身的方位属性，靠边排列。这种状态跟限制性内切酶起作用几乎一致，一条基因链上(line boxes)有很多的基因(inline boxes)，然后限制性内切酶(float)会切除特定的DNA序列，此序列(float元素)就会从基因链上脱离出来。
这个从line boxes上脱离的浮动元素其实就是一个躯体，一个空壳子，表象。因为其没有inline boxes。有人可能会问，没有inline boxes就没有呗，有什么大不了的？非也非也！这个inline boxes很个很重要的概念。我曾在&&一文中提到过高度的本质，这里有必要再讲一遍。
在目前的CSS的世界中，所有的高度都是有两个CSS模型产生的，一个是box盒状模型，对应CSS为&height+padding+margin&，另外一个是line box模型，对应样式为&line-height&。前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起作用，即使您看不到&height&这个词。而后者针对于文字等这类inline boxes的元素（图片也属于inline boxes，但其height比line-height作用更凶猛，故其inline boxes高度等于其自身高度，对line-height无反应），inline boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个原因），而真正的高度表现则是由每行众多的inline boxes组成的line boxes（等于内部最高的inline box的高度），而这些line boxes的高度垂直堆叠形成了containing box的高度，也就是我们见到的div或是p标签之类的高度了。所以，对于line box模型的元素而言，没有inline boxes，就没有高度了，而浮动却恰恰做了这么龌龊的事情，其直接将元素的inline boxes也破坏了，于是这些元素也就没有了高度。
我们所处的这个世界时需要坏人来维持平衡的。武侠世界里不是常有要消灭某个超牛叉的大魔头时，会有人修炼魔功与之抗衡嘛。浮动似乎就是这样的一个角色，在网页最初的时候就是显示一些图片的文字啊什么的，所需要的布局也就那么几个，其中之一就是文字环绕图片显示了，可是怎么实现这样的效果呢？聪明的CSS开发者就创造了一个修炼&魔功&的float属性，其作用就是破坏line boxes模型好让文字环绕图片显示，最后实现了吗？确实实现了。还记得我多次说到的浮动的意义吗&&只是用来让文字环绕图片而已，而要实现这个就需要用到浮动的&破坏性&。
沿用上面图片的例子。浮动破坏了图片的inline box，产生了两个结果：一是图片无法与文字同行显示，脱离了其原来所在的line box链；二是没有了高度（无inline box -& 无line box -& 无高度）。而这些结果恰恰是文字环绕图片显示所必须的。
文字环绕图片显示的原因先看下面的flash动画演示（点击按钮开始）：如果没有显示flash动画，可能您看到的不是原出处，请访问 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com
动画所演示的关键点其实就是上面的一系列分析与讲解，即&包裹与破坏&！包裹是让标签占据的空间水平收缩，破坏是破坏的inline box。正如上面讲解的，inline boxes是高度形成的基础，浮动破坏了inline boxes也就没有高度可言了。真是由于浮动元素没有了inline boxes，没有了inline boxes高度，才能让其他inline boxes元素重新整合，环绕浮动元素排列。
我们现在假设浮动没有破坏inline boxes，那么虽然图片会靠左显示，但是其会与文字形成新的高度包络线（同类聚合），且只能与一行文字形成line box，无法实现文字环绕效果，所以浮动破坏inline boxes是必须的。
我们可以拿浮动元素与绝对定位元素做对比或许可以帮助理解。与浮动元素一样，绝对定位元素也具有&包裹性&，此&包裹性&适用于任何元素。那么，浮动元素与绝对定位元素的差别在哪里呢？我觉得最主要的差别在于：绝对定位的元素脱离了文档流，而浮动元素依旧在文档流中；而这造成的显示上的差异就是：同处于文档流中的文字实体不会与浮动元素重叠，而会与绝对定位元素重叠。这就是文字环绕显示的重要原因之一：虽然图片实际占据的高度为0，但是由于其宽度实体存在（包裹性），同样是content area 实体的文字不会与之重叠（外部的容器盒子containing box(p,div,ul,li)会重叠），这就好比篮球场上站了个植物人，虽然其几乎不可能得分，运球之类，但是他的实体在那里，它可以阻挡同一水平空间上的同一类型的个体（即人）直接穿过去，要通过，得绕道。但是其无法阻挡整个球队的向前推进。见下图（firebug显示截图）：
简短的小结虽然唠唠叨叨说了这么多，但是我个人觉得还是没有讲清楚，因为这里面涉及的东西都是看不见的，很多概念性的抽象的东西，即使我做了动画，也配了图，但是还是觉得没有讲得很明白。尤其我所说的浮动元素没有高度，&你看，那图片实实在在就在那儿，怎么没有高度？没有高度为什么文字会绕行？&所以我免不了在实际高度与inline boxes的关系这类概念间折腾，越折腾显得越乱。不过没有关系，下面我会根据上面的讲解分析浮动元素各种各样的表现，相信会对浮动的深入理解有更多的帮助。本文仅完成了三分之一，内容较多，我要分篇发布。&
大家感兴趣的内容
12345678910
最近更新的内容评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
第一章 CSS3 教程 （基础）
第二章 CSS3 教程（高级）赞助商链接
当前位置： >>
div+css教程(入门到精通)详细讲解
div＋css 教程(入门到精通）目录：一、div＋css 教程(入门到精通）详细讲解 二、DIV+CSS 网页布局常用基础知识 三、div＋css 常用布局入门 四、div＋css 网站首页布局实例教程一、div＋css 教程(入门到精通）详细讲解CSS 高度_css height DIV CSS 高度基础知识 这里的 CSS 高度是指通过 CSS 来控制设置对象的高度。 使用 CSS 属性单词 height。 单位可以使用 PX，em 等常用使用 PX（像素）为单位。 实例： .yangshi{height:300}即设置了 yangshi 选择器对象高度为300px。 CSS 高度单词：height CSS 最大高度：max-height (IE7及以上版本浏览器支持) CSS 最小高度：min-height (IE7及以上版本浏览器支持) CSS 上下居中：line-height 以上可跟值为数字加单位。 Html 初始高度与 DIV+CSS 高度对照 以前 html 直接设置高度 width=&300&这种方式嵌入表格标签内，而且无需带单 位，默认以 px（像素）为单位。 实例： &table& &tr& &td height=&100&&我的高度为100px&/td& &/tr& &tr& &td height=&50&&我高度为50px&/td& &/tr& &/table& 分别设置了高度为100px 和50px 的两行表格 接下来我们讲解 CSS 高度使用方法及技巧 1、CSS 自适应高度 一般我们需要让宽度一定时高度随内容增加而增高。 此时我们将无需设置高度即 可实现此效果。 同时也无需使用 height:auto 来实现高度自适应。通常默认情况 下不设置高度，对象高度即是自适应高度。 2、固定高度及隐藏超出固定高度的内容 很多时候我需要设置对象固定高度同时让多余的内容不显示出来。 解决办法：设置固定高度值，和设置内容不被溢出（隐藏超出内容） 如设置一个高度为50px；宽度为50px，并禁止内容超出此高度宽度，为了观看效 果同时设置对象为1px 黑色边框演示， CSS 代码： .yangshi{ height:50 width:50 overflow: border:1px solid #666;} Html body 内代码： &div class=&yangshi&&www.divcss5.com 演示，内容 测试内容高度超出演示实例，divcss5实例 &/div& CSS 固定高度效果截图： 3、说明观看此上图，看出设置固定高度宽度并设置1px 的黑色边框，并且实现内容 未超出设置高度宽度。 禁止溢出设置 CSS 高度、CSS 宽度的 CSS 属性单词及值 overflow: 。 3、设置最小高度 使用 CSS 单词：min-height 为什么要设置最小高度？ 有时特别是在文章页面里因为文章内容多少参差不齐， 所以我们可以使用最小高 度设置让左右结构的布局对齐，感觉饱和一点，但是我们又不能设置固定高度， 因为内容可能多可能少，当多的时候自然设置固定高度就不会显示完整内容。 这里有个问题就是 IE6不支持最小高度设置（min-height） ，解决办法使用 css hack 方法来解决，大家知道区别不同浏览器时候用的 css hack 中 IE6可以使用 “_”来区别其它浏览器。 最小高度运用： .yangshi{min-height:50 _height:50}这样就可以解决此问题，说明这里 就不能再使用 overflow:-CSS overflow 设置隐藏超出内容溢出。 完整 CSS html 最小高度实例代码： &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /& &title&CSS 高度实例&/title& &style& .yangshi{ min-height:50 _height:50width:150border:1px solid #666;} &/style& &/head& &body& &div class=&yangshi&&www.divcss5.com 演示，内容 测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实 例，divcss5实例 &/div& &/body& &/html&效果图： 以上是超出内容自动适应高这里是内容够少，未能充满设置最小高度。 无论在 IE6还是 IE7及以上版本浏览器或者火狐谷歌浏览器都支持最小高度的设 置。 关于 CSS height 高度总结说明： 这里讲解 CSS height 与 html height 区别及用法，同时讲解了最小高度、自适 应高度、固定高度的设置及运用。二、CSS 宽度――CSS width 一、宽度基础知识 CSS 宽度是指通过 CSS 样式设置对应 div 宽度，以下我们了解传统 html 宽度、 宽度自适应、固定宽度等宽度知识。 传统 Html 宽度属性单词：width 如 width=&300&; CSS 宽度属性单词：width 如 width:300 最大宽度单词：max-width 如 max-width:300 css 手册中了解 max-width： http://www.divcss5.com/shouce/c_maxwidth.shtml。 最小宽度单词：min-width 如：min-width:300px css 手册中了解 min-width： http://www.divcss5.com/shouce/c_minwidth.shtml 同时你可以进入 CSS 在线手册中 width 手册了解详细基础知识： http://www.divcss5.com/shouce/c_width.shtml 二、Html 初始宽度与 DIV+CSS 宽度对照 1、传统 html 中宽度 width=&300&，即设置对应元素宽度为300px（像素） 。而宽 度值后无需跟单位，默认情况下以像素（px）为单位。 如：&td width=&300&&我的宽度为300px&/td& 即：设置了对应表格 td 的宽度为300px. 2、div css 中宽度设置 width:300，即设置对应 CSS 样式为300px，这里需要 跟单位。 如：#header{ width:300} 即：定义 header CSS 选择器样式为300px 宽度。 而在标签运用：&div id=&header&&我的宽度为300px 宽度&/div& 三、css 宽度演示与讲解 1、CSS 宽度自适应 常常我们看见一个网页宽度随浏览器宽度改变而自动改变，如 www.divcss5.com 一样，宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。 如果网页总宽度为80%即 width:80%;，将使此宽度知道自适应宽度为浏览器80%。 当然前提是设置最外层没有宽度限制条件下。 DIV CSS 自适应宽度例子： CSS 样式代码： &style type=&text/css&& body{ margin:0 text-align:} .yangshi{ width:80%; border:1px solid #003; margin:0} &/style&Html 中 body div 代码： &div class=&yangshi&&我是80%自适应宽度&/div& 这样即设置内容居中，为了方便测试加上1px 黑色边框。大家可以测试观察其内 容是随浏览器拉大而宽度变宽而自适应宽度80%，而左右两边始终有10%宽度留 着，因为设置此 box 宽度为80%。以上为 CSS 宽度（width）演示图解。 2、CSS 宽度固定 固定即设置宽度为固定值即可如 很多时候需要对网页的宽度样式设置为固定，这时只需要设置宽度 width:300px，即设置对应固定宽度为300像素。 3、最小固定宽度 CSS 样式属性单词：min-width 兼容支持：min-width 除 IE6不支持为，IE7以上浏览器、火狐、谷歌都支持 常常用于设置宽度最小值，如设置对应 DIV 的样式最小宽度值限制。 例： .yangshi{border:1px solid #003; min-width:300} 即设置最小宽度为300px， 当然一般很少设置最小宽度。如果要使用最小宽度即， 使用浮动（float）可使用最小宽度限制。 最大固定宽度 CSS 属性单词：max-width 兼容支持：max-width 除 IE6不支持为，IE7以上浏览器、火狐、谷歌都支持 最大固定宽度是对对应的样式 div 设置最大宽度限制， 即内容不超过此设置最大 宽度。 最大宽度限制例子： .yangshi{border:1px solid #003;max-width:300} 即设置了最大宽度限制为300px，以下为设置最大宽度限制演示图：通过图例和基础知识 DIVCSS5给大家讲解了关于 css 宽度知识，希望大家能掌握 其宽度运用。CSS 边框即 CSS border CSS 边框基础知识 CSS 边框即 CSS border 是控制对象的边框边线宽度、颜色、虚线、实线等样 式 CSS 属性。 Html 原始边框与 DIV+CSS 边框对照 Html 表格控制边框： border=&1& bordercolor=�& 说明：控制表格边框宽度为 1px，颜色为黑色，默认为实线样式边框。 DIV CSS 边框：border-color:#000; border-style: border-width:1 说明：以上代码为设置对象边框颜色为黑色、边框为实线、宽度为 1px 边框 边框样式包括 设置上边框：border-top ： 设置下边框：border-bottom ： 设置左边框：border-left ： 设置右边框：border-right ： 边框显示样式： border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 参数值解释： none : 无边框。与任何指定的 border-width 值无关 hidden : 隐藏边框。IE 不支持 dotted : 在 MAC 平台上 IE4+与 WINDOWS 和 UNIX 平台上 IE5.5+为点线。 否则为实线 dashed : 在 MAC 平台上 IE4+与 WINDOWS 和 UNIX 平台上 IE5.5+为虚线。 否则为实线 solid : 实线边框 double : 双线边框。两条单线与其间隔的和等于指定的 border-width 值 groove : 根据 border-color 的值画 3D 凹槽 ridge : 根据 border-color 的值画菱形边框 inset : 根据 border-color 的值画 3D 凹边 outset : 根据 border-color 的值画 3D 凸边 例子： 设置上边框为 1px 实线黑色边框。 border-top-color:#000; border-top-style: border-top-width:1 或简写 border-top:#000 solid 1 可以根据以上实例举一反三，可以设置左、右、下的边框 CSS 样式。 DIV CSS 边框技巧 如果设置对象上、下、左、右边框相同样式，可以简写无需分别写出上下左右的 属性及对应值。 例，设置上下左右边框为 1px 宽度、实线、黑色边框 CSS 代码如下： border:1px solid #000; 完整 DIV CSS 实例： 实例内容设置 CSS 命名为 yangshi 的 css 选择器， 设置该属性选择器样式为边 框为 1px 宽度实线黑色边框、宽度为 200px,高度为 50px 的矩形。 CSS 代码： div,body{ border:0; margin:5 padding:0;}/* 初始化网页样式 */ .yangshi{ border:1px solid #000; width:200 height:50}/* 设置对象样 式 */ HTML 中对应 DIV 代码： &div class=&yangshi&&divcss5 实例-CSS 边框实例&br /& www.divcss5.com CSS 实例 &/div& 上图为 CSS 边框（CSS border）实例主要片段代码截图 说明： 以上代码对应显示效果， 看到实线以外虚线是因 DW 软件特自动对 DIV box 区加虚线，实际浏览是没有此虚线，特此说明。三边有边而一边没有设置技巧 如左右下有边框并且样式为黑色 1PX 宽度实线边框，而上边没有边框。 CSS 代码： border:1px solid #000; border-top: 注意 border:1px solid #000; 和 border-top:前后顺序不能调换。因为 CSS 读取有从上到下、从左到右读取原理，而先设置了整个边框样式，后再加上声明 顶部上边边框为“none”没有意思， 即实现该实例要的样式。 从而无需分别设置下、 左、右，从而节约一定代码。 总结 CSS 边框，常见对对象设置 CSS 样式使用属性代码：border:1px solid #000;CSS 背景-CSS background CSS 背景基础知识 CSS 背景这里指通过 CSS 对对象设置背景属性，如通过 CSS 设置背景各种样 式。 CSS 中背景单词： background CSS 手册查询-background 手册 background-color 设置颜色作为对象背景颜色 background-image 设置图片作为背景图片 background-repeat 设置背景平铺重复方向 background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。 background-position 设置或检索对象的背景图像位置。 Html 原始背景与 CSS 背景对照 Html 是指对应效果的 table 背景设置， Html 背景单词： Bgcolor 设置背景颜色 与 CSS 背景颜色对应 background-color Background 设置图片作为背景与 CSS 背景图片对应 background-image 最原始 HTML 背景设置演示代码： &table bgcolor=󳓸&& &tr& &td background=&http://www.divcss5.com/img/css-logo.gif& width=&130& height=&100&&&&/td& &/tr& &/table& 这里设置了 table 背景颜色为#996600，然后设置了 td 的背景图片为 http://www.divcss5.com/img/css-logo.gif 背景颜色 如果是给 table 设置背景颜色可以使用 bgcolor=&颜色值&即可设置对象背景颜 色。 如果是 CSS 背景颜色，可使用 background-color:颜色值;或 background:颜色 值设置对象背景颜色。 CSS 背景颜色设置 DIV+CSS 演示图： 以上截图分别使用 background-color 和 background 来设置对象背景颜色 CSS 图片背景 这里说的是以图片作为背景图片 - CSS 背景图片详细介绍： http://www.divcss5.com/jiqiao/j80.html CSS 可以使用 background 或 background-image 直接引用图片地址来设置图片 作为对象背景。 background:url(http://www.divcss5.com/img/logo.gif);设置 DIVCSS5 的 LOGO 图片作为背景 或 background-image:url(http://www.divcss5.com/img/logo.gif);具有相同效果。这 样设置图片作为背景有个缺陷就是图片会上下左右的重复， 接下来我们只需看以 下图例教程即可掌握 CSS background 图片背景样式（固定、滚动） 实现这个效果使用 CSS 单词是 background-attachment 当然通常情况下背景默 认是固定的如果是自己使用 CSS background 简写则如上图。 background-attachment 使用解析： background-attachment:fixed； 背景固定 background-attachment:scroll 背景图像是随对象内容滚动DIV CSS 背景居中 CSS 背景分为左右居中和上下居中，具体左右居中方法见上图。 背景图像上下居中，可以使用计算上下高度然后平分设置，如上下高度距离为 500px，那就设置图片居顶部多少 PX 可以让图片实现上下居中。CSS background（背景）总结： 使用图片作为背景在一个网页布局中常常会遇到， 希望大家能在实际中掌握其知 识。一般设置对象图片作为背景属性实例 background:#666 url(图片地址) no-（解释首先设置背景颜色 紧跟设置图片作背景 紧跟图片 是否重复 然后跟图片在对象位置。前面的背景颜色可以不用设同时不是必须， 一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片 位置） 1、设置图片作为背景如果图片设置图片在 X 坐标方向重复，如果再设置图片在 对象位置的左或右位置时将无效，可设置在对象上或下位置开始显示。 2、设置图片作为背景如果图片设置图片在 Y 坐标方向重复，如果再设置图片在 对象位置的上或下位置时将无效，可设置图片在对象左或右位置开始显示。 3、如果设置背景完全重复显示，那设置图片在对象上下左右位置开始显示将无 线。 希望大家好好理解有不懂的地方可以进入 CSS 研教室讨论区发表问题，我们将 尽力答复您。 div+css 中 float 认识及 css float 用法 float 是什么意思？ float 是浮动， 翻译成中文也是浮动意思。 进入对应 css 手册中 float 手册了解 float 基本信息。 float 的作用 通过 css 定义 float（浮动）让 div 样式层块，向左或向右（靠）浮动。 float 语法： float : none | left |right 参数值： none : 对象不浮动 left : 对象浮在左边 right : 对象浮在右边 接下来我们来通过一个 div+css 实例讲解 float 使用技巧。 DIV CSS 实验一 Css 样式实例内容，我们让文字和图片在一个固定宽度 div 层内，让蓝色背景文 字内容居右，小图片居左。 www.divcss5.com CSS 案例演示最终效果图如下1、首先我们设置一个最外层的宽度为 300px，高度为 200px 的 css 命名为 box 的 css 选择器代码如下（知识点 px 是什么意思） .box{width:300 height:200} 2、设置 box 内的文字内容部分 css 样式命名为 yangshi，并设置背景为蓝色， 宽度为 120px，居右浮动 .yangshi{ width:120 float: background:#0066FF;} 3、设置图片居左浮动 div+css 样式 img { float:} 4、body 内的 div 布局，代码如下 &div class=&box&& &div class=&yangshi&&我是 www.divcss5.com 网站，测试内容&/div& &img src=&demo.gif& /& &/div& 说明：这里 img 标签是链接外部图片，图片名为 demo.gif 最终演示结果截图CSS 实验二 接下来我们演示使用 div+css 让这里小图片居右（上个例子是居左），蓝色背景 文字内容区居左（上个例子是居右）(扩展 css 居中)。这里我们只需要改变 yangshi 的 float:为 float:left 和图片 css 样式 img { float:}为 img { float:} CSS 代码如下： .box{width:300 height:200} .yangshi{ width:120 float: background:#0066FF;} img{ float:} html 中的 css 代码和内容不变 最终演示结果截图如下：希望通过以上两个 css 实例对你认识 float 有帮助。希望大家多少实际操作实践 试试！css font _ css 文字 DIV+Css 开发中设置字体常用 css 属性单词英文 css font-可进入 CSS 手册查看 更详细 CSS 文字知识 font、font-family(字体)、font-size（字大小）、font-style（字样式）、 font-weight（加粗）、text-decoration（下划线）、font-variant（字母大小 写）、text-transform（英文大小写）、letter-spacing（间隔） 接下来，我们一一实例讲解通过 css 文字控制方法 1、字体大小使用到 font-size，实例如下 TOP首先设置了 font-size 的值为 36px,则下面结果显示字体比较大。 2、 文字的颜色使用 css 中 color 颜色属性通过 color 更样式值设置文字样式的颜 色为红色 TOPTOP 3、Css 来控制文字的下划线方法 css font，用到 text-decoration 可以进 css 手册了解对应值，你还可能还希望了解 css 链接，css 超链接样式、css 下 划线TOP 4、文字的间隔-进入详细的 CSS 字间距了解 TOP 5、文字的字体-用到 css 样式属性 font-family，字体设置图例如下一般 font-family 字体可以跟常见的“宋体”，“新宋体”，“黑体”，注意的是不能自 己设置不参加的字体样式， 虽然在自己电脑上可能自己设置字体能表现出了，但 是一般电脑用户都没有添加字体的，所以在这里字体只能设置常见，系统自带的 字体，而不能设置自己安装的字体。 电脑自带字体，和常设置文字字体有黑体、新宋体、宋体、Arial, Helvetica, sans-serif 等 TOP 6、文字的上下行间距，使用到 css 文字设置单词 line-height，这里设置 line-height:50 可以看到演示 css font 文字段“我是被 css 控制文字样式演示。”离上下文字间隔 距离是通过 line-height 来实现。也许你需要了解 br 和 p 的区别。 TOP 7、字体样式（斜体）使用到 css 样式中 font-style 标签设置如 font-style: italic,当然可以使用&em&标签将文字变为斜体TOP 8、字加粗方式-可以直接对需要加错文字前加&b&文字后加&/b&或 &strong&&/strong&来实现，对文字的加粗，这里你可以用 css 来控制对文字加 粗。这里用到 font-weight 来设置如 font-weight: 这里 font-weight 的值可以为 100-900 不等的方式为值，值越大字体越粗，如果 值为 bold 则为正常加粗，同使用 b 或 strong 一致效果。 TOP 9、英文字、字母大小写 css font。使用 css 中 font-variant 字母全大小， 如 font-variant:small-，选择性大小写 text-transform 如 text-transform:开头第一个字母大写。text-transform 语法 text-transform : none | capitalize | uppercase | lowercase 参数： none : 无转换发生 capitalize : 将每个单词的第一个字母转换成大写，其余无转换发生 uppercase : 转换成大写 lowercase : 转换成小写 font-variant 语法 font-variant : normal | small-caps 参数： normal : 正常的字体 small-caps : 小型的大写字母字体 提升与扩展思维 css font 代码：font:12px/1.5 Arial, Helvetica, sans- 一般常用以上代码定义一个网页的文字的 css 样式意思， 这段代码以上是字体的 大小是 12px， line-height 为 1.5 倍字体尺寸， 字体是 Arial, Helvetica, sans-serif。 Css font 提升图例讲解这样一定义可以节约很多代码，使用更简便以上即是 div css 网站为大家通俗的 介绍 css font，css 文字相关知识与实例图讲。 CSS 加粗知识与 CSS 加粗实例 DIV+CSS 基础知识 CSS 加粗这里指的是通过 DIV CSS 控制对象的加粗。 使用 CSS 属性单词 font-weight 对象值：从 100 到 900，最常用 font-weight 的值为 bold font-weight 参数： normal : 正常的字体。相当于 number 为 400。声明此值将取消之前任何设置 bold : 粗体。相当于 number 为 700。也相当于 b 对象的作用 bolder : IE5+ 特粗体 lighter : IE5+ 细体 number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 详细基础加粗知识请进 CSS 手册中的 font-weight 手册。 Html 常规加粗标签 以前 html 直接对对象加粗的标签如下： &b&&/b&或&strong&&/strong&两者效果相同。 加粗实例，代码如下： &strong&我被加粗&/strong&&br /& &b&我也被加粗了&/b&&br/& 我未被加粗 html 加粗实例截图：CSS 加粗基础技巧实例 CSS 代码： .yangshi1{ font-weight:bold} .yangshi2{ font-weight:800} Div html 代码： &span class=&yangshi1&&我被加粗&/span&&br /& &span class=&yangshi2&&我也被加粗了&/span&&br /& 我未被加粗 CSS 加粗结果演示： 说明此图为 CSS 加粗实例片段代码和结果图。这里通过 CSS 来控制加粗文字 方式来加粗对象。所以一般对文字对象加粗标题加粗即可使用此方法对其加粗。 总结与推荐： 1、在 html 对对象直接加粗可以用&b&或&strong&对其加粗 2、使用 CSS 加粗对象可以使用 font-weight:bold 即可实现加粗。DIV+CSS 下划线基础 CSS 控制下划线出现用到地方 - TOP 在 DIV CSS 网页中常常使用 CSS 代码来人对象文字内容加上下划线。 使用 CSS 属性单词： text-decoration -CSS 手册了解： http://www.divcss5.com/shouce/c_textdecoration.shtml text-decoration : none || underline || blink || overline || line-through text-decoration 下划线 CSS 单词值参数： none : 无装饰 blink : 闪烁 underline : 下划线 line-through : 贯穿线 overline : 上划线 二、HTML 常规下划线标签 - TOP 在 HTML 直接使用下滑线标签“U”即可对对象文字加下划线。 实例： &u&我被 U 标签加下滑线&/u&三、CSS 控制对象下划线属性样式- TOP下面我们进行使用“U”标签和 text-decoration 进行设置下划线实例对比如下图 四、下划线高级运用 - TOP 我们接下来为大家讲解常见 CSS 超链接,当随便经过时候文字对象被加下划线。 代码如下： &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /& &title&下划线演示 WWW.DIVCSS5.COM&/title& &style& .yangshi a{ text-decoration:}/* 鼠标经过热点文字被加下划线 */ .yangshi a:hiver{ text-decoration:}/* 鼠标经过热点文字被加下划 线 */ &/style& &/head& &body& &p& &span class=&yangshi&& &a href=&http://www.divcss5.com&&divcss5&/a& &/span& &/p& &/body& &/html& 请将以上代码复制新建 HTML 即可查看该实例样式。 更详细超链接讲解请进 DIV CSS 超链接。 css 注释_css 注解 什么是 CSS 注解？什么是 CSS 注释？CSS 注释是什么？CSS 注解是什么？ css 注解（css 注解）又被称作 CSS 注释（css 注释）是有 css 文件代码间加 入注释，解释说明意思，就像我们学习语文一样在文言文、诗词、文章用不同颜 色进行批注说明一个道理， 通常情况下 css 注解是不会被浏览器解释或被浏览器 忽略的。 CSS 注解作用,CSS 注释作用 css 注解（css 注释）可以帮助我们对自己写的 CSS 文件进行说明，如说明某 段 CSS 代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂 的方便性， 同时在团队开发网页是时候合理适当的注解有利于团队看懂 css 样式 是对应 html 哪里的，以便顺利快速开发 div css 网页。 CSS 注解用法，css 注释用法 （css 注解）CSS 注解是以“/*”斜杠一个星号开始，以“*/”星号斜杠结束，注解说 明内容放到“/*”“*/”中间。 css 注解――div+CSS 注释示例如下： /* www.divcss5.com 的 css 注解实例 css 注释实例 */ /* body 定义 */ body{ text-align: margin:0} /* 头部 css 定义 */ #header{ width:960 height:120} 实例图如下：css 注解，CSS 注释 注意说明：注解“/*”和“*/”必须以半角英文小写，并且“*”符号不要和注释内容紧挨 在一起，至少需要一个空格位置空着。 padding_css padding 用法详解 padding 属性是 css 用于在一个声明中设置所有 padding 属性的简写属性。 Padding 属性包含了 padding left ：左补距离（设置距左内边距） ；padding top：头顶补距离（设置距顶部内边距）；padding right ：右补距离（设置距 右内边距） ；padding bottom ：底补距离（设置距低内边距）。其二维构建 图可见 CSS 属性二维图。padding 的解剖图padding left 用法：padding-left:10 这个意思距离左边补距 10 像素，可跟 百分比如（padding-left:10%; 距离左边补 10%的距离）； padding right 用法：padding-right:10 这个意思距离右边补距 10 像素，可 跟百分比如（padding-right:10%; 距离右边补 10%的距离）； padding top 用法： padding-top:10 这个意思距离顶边补距 10 像素， 可跟百 分比如（padding-top:10%; 距离顶边补 10%的距离）； padding bottom 用法： padding-bottom:10 这个意思距离低边补距 10 像素， 可跟百分比如（padding-bottom:10%; 距离底边补 10%的距离）； 注意 padding 中间的链接“ - ”号，设置距离值时用“ ： ”并赋予值，并以“ ； ”结 束，并且全部用小写半角字母。 如果是左右上下都需要设置 padding 的值时可以简写来实现，以优化 css 。 如简写方式有： padding:10 意思就是上下左右补丁距离就是 10px（10 像素）等于 padding-top:10 padding-bottom:10 padding-left:10 padding-right:10 一样效果简写； padding:5px 10 意思上下补丁距离为 5px，左右的补丁距离为 10px，等于 padding-top:5 padding-bottom:5 padding-left:10 padding-right:10 一样效果简写； padding:5px 6px 7 意思上补丁距离 5px，下补丁距离为 7PX，左右补丁距离 为 6px，等于 padding-top:5 padding-bottom:7 padding-left:6 padding-right:6 一样效果简写； padding:5px 6px 7px 8 意思上补丁为 5px，右补丁距离为 6px ，下补丁距 离为 7px，左补丁距离 8px，等于等于 padding-top:5 padding-right:6 padding-bottom:7 padding-right:8 一样效果简写； 其中 padding:5px 6px 7px 8 的转法为顺时针即图：padding 的属性转法图解上面即是 div+css 网站总结的 padding 的属性与用法。其中 margin 的用与 padding 相同。 CSS 外边距 基础知识 - TOP DIV CSS 外边距指 CSS 属性单词 margin， margin 是设置对象四边的外延边距， 没有背景颜色也无颜色。 运用地方 - TOP 两个布局之间距离设置。如上图中“CSS 手册”和“DIV CSS 研教室”黄颜色的背景之间空隙（背景土红）。 margin 缺点 - TOP 在使用 CSS margin 的时候容易造成 CSS HACK。 解释此属性的时候容易造 IE6 成双倍距离。 您可能需要了解 CSS 兼容浏览器知识。 使用技巧与 CSS 代码优化 - TOP margin:10 意思就是上下左右元素块距离就是 10px（10 像素）等于 margin-top:10 margin-bottom:10 margin-left:10 margin-right:10 一 样效果简写； margin:5px 10 意思上下元素块距离为 5px，左右的元素块距离为 10px，等 于 margin-top:5 margin-bottom:5 margin-left:10 margin-right:10 一 样效果简写； margin:5px 6px 7 意思上元素块距离 5px，下元素块距离为 7PX，左右元素 块距离为 6px，等于 margin-top:5 margin-bottom:7 margin-left:6 margin-right:6 一样效果简写； margin:5px 6px 7px 8 意思上元素块为 5px，右元素块距离为 6px ，下元素 块距离为 7px，左元素块距离 8px，等于 margin-top:5 margin-right:6 margin-bottom:7 margin-right:8 一样效果简写； 其中 margin:5px 6px 7px 8 你可以再了解以前 divcss5 介绍 margin 知识： http://www.divcss5.com/shili/s6.html。 CSS 文本 这里讲解 CSS 文本，主要介绍文本字段换行、文本文字间间隔、文本缩进、文 本文字上下排间隔等 DIV CSS 文本样式 DIV CSS 文本知识整理 1、文本字段换行 - TOP html 中使用&br /&和&p& &br /&和&p& 2、文本上下排字间间隔 - TOP 使用 CSS 属性单词：line-height 作用：定义对象行高，后面跟具体的数值和单 位 line-height-DIV+CSS 示例： div {line-height:22 } 即定义行高为 22px 3、CSS 文本缩进 - TOP 使用 CSS 单词：text-indent 作用：设置对象中的文本的缩进，后面也跟具体数 值和单位 text-indent DIV+CSS 示例： div { text-indent : 25 } 即定义对象内开头的文字往后缩进 25px 效果如下： 4、文本文字间间隔 - TOP 使用单词 letter-spacing 作用：设置对象内文本字与字之间间距距离，后跟具体 数值和单位 CSS 教程示例： div {letter-spacing:5 } 即定义字与字之间距离为 5px更多学习方法 - TOP 更多 CSS 单词可进入 CSS 手册查看-知识+CSS 实例。 CSS 颜色 认识 CSS 颜色（CSS color） - TOP 这里要介绍的是网页设置颜色包含有哪些；网页颜色规定规范。 1、常用颜色地方包含：字体颜色、超链接颜色、网页背景颜色、边框颜色 2、颜色规范与颜色规定：网页使用 RGB 模式颜色 颜色基础知识 - TOP网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于有区别、有动 感（特别是超链接中运用）、美观之用，同时颜色也是各种各样网页的样式表现 元素之一。 传统的 html 颜色与 w3c 标准下的 css 颜色对比和 DIV CSS 运用颜色 1、文字颜色控制一样： - TOP 传统 html 和 css 文字颜色相同使用“color：”+“RGB 颜色取值”即可，如颜色为 黑色字即对应设置 CSS 属性选择器内添加“color:#000;”即可。 2、网页背景颜色设置区别： - TOP 传统设置背景颜色使用“bgcolor=颜色取值”， CSS 中则“background:”+颜色取 而 值。例如：设置背景为黑色，传统 Html 设置，即在标签内加入“bgcolor=�&” 即可实现颜色为黑色背景，如果在 W3C 中即在对应 CSS 选择器中始终 “background:#000”实现。 3、设置边框颜色区别： - TOP 传统“bordercolor=取值”，CSS 中“border-color:”+颜色取值。例如：在传统 html 直接在 table 标签加入“bordercolor=�&”即可，在现在 CSS 中设置 “border-color:#000;”即可让边框颜色为黑色，同时记得对包括设置宽度和样式 （虚线、实现）。 DIV+CSS 颜色值扩展知识： 颜色值是一个关键字或一个数字的 RGB 规范。 16 个关键字是采取从 Windows 的 VGA 调色板： 水色 ， 黑色 ， 蓝色 ， 紫 红色 ， 灰 ， 绿 ， 灰 ， 褐红色 ，藏青色， 橄榄色 ， 紫色 ， 红色 ， 银 色 ， 青色 ， 白色 ， 黄色 。 RGB 颜色给出了四种方法之一： - TOP1、#rrggbb（ 如 ，＃00cc00） （强烈推荐使用此表示颜色取值） 2、#的 RGB（ 如 ，＃0c0） 3、RGB（十中，x，x）的 x 是一个包容性的 0 和 255 之间的整数（ 如 的 RGB （0,204,0）） 4、 RGB （?％， ?％， ?％） 其中 y 是一个包容性的数量介于 0.0 和 100.0 如 ， （ 的 RGB（0％，80％，0％）） 以下是 RGB 颜色表： - TOP 当然一般的网页开发软件都有颜色取值器：网页开发软件 DW 软件中 CSS 取色器 用 CSS 控制超链接文字样式 本文将讲解通过 css 样式或通过 css 来控制超链接样式。 这里主要讲文字类型的 超链接，超链接的样式包括通过 CSS 来控制设置超链接有无下划线、超链接文 字颜色等样式。 什么是超链接？ 超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网 页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址， 一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一 段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显 示在浏览器上，并且根据目标的类型来打开或运行。 超链接的代码 &a href=&http://www.divcss5.com/& target=&_blank& title=&关于 div css 的网站 &&DIV+CSS&/a& 解析如下： href 后跟被链接地址目标网站地址这里是 http://www.divcss5.com/ target _blank -- 在新窗口中打开链接 _parent -- 在父窗体中打开链接 _self -- 在当前窗体打开链接,此为默认值 _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页) title 后跟链接目标说明，也就是超链接被链接网址情况简要说明，或标题 CSS 可控制超链接样式-css 链接样式如下 a:active 是超级链接的初始状态 a:hover 是把鼠标放上去时的状况 a:link 是鼠标点击时 a:visited 是访问过后的情况 超链接样式案例 1、通常对全站超链接样式化方法 a{color:#333;text-decoration: } //对全站有链接的文字颜色样式为 color:#333;并立即无下划线 text-decoration: a:hover {color:#CC3300;text-decoration:}//对鼠标放到超链接上文字 颜色样式变为 color:#CC3300;并文字链接加下划线 text-decoration: 2、通过链接内设置类控制超链接样式 css 方法 案例超链接代码&a href=&http://www.divcss5.com/& class=&yangshi&&CSS&/a& 对应 CSS 代码 a.yangshi{color:#333;text-decoration: } a.yangshi:hover {color:#CC3300;text-decoration:} 通过这样的设置可以控制链接内的 css 类名为“yangshi”超链接的样式 3、通过对应超链接外的父级的 css 类的 css 样式来控制超链接的样式 案例超链接代码&div class=&yangshi&&&a href=&http://www.divcss5.com/&&CSS&/a&&/a& 对应 CSS 代码 .yangshi a{color:#333;text-decoration: } .yangshi a:hover {color:#CC3300;text-decoration:} 这里值得注意的是 a.yangshi 与.yangshi a 的样式 css 代码区别 这里就是常见的通过 div css 来对超链接样式设置案例及分析。 DIV CSS 优化 一、CSS 代码优化地方： 1、border(CSS 边框)简写： border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000; 可以简写为：border:1px solid #000; 2、padding（CSS padding）简写： padding-top:1padding-right:2padding-bottom:3padding-left:4 可简写为：padding:1px 2px 3px 4 padding-top:1padding-right:1padding-bottom:1padding-left:1 可简写为：padding:1 3、margin 简写 margin-top:1margin-right:2margin-bottom:3margin-left:4 可简写为：margin:1px 2px 3px 4 margin-top:1margin-right:1margin-bottom:1margin-left:1 可简写为：margin:1 4、background 简写 background-color:#000;可以简写为 background:#000; background-image:url(图片地址) 可简写为：background:url(图片地址) 5、font 简写 font-size:12 line-height:12 font-family:Arial, Helvetica, sans- 可简写为：font:12px/12px Arial, Helvetica, sans-二、CSS 重用优化 这里主要介绍是 CSS 代码的共用属性提取来达到节约代码、维护方便，CSS 实 例如下： .yangshi_a{ width:100 height:20 text-align: float: font-size:24} .yangshi_b{ width:100 height:20 text-align: float: font-size:24} 他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同(你可能 需要了解 CSS 居中)，我们就可以提取他们相同属性 优化后: .yangshi_a ,.yangshi_b{ width:100 height:20 text-align: float: font-size:24} .yangshi_b{text-align: } 注意观察以上代码，自己理解，不懂可到 CSS 论坛提出问题。 CSS id 与 CSS class 前面我们介绍过了 id 与 class 区别，接下来再简单介绍 CSS id 与 CSS class 区 别与用法。CSS id 知识： 在一个网页里 ID 只能使用一次。当然即使一个 id 在一个网页内被使用多次，其 CSS 样式仍然可以实现生效，但是一般规定 W3C 标准是使用一次。因为 ID 在 html 里可以赋予 html 标签特殊的属性如一下 JS 动作、表单传值等特性所以区 别于一个 class 可以使用多少的次， 而一个 CSS 命名的 id 只能使用一次避免一 些特定动作、传的表单值的兼容性特性错误即使没有其它 JS 脚本动作、表单传 值特性但是我们也一定执行一个页面只能使用一次。 id 选择器以 &#& 来定义，命名 CSS 选择器。 定义命名 css id 选择器例子： #yangshi1{color:#F00;}定义红色 www.divcss5.com 实例 #yangshi2{color:#0F0;}定义绿色 对应 html 中 div 引用 &div id=&yangshi1&&我颜色为红色&/div& &div id=&yangshi2&&我颜色为绿色&/div& 一个 div 标签的定义只能使用一个 id 如： &div id=&yangshi1& id=&yangshi2&&www.divcss5 测试内容&/div& 或 &div id=&yangshi1 yangshi2&&www.divcss5 测试内容&/div& 两个都是不正确的，并且 CSS 样式属性也不能生效- 成为 CSS 失效之一。 CSS class 知识： 与 CSS ID 不同特性是 clsss 类可以在一个网页内无限次引用。 Class 选择器定义以“.”来定义。定义 css class 选择器例 子： .yangshi1{color:#F00;} 定义文字为红色.yangshi2{font-size:28}定义文字 大小为 18px 对应 html 中 div+css 引用： &div class=&yangshi1&&我颜色为红色&/div& &div class=&yangshi2&&www.divcss5.com 我字体大小为 28px&/div& &div class=&yangshi1 yangshi2&&我颜色为红色文字大小为 28px&/div& 以上即是“yangshi1”“yangshi2”类的正确使用方法 扩展知识：能否使用数字命名 CSS 属性选择器 css 命名规范 以下为错误的 css 类使用方法： &div class=&yangshi1& class=& yangshi2&&我将无效&/div& 这样的引用方法即是错误的引用方法，同样可以得出一个只能出现一个&class=& 如果出现多个 css 类要应用到一个 div 标签内， 即可以使用&div class=&yangshi1 yangshi2&&来应用。 一个 div 标签内运用 id 和 class 是可以的： .yangshi1{... ...} #yangshi2{... ...} .yangshi3{... ...} &div class=&yangshi1& id=&yangshi2&&这样是可以的也是正确的. &div class=&yangshi1 yangshi3& id=&yangshi2&&同样是正确的可取的。 总结： 本文分别从知识点到实例讲解了 div css 中 id 和 class 的运用、需要注意地方、 正确运用引用方法。通过 divcss5 中 css 实例方式正确与错误运用 css id 和 css class 让大家能掌握 css 基础知识点。 CSS id 与 CSS class 前面我们介绍过了 id 与 class 区别，接下来再简单介绍 CSS id 与 CSS class 区 别与用法。 CSS id 知识： 在一个网页里 ID 只能使用一次。当然即使一个 id 在一个网页内被使用多次，其 CSS 样式仍然可以实现生效，但是一般规定 W3C 标准是使用一次。因为 ID 在 html 里可以赋予 html 标签特殊的属性如一下 JS 动作、表单传值等特性所以区 别于一个 class 可以使用多少的次， 而一个 CSS 命名的 id 只能使用一次避免一 些特定动作、传的表单值的兼容性特性错误即使没有其它 JS 脚本动作、表单传 值特性但是我们也一定执行一个页面只能使用一次。 id 选择器以 &#& 来定义，命名 CSS 选择器。 定义命名 css id 选择器例子： #yangshi1{color:#F00;}定义红色 www.divcss5.com 实例 #yangshi2{color:#0F0;}定义绿色 对应 html 中 div 引用 &div id=&yangshi1&&我颜色为红色&/div& &div id=&yangshi2&&我颜色为绿色&/div& 一个 div 标签的定义只能使用一个 id 如： &div id=&yangshi1& id=&yangshi2&&www.divcss5 测试内容&/div& 或 &div id=&yangshi1 yangshi2&&www.divcss5 测试内容&/div& 两个都是不正确的，并且 CSS 样式属性也不能生效- 成为 CSS 失效之一。 CSS class 知识： 与 CSS ID 不同特性是 clsss 类可以在一个网页内无限次引用。 Class 选择器定义以“.”来定义。定义 css class 选择器例 子： .yangshi1{color:#F00;} 定义文字为红色.yangshi2{font-size:28}定义文字 大小为 18px 对应 html 中 div+css 引用： &div class=&yangshi1&&我颜色为红色&/div& &div class=&yangshi2&&www.divcss5.com 我字体大小为 28px&/div& &div class=&yangshi1 yangshi2&&我颜色为红色文字大小为 28px&/div& 以上即是“yangshi1”“yangshi2”类的正确使用方法 扩展知识：能否使用数字命名 CSS 属性选择器 css 命名规范 以下为错误的 css 类使用方法： &div class=&yangshi1& class=& yangshi2&&我将无效&/div& 这样的引用方法即是错误的引用方法，同样可以得出一个只能出现一个&class=& 如果出现多个 css 类要应用到一个 div 标签内， 即可以使用&div class=&yangshi1 yangshi2&&来应用。 一个 div 标签内运用 id 和 class 是可以的： .yangshi1{... ...} #yangshi2{... ...} .yangshi3{... ...} &div class=&yangshi1& id=&yangshi2&&这样是可以的也是正确的. &div class=&yangshi1 yangshi3& id=&yangshi2&&同样是正确的可取的。 总结： 本文分别从知识点到实例讲解了 div css 中 id 和 class 的运用、需要注意地方、 正确运用引用方法。通过 divcss5 中 css 实例方式正确与错误运用 css id 和 css class 让大家能掌握 css 基础知识点。 css li 讲解 Css li 是使用 css 来控制 li 的样式-css 列表，如 li 列表的以点为开头，或图片 开头的列表形式。 Li 的基础知识 Li 是 html 的基本元素标签。 &li& 标签是用于定义列表项目。 &li& 标签可用在有序列表 (&ol&) 和无序列表 (&ul&) 中。 在 W3C 标准下 li 不能单独使用，需要与&ol&或&ul&配合使用，使用范例： &ol& &li&div+css 范例&/li& &li&div+css 范例之 li&/li& &/ol& &ul& &li&div+css 范例&/li& &li&div+css 范例之 li&/li& &/ul& 以上代码效果如下图： Css li 实例,li，ol li，ul li 的用法 经过实例演示知道了 li 的默认有序和无序的 css 样式，有序 ol 的样式是以阿拉 伯数字 1、2、3 为递增列表，而无序的 ul 的 CSS 样式是以一个圆黑点的列表形 式。 &li&兼容：所有的浏览器都支持兼容。 Css li 的样式引导 无论是有序还是无序的 li 列表，在 div+css 开发的时候都需要对 li 进行设置 css 样式。 一般对其设置代码如：设置 li 的 list-style 样式。 CSS 父级子级 认识了解 - TOP 简单讲 CSS 父级 CSS 子级是相对而言，如一个 DIV “A”被另外一个 DIV “B”包 裹着，这样我们就可以让我 B 是 A 父级，同样一个道理 举例说明： - TOP DIV CSS 父级子级说明例子： CSS 代码 .yangshi{...} .yangshi .yangshi_a{ ...} .yangshi .yangshi_b{ ...}Div 代码 &div class=&yangshi&& &div class=&yangshi_a&&内容 a&/div& &div class=&yangshi_b&&内容 b&/div& &/div& 以上 div+css 代码这里我们就可以认为 yangshi_a 父级（上一级）是 yangshi。 这样我们就可以利用 CSS 指针属性在 div css 中,最终 CSS 样式可以有相同命名 的属性选择器的，但是赋予不同的值。 这样我们通过.yangshi .yangshi_a 一看即可知道 yangshi_a 的父级是 yangshi 认识 CSS 父级子级目的： - TOP我们搞清 div css 之间父级自己关系，目的也是为我们维护和查找。 CSS 指针 什么是 CSS 指针？这里指针是指属于与被属于的关系 如.yangshi .yangshi_a{...} 对于 yangshi_a 是 yangshi 指向的样式 我们可以作 1 个实验来理解此 CSS 指针 是什么 原 CSS div 样式 .yangshi{ width:300 height:50 border:1px solid #F00; margin:0 text-align:} .yangshi .yangshi_a{ float: width:30 border:1px dashed #333;} .yangshi .yangshi_b{ float: width:50 border:1px dashed #333;}&div class=&yangshi&& &div class=&yangshi_a&&内容 a&/div& &div class=&yangshi_b&&内容 b&/div& &/div& &div class=&clear&&&img src=&images/s.gif& /&&/div& 浏览器显示结果：就我们以上实例来做 我们将.yangshi .yangshi_b{...} 改为.yangshic .yangshi_b{...} 得到 .yangshic .yangshi_b{ float: width:50 border:1px dashed #333;} 然后你浏览下结果 CSS 指针效果 是的 是不是感觉 yangshi_b 虽然我们 在 DIV 使用 class 调用了但是失效了 怎么多中间的虚线了 那就是因为 DIV 独占一行的特性出来了 而&div class=&yangshi_b&&内容 b&/div& 失效了 当然你会看到是的 是因为 CSS 指针属性，看到改后 yangshi_b 可以理解父级（yangshic）不存 在 （或 html 中改后 yangshi_b 父级是 yangshi 而不是 yangshic 所以为导致 yangshic 指针到 yangshi_b 的样式失败） 这个 CSS 指针我们可以很好利用 比如以后我们统一命名 比如在一个网页中很多栏目标题我们就以.titles 命名 我 们可以利用 CSS 指针给他赋予不同父级 在不同地方使用并赋予不同 CSS 样 式，利用这一特点 让我们维护更加容易，一看此命名就知道此处是某栏目标题 意思 DIV CSS 图片_CSS img css 图片_DIV CSS 图片_CSS img 这里为大家介绍的是 DIV CSS 对 img 图片控制。 我们常常会遇到以下情况： 1、img 图片多了边框，特别是链接后的图片带边框 2、图片超出撑破 DIV 下面我们通过 CSS 来解决这 2 个问题。 1、img 图片多了边框，特别是链接后的图片带边框 有边框的图片 根据以上图，我们对图片加链接，结果图片出现了边框， 解决方法： 我们只需在初始化 IMG 标签 CSS 即可 img{ padding:0; border:0;} 加入此 CSS 即可消除边框CSS 去掉图片边框效果 2、图片超出撑破 DIV 我们常常会遇到由于一个图片过宽过大，撑破了我们设置的宽度。 解决办法 使用 CSS 控制改对象 IMG 标签宽度即可，假如该对象为.yangshi 设置宽度为 500px，那我们就只需设置.yangshi img{max-width:500}但是在 IE6 中 max-width 是失效的，那我们最好解决办法，在上传图片的时候更加设置宽度， 让图片本身宽度小于该地方设置宽度即可，这样感觉很麻烦，但是很多大的网站 都是这样解决， 一可以避免撑破设置宽度，二可以降低图片大小让浏览器更快打 开网页。 总结： 1、一个网页中难免有图片，这时我们需要初始化 img 标签即：img{ padding:0; border:0;} 2、避免图片过宽撑破网页，我们建议在上传图片时候将图片剪切来比设置宽度 小， 同时还可以对该对象加入 overflow:hidden 属性，即隐藏超出内容包括图片。 px em pt 单位区别 PX\EM\PT 单位介绍 - TOP px 单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而 言的国内推荐； em 单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比 较多； pt 单位名称为点（Point），绝对长度单位一般老版本的 table 使用长度大小单 位但是现在基本上没有使用。 1. 以前 IE 无法调整那些使用 px 作为单位的字体大小,但现在几乎 IE 都支持 在 这里也推荐使用 PX 作为单位; 2. 国外的大部分网站能够调整的原因在于其使用了 em 作为字体单位; 3. Firefox 能够调整 px 和 em， 但是 96%以上的中国网民使用 IE 浏览器(或内核)。 px 像素(Pixel)。 相对长度单位。 像素 px 是相对于显示器屏幕分辨率而言的， QQ 截图也是使用 PX 作为长度宽度单位。 em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的 字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em 与 px 换算 - TOP 任意浏览器的默认字体高度 16px（16 像素）。所有未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em,10px=0.625em。为了简化 font-size 的换算， 需要在 css 中的 body 选择器中声明 font-size=62.5%，这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来 的 px 数值除以 10，然后换上 em 作为单位就行了。 em 单位有如下特点： - TOP1. em 的值并不是固定的; 2. em 会继承父级元素的字体大小。 我们在写 CSS 的时候如果要用 em 为单位，需要注意两点： 1. body 选择器中声明 Font-size=62.5%; 2. 将你的原来的 px 数值除以 10，然后换上 em 作为单位; 3. 重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。 也就是避免 1.2 * 1.2= 1.44 的现象。比如说你在#content 中声明了字体大 小为 1.2em，那么在声明的字体大小时就只能是 1em，而不是 1.2em, 因为此 em 非彼 em，它因继承#content 的字体高而变为了 1em=12px。 但是 12px 汉字例外，就是由以上方法得到的 12px(1.2em)大小的汉字在 IE 中并不等于直接用 12px 定义的字体大小，而是稍大一点。这个问题 Jorux 已经 解决， 只需在 body 选择器中把 62.5%换成 63%就能正常显示了。 原因可能是 IE 处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。 推荐网页单位 - TOP 所以为了单位换算错误推荐使用 PX（像素）作为网页制作单位。 以上为大家介绍了 px em pt 单位，及换算方式，一般现在我们使用长度单位都 以 px 为长度单位。这里我们也推荐使用以 px（像素）为网页的尺寸长度单位， 符合浏览器的像素单位，同时也为了方便计算长度尺寸。 DIV CSS display (block none inline)属性的用法教程 在一般的 CSS 布局制作时候，我们常常会用到 display 对应值有 block、none、 inline 这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过 CSS display 知识加实例、图演示讲解方法来学习和了解 DIV CSS display。 1、CSS display 使用 TOP 以下为 DIV CSS 运用 dispaly，说明这里 dispaly 值任意 CSS 代码： .divcss5{display:none} Html 对应运用： &div class=&divcss5&&我是测试内容&/div& 根据以上可以自己 DIV+CSS 下，看看使用结果 2、display 的值有哪些 TOP Css display 值与解释-（详细可见 CSS 手册的 CSS display 手册） 参数： block :块对象的默认值。用该值为对象之后添加新行 none :隐藏对象。与 visibility 属性的 hidden 值不同，其不为被隐藏的对象保留 其物理空间 inline :内联对象的默认值。用该值将从对象中删除行 compact :分配对象为块对象或基于内容之上的内联对象 marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after 及:before 伪元素一起使用 inline-table :将表格显示为无前后换行的内联对象或内联容器 list-item :将块对象指定为列表项目。并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell :将对象作为表格单元格显示 table-column :将对象作为表格列显示 table-column-group :将对象作为表格列组显示 table-header-group :将对象作为表格标题组显示 table-footer-group :将对象作为表格脚注组显示 table-row :将对象作为表格行显示 table-row-group :将对象作为表格行组显示 3、css display block TOP Display:block 是我们常用的，block 也是 Display 默认的值。 解释：该对象随后的内容自动换行。 css display block 实例 CSS 代码： .divcss5{display:block} Html 对应运用代码： &span class=&divcss5&&我的后面文字会换行&/span&我是被前面的 divcss5对应 CSS 属性换行。 &span&不会被换行,因为我没有被设置 display:block&/span& 对应结果截图: 说明这里使用 span 作实例，一个被设置 CSS 样式，一个未设置，自己可以对 比被设置 DIV display:block 样式的对象随后的内容被换行。 4、css display none TOP 此 display 的 none 值，我们也常常使用，用于隐藏对象内容，被隐藏的对象也 不会占用自身固有宽度高度空间。 详情可见 CSS 隐藏讲解：http://www.divcss5.com/jiqiao/j55.html 5、css display inline TOP Display:inline,我们常常在 li 中使用它。功能是让 li 排成一排（称：删除行） 。 接下来我们以一个未设置 li 列表与一个设置 css Display inline 样式对比实例演 示演示。 Css 代码 ul.divcss5 li{display:inline} 解释：ul.divcss5对应 li css 样式属性为 display:inline Html 对应代码： &ul& &li&我父级 ul 没有 divcss5样式&/li& &li&我是独行&/li& &li&我是独行&/li& &/ul& &ul class=&divcss5&& &li&我父级 ul 有 divcss5样式&/li& &li&我站成一排&/li& &li&我在 divcss5下 li 站成一排&/li& &/ul& 演示结果图： 说明：设置 css 为 display:inline 的 li 对象，li 被排成一排，而未设置的 li 列表对 象仍然继承原来自身独占一行的 CSS 样式。 以上是 DIVCSS5为大家整理和展示的关于 CSS display 常用的属性对应 display none、display inline、display block 值的详细讲解与实例，希望对你有帮助。同 时有什么问题或疑问请到 DIVCSS5的 CSS 论坛发贴讨论、求助。css 图片_DIV CSS 图片_CSS img 这里为大家介绍的是 DIV CSS 对 img 图片控制。我们常常会遇到以下情况： 1、img 图片多了边框，特别是链接后的图片带边框 2、图片超出撑破 DIV 下面我们通过 CSS 来解决这2个问题。 1、img 图片多了边框，特别是链接后的图片带边框 根据以上图，我们对图片加链接，结果图片出现了边框， 解决方法： 我们只需在初始化 IMG 标签 CSS 即可 img{ padding:0; border:0;} 加入此 CSS 即可消除边框2、图片超出撑破 DIV 我们常常会遇到由于一个图片过宽过大，撑破了我们设置的宽度。 解决办法 使用 CSS 控制改对象 IMG 标签宽度即可，假如该对象为.yangshi 设置宽度为 500px，那我们就只需设置.yangshi img{max-width:500}但是在 IE6中 max-width 是失效的，那我们最好解决办法，在上传图片的时候更加设置宽度， 让图片本身宽度小于该地方设置宽度即可，这样感觉很麻烦，但是很多大的网站 都是这样解决， 一可以避免撑破设置宽度，二可以降低图片大小让浏览器更快打 开网页。 总结： 1、一个网页中难免有图片，这时我们需要初始化 img 标签即：img{ padding:0; border:0;} 2、避免图片过宽撑破网页，我们建议在上传图片时候将图片剪切来比设置宽度 小， 同时还可以对该对象加入 overflow:hidden 属性，即隐藏超出内容包括图片。 3、使用 css 让大图片不超过网页宽度 让大图片不超过网页宽度，让图片不撑破通过 CSS 样式设置的 DIV 宽度！ 接下来，我们来介绍下网站在开发 DIV+CSS 的时候会遇到一个问题，在发布一 个大图片的时候因为图片过宽会撑破自己设置的 div 宽度的问题。 图片撑破布局原因 1、由于浏览器版本低（微软 IE6） 2、没有设置 div 布局的宽度 解决图片超出宽度或撑破 div css 布局方法 1、在文章中发布图片的时候将图片编辑缩小 2、通过对对应 div 的 css 来设置显示的图片最宽宽度 推荐 3、通过 css 对图片设定宽度。 通过 css 来解决图片撑破 div 布局案例 通过 css 来控制代码如下(cmcss 是对应父级类名)： .cmcss {margin:width: 600} .cmcss img{max-width: 100% ! height: auto! width:expression(this.width & 600 ? &600px& : this.width)!}这种图片第 一次加载时候图片不能显示 直接通过对对应的 div 内的内容图片宽度设置代码如下： .cmcss img{ width:500} 宽度自定，但是不推荐此方法，因为设置后此 div 布 局内的图片将全部宽度为500px，那样将造成图片小的，被放大显示模糊。 可以通过对图片设置最宽 css 可以使用 max-width 来设置，但是 IE6不支持，但 是可以使用浏览器的 css hack 来设置代码如下 .cmcss img{max-width:500_width:500} 说明：通过其他浏览器不支持带“_”的 css，但是 IE6支持。刚好可以通过此 css hack 来实现对图片宽度的现在。这里只能克服 IE6显示固定的宽度来符合其它 版本的兼容性。 扩展与提高 我们看区别不同浏览器 CSS HACK 的代码区别 FF，IE7，IE6： background:*background:green !*background: 你可能要问了，为什么不用“*”来代替“_”来区别 IE6浏览器，这里值得注意的是 ie6和 IE7都会解释和识别“*”的，但是 IE7对 important 的识别具有优先全，所以 IE7在 CSS 代码中有 important 将有优先识别并成为唯一性， 所以在有 important 时候 IE7和 IE6前面都可以用“*”号，但是无论带 important 在前或在后 IE7将识 别为唯一区别 css hack。所以这里没有 important 的时候需要用另外 IE6的 css hack 中“_”小写半角下划线。 案例如下（Blue hills.jpg 图片为800像素宽的图片） 代码： &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /& &title&www.divcss5.com 案例-图片不超过设置宽度&/title& &style type=&text/css&& &!-.cmcss img{ max-width:150_width:150} --& &/style& &/head& &body& 原始图片宽度为800PX，设置后如下图为150px &div class=&cmcss&&&img src=&Blue hills.jpg& /&&/div& &/body& &/html&截图如下： 通过此方法对图片的宽度设置最大宽度为多少，css 代码少方便，推荐此方法来 解决图片撑破 div css 布局的宽度。二、DIV+CSS 网页布局常用基础知识CSS 命名规范 全局样式：global.css； 框架布局：layout.css； 字体样式：font.css； 链接样式：link.css； 打印样式：print.css； 二．常用类/ID 命名规范 页 眉：header 内 容：content 容 器：container 页 脚：footer 版 权：copyright 导 航：menu 主导航：mainMenu 子导航：subMenu 标 志：logo 标 语：banner 标 题：title 侧边栏：sidebar 图 标：Icon 注 释：note 搜 索：search 按 钮：btn 登 录：login 链 接：link 信息框：manage ?? 常 用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对 于二级类/ID 命名，则采用组合书写的模式，后一个单词的首字母应大写： 诸如“搜索框” 则应命名为 “searchInput” 搜索图标” 、 “ 命名这 “searchIcon” 搜索按钮” 、 “ 命名为 “searchBtn CSS 书写规范及方法 一. 常规书写规范及方法 1. 选择 DOCTYPE： XHTML 1.0 提供了三种 DTD 声明可供选择： 过渡的(Transitional):要求非常宽松的 DTD，它允许你继续使用 HTML4.01 的标识(但是要 符合 xhtml 的写法)。完整代码如下： 严格的(Strict):要求严格的 DTD，你不能使用任何表现层的标识和属性，例如 。完整代码如下： 框架的(Frameset):专门针对框架页面设计使用的 DTD，如果你的页面中包含有框架，需要 采用这种 DTD。完整代码如下： 理 想情况当然是严格的 DTD，但对于我们大多数刚接触 web 标准的设计师来说，过渡的 DTD(XHTML 1.0 Transitional)是目前理想选 择(包括本站，使用的也是过渡型 DTD)。因为 这种 DTD 还允许我们使用表现层的标识、元素和属性，也比较容易通过 W3C 的代码校验。 2. 指定语言及字符集： 为文档指定语言： 为了被浏览器正确解释和通过 W3C 代码校验， 所有的 XHTML 文档都必须声明它们所使用的编 码语言；如： 常用的语言定义： 标准的 XML 文档语言定义： 针对老版本的浏览器的语言定义： 为提高字符集，建议采用“utf-8” 。 3. 调用样式表： 外部样式表调用： 页面内嵌法：就是将样式表直接写在页面代码的 head 区。 如： &style type=”text/css”&&!C body { background : color : } C& &/style& 外部调用法：将样式表写在一个独立的.css 文件中，然后在页面 head 区用类似以下代码调 用。 &link rel=” stylesheet” rev=” stylesheet” href=” css/style.css” type=” text/css” media=”all” /& 在符合 web 标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css 文件而改变 页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所 有文件的样式。 4、选用恰当的元素： 根据文档的结构来选择 HTML 元素，而不是根据 HTML 元素的样式来选择。例如，使用 P 元素 来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用 通用的 div 或者是 span； 避免过渡使用 div 和 span。少量、适当的使用 div 和 span 元素可以使文档的结构更加清晰 合理并且易于使用样式； 尽可能少地使用标签和结构嵌套， 这样不但可以使文档结构清晰， 同时也可以保持文件的小 巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视； 5、派生选择器： 可以使用派生选择器给一个元素里的子元素定义样式， 在简化命名的同时也使结构更加的清 晰化，如： .mainMenu ul li {background:url(images/bg.)} 6、辅助图片用背影图处理： 这里的” 辅助图片” 是指那些不是作为页面要表达的内容的一部分， 而仅仅用于修饰、 间隔、 提醒的图片。 将其做背影图处理， 可以在不改动页面的情况下通过 CSS 样式来进行改动， 如： #logo {background:url(images/logo.jpg) #FEFEFE no-} 7、结构与样式分离： 在页面里只写入文档的结构， 而将样式写于 css 文件中， 通过外部调用 CSS 样式表来实现结 构与样式的分离。 8、文档的结构化书写： 页面 CSS 文档都应采用结构化的书写方式，逻辑清晰易于阅读。如： &div id=”mainMenu”& &ul& &li&&a href=”#” &首页&/a&&/li& &li&&a href=”#” &介绍&/a&&/li& &li&&a href=”#” &服务&/a&&/li& &/ul& &/div& /*=====主导航=====*/ #mainMenu { width:100%; height:30 background:url(images/mainMenu_bg.jpg) repeat-x; } #mainMenu ul li { float: line-height:30 margin-right:1 cursor: } /*=====主导航结束=====*/ 9、鼠标手势： 在 XHTML 标准中，hand 只被 IE 识别，当需要将鼠标手势转换为“手形”时，则将“hand” 换为“pointer” ，即“cursor:” 二．注释书写规范 1、行间注释： 直接写于属性值后面，如： .search{ border:1px solid #/*定义搜索输入框边框*/ background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/ } 2、整段注释： 分别在开始及结束地方加入注释，如： /*=====搜索条=====*/ .search { border:1px solid # background:url(../images/icon.gif) no-repeat #333; } /*=====搜索条结束=====*/ 三．样式属性代码缩写 1、不同类有相同属性及属性值的缩写： 对于两个不同的类， 但是其中有部分相同甚至是全部相同的属性及属性值时， 应对其加以合 并缩写， 特别是当有多个不同的类而有相同的属性及属性值时， 合并缩写可以减少代码量并 易于控制。如： #mainMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:30 overflow: } #subMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:20 overflow: } 两个不同类的属性值有重复之处，刚可以缩写为： #mainMenu,#subMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; overflow: } #mainMenu {height:30} #subMenu {height:20} 2、同一属性的缩写： 同一属性根据它的属性值也可以进行简写，如： .search { background-color:#333; background-image:url(../images/icon.gif); background-repeat: no- background-position:50% 50%; } .search { background:#333 url(../images/icon.gif) no-repeat 50% 50%; } 3、内外侧边框的缩写： 在 CSS 中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不 同时也可直接缩写，如： .btn { margin-top:10 margin-right:8 margin-bottom:12 margin-left:5 padding-top:10 padding-right:8 padding-bottom:12 padding-left:8 } 则可缩写为： .btn { Margin:10px 8px 12px 5 Padding:10px 8px 12px 5 } 而如果当上边与下边、 左边与右边的边框属性值相同时， 则属性值可以直接缩写为两个， 如： .btn { margin-top:10 margin-right:5 margin-bottom:10 margin-left:5 } 缩写为： .btn {margin:10px 5} 而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如： .btn { margin-top:10 margin-right:10 margin-bottom:10 margin-left:10 } 缩写为： .btn{margin:10} 4、颜色值的缩写： 当 RGB 三个颜色值数值相}
我要回帖
更多推荐
- ·哪位好心的想仙后能再发我一些东方神起什么时候出道的的王道文打包资源丫？
- ·搜一本 网络小说 主角能进入游戏获得能力的小说 在游戏里可以往武器注入内力？
- ·求Cosplay原神coser图片
- ·求《恋爱倩女幽魂手游主角剧情视频的男主都很危险》韩国小说的资源
- ·找一部小时候看过的外国电视剧剧，好像是零几年的？
- ·企业认为对员工岗位风险因素描述的职业发展影响最大的因素有哪些方面?
- ·足球哪里学习比较专业？
- ·山东省直事业单位成绩体检标准 是个单位自己的标准 还有统一的标准？注意是省直单位。
- ·对啊网英语音标的英语怎么样？靠谱吗？
- ·脑血栓后遗症能好吗治吗?
- ·cas5.0单点登录服务器是怎么判断两个服务是互相信任的
- ·4/53除以4(6/5)等于多少用分数表示
- ·同样的听力50是否带助听器损失，为什么佩戴助听器后，年青人听得好
- ·不是QQ好友，知道对方QQ号，可以好友克隆对方知道吗吗
- ·120元一饼 一箱20饼 0.15折 饼干怎么折等于800求助解
- ·不要以为学弘扬雷锋精神的手抄报人是傻子，懂得维护别人利益的人更懂得维护自己的利益，君不见雷锋死后流芳百世吗！
- ·这亚克力是什么材质？
- ·这个段代码div+css漂浮css div float 不换行语法上有什么错误吗？
- ·走地皇网址2017谁有在线看的网址？走地皇网址哪里拿
- ·脑血栓病人不能吃什么能治疗好吗?
- ·不是qq好友克隆，知道对方QQ号，可以克隆对方吗
- ·有关极限的夫子的试炼就一道题题
- ·【高中化学气体】对于气体压强而言，改变压强的方式除了通过压缩体积还有哪些？
- ·洋流性质的性质会影响沿岸山脉雪线的高低吗
- ·败字组词么组词
- ·面试武汉供卵中介者时注意什么，会有什么不好的癖好吗
- ·也许世界上最可怜的孩子的孩子都一样什么意义
- ·在车上我跟大姐二姐姐三弟吃饭不让妈妈吃捡个儿子出国回来看到的视频
- ·我是普通本科，想问你一些二本能考军校研究生么的事可以吗
- ·解解关于x的不等式ax2X-1≤3（1+x），并求其正整数解
- ·输入为从键盘输入一个正整数数,该正整数小于2的31次方. 输出: 将该数的各位数字逆序输出.c语言
- ·欣百达鼻炎会影响记忆力吗吗？
