搜索
DIV+CSSDiv+css的概述业界对DIV+CSS的标准化设计关注DIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准传统的网页布局是使用网格DIV+CSS布局DIV+CSS布局这个布局中，div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学习，会发现div+css的好处实在是太明显了DIV的概念1.DIV全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。2.如果单独使用DIV而不加任何CSS，那么它在网页中的效果和使用P/P是一样的。3.DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码4.注意：div标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，paadivbb/divcc/p的结果是不确定的。SPAN和DIV的区别SPAN和DIV的区别在于:DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。SPAN是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容另外，由于SPAN是行级元素，SPAN的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。CSS概述是CascadingStyleSheet的简称，中文翻译为：层叠样式表；为网页设计者提供更大的网页空间应用弹性；将网页的文字内容与版面设计分开处理几乎所有的浏览器都支持可取代以前一部分必须通过专门的图像处理软件实现的图片特效功能更易于管理样式，方便编排，简化管理成本便于统一风格为网页添加CSS要想使用CSS，首先要让浏览器识别并调用，通常添加样式的方式有如下四种：内嵌样式内部样式表链入外部样式表导入外部样式表样式表的优先级别从高到低为：行内样式、内部样式、链接样式、导入样式。高优先级样式将继承低优先级样式的未重叠定义，但覆盖重叠的定义。用CSS定义样式CSS的定义是由三个部分构成：选择符、属性和属性的取值，定义方法如下：selector{property:value}如：body{color:black}p{text-align:center;color:red}p{text-align:center;color:black;font-family:arial}此处定义的是：段落排列居中，段落中文字为黑色，字体是arial。用CSS定义样式选择符组为了减少样式的重复定义，可将相同属性和值的选择符组合起来书写，使用逗号分隔，如：h1,h2,h3,h4,h5,h6{color:green}类选择符可将相同的分类定义为不同的样式，定义时，在自定义类名前加点号，如：P.right{text-align:right}P.center{text-align:center}.left{text-align:left}用CSS定义样式ID选择符由HTML代码中的ID参数指定单独的样式，和类选择符类似。如：#intro{font-size:150%;}包含选择符一种单独针对某种元素包含关系而定义的样式表，如：tablea{font-size:32px}用CSS定义样式样式表的层叠性层叠性指的是继承性，样式表的继承规则是外部的元素样式继承给这个元素所包含的其他元素实际上，所有嵌套在元素中的元素都会继承外层元素已指定的属性值，有时会把很多层次所嵌套的样式叠加在一起，除非另外设置div{color:red;font-size:9pt}……divp这个段落的文字为红色9号字/p/divP中内容会继承DIV所定义的样式。但当样式表继承遇到冲突时，总是以最后定义的样式为准用CSS定义样式注释可以在CSS中插入注释来说明代码的含义，注释有利于自己或别人今后在编辑和更改代码时理解代码的含义在浏览器中，注释是不显示的注意与HTML中的注释方式的区别，此处只能以“/*”开头，以“*/”结尾盒子模型每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。盒子模型盒子模型盒子模型布局中的主要样式fontline-heightcolormarginpaddingbordertext-alignbackgroundwidth:heightfloat:cleardisplayCSS定位与显示CSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置定位与布局密切相关CSS中有三种基本的定位机制普通流：显示的位置由元素在HTML文件中的位置决定浮动：可以左右移动，直到碰到包含框或其它浮动框绝对定位：可以直接将元素定位在页面上的任何位置层叠顺序进行CSS定位时，有可能发生多个元素的重叠需要设置元素在Z轴上的层叠顺序与定位相关的属性主要有14个普通流定位机制按照元素的类型和在HTML源文件中的出现顺序进行定位（从左到右从上到下）就是block元素（如p、h、div）（块级框）从上到下一个接一个的排列行级元素（如span、strong元素）在行中水平布置除非特殊的指定，否则所有的框都在普通流中定位相对定位相对于元素在普通文本流中的初始位置如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动styletype=“text/css”#style1{position:relative;left:20px;top:20px}/style绝对定位可以把某个元素精确的定位在某个地方绝对定位使元素的位置与文档流无关，因此不占据普通流中的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样绝对定位的元素的位置是相对于最近的父元素而言的固定定位是绝对定位的一个特殊情况与绝对定位相似，唯一不同的是绝对定位是相对于父元素的某一个位置，而固定定位则是固定在浏览器的视框位置这样当窗口滚动时，固定定位的元素不会随之滚动，总是出现在屏幕的固定位置styletype=“text/css”#style1{position:absolute;left:20px;top:20px}/stylestyletype=“text/css”#style1{position:fixed;left:20px;top:20px}/style浮动（float）浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果浮动（float）假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。div的顺序是HTML代码中div的顺序决定的。靠近页面边缘的一端是前，远离页面边缘的一端是后。Clear属性元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列如果要为浮动元素留出空间，使其它的元素不在其两侧显示，可以对其周围的元素使用清理属性clear:none|left|right|both添加了clear属性的元素，通过自动增加空白边，达到留出空间的效果清除浮动可以理解为打破横向排列。Clear属性假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：你可能会这样操作：在div1的CSS样式中添加clear:right;，意为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。Clear属性其实这种理解是不正确的，这样做没有任何效果对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。要想让div2下移，就必须在div2的CSS样式中使用浮动，而不能在div1元素的CSS样式中使用清除浮动，本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行Z-index属性Z-index－设置层叠顺序当定位多个元素并将它们相互重叠时，可以使用该属性设置元素在Z轴的层叠顺序z-index:number属性值越大表示在越上层•网页布局的基础，也是最常见的布局方式之一•主要应用技能标准文档流块级元素margin属性—设置自动居中自动居中不能同时设置浮动属性自动居中一列布局•CSS中规定的第二种定位机制•能够实现横向多列布局（横向两列、横向三列…横向N列）•通过设置float属性实现浮动布局•3个属性值left—左浮动right—右浮动none—不浮动•特点：元素会左移，或右移，直至触碰到容器为止float属性设置了浮动的元素，仍旧处于标准文档流中•对紧邻其后元素的影响相邻元素上移，占据其后位置紧挨着它，并排显示float属性•常见问题父元素高度无法自动扩展元素上移，填满浮动元素右侧（或中间）的间隙浮动导致问题浮动元素对相邻元素的影响，会导致页面布局混乱•清除浮动的常用方法clear属性—常用clear:both;同时设置width:100%(或固定宽度)+overflow:hidden;清除浮动•网页布局最常见的方式之一•主要应用技能float属性—使纵向排列的块级元素，横向排列margin属性—设置两列之间的间距横向两列布局