首页 >web前端 >html教程 >CSS+DIV小结5_html/css_WEB-ITnose

CSS+DIV小结5_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 12:33:331072浏览

一、DIV 和 SPAN 标记的区别
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样

式表。两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素)。
  具体步骤:
  1.所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代

码你会有更形象的理解:
  测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示,还可以有其他标记

</div>

  2.块元素和行内元素也不是一成不变的,通过定义CSS的display属性值可以互相转化,如:
  测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">

这里会另起一行显示</span>
  提示:如果不对DIV元素定义任何CSS属性,其显示效果将行将于P元素。

二、盒子模型
盒子模型的组成部分:content (内容)、padding (间隙)、border(边框)、margin(间隔)。如图所示:

 
  打个比方:相框,或者说是盒子,都有一些参数:比如相框中相片的所占空间(content)、相片

与相框的距离
(padding)、相框本身的宽度(border)、墙上两个相框之间的距离(margin).这下大家应该比较熟悉了

吧!!
  小结一下:盒子模型的的高度(即相框模型的宽度)=content+padding+border+margin;
  这几个参数可是说是“盒子模型”的基本属性名,我们可以通过css技术给这些属性定义不同的属性

值,就可以达到丰富
的效果了!
  content作为网页内容,是由height、width等属性值对内容单独定义的。作为框架部分,下面列举

padding、border、
margin的部分常用属性,以做参考:
   padding    padding-Bottom  padding-left                  padding-right                   padding-Top
   border      border-bottom     border-bottom-color     border-bottom-style         border-bottom-

width 等等
   margin      margin-bottom    margin-left                    margin-right                     margin-top
CSS盒子模型结构的实例剖析
网页“盒子模型”代码如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">



酷扑工作室--CSS盒子模型结构的实例剖析



酷扑工作室--CSS盒子模型结构的实例剖析



意:关于元素的宽度,元素之间并列间距的计算,大家在网页布局时一定注意。
注意:1、因为不同的浏览器对css的支持不同,一般话两个元素之间的间距或者说是距离大小,

并不是两个元素的margin相加,而是取较大的那个margin值!
            2、当将margin设为负数时,会使得被设为负数的块向相反的方向移动,甚至覆盖在另外的

块上。
三、元素的定位
1、float定位向左右浮动。
2、clear清除浮动
3、position定位
 position定位与float一样,也是CSS排版中非常重要的概念,position从字面意思上看就是指定块

的位置,即块相对于其父块的位置和相对于它自身应该在的位置。
   position属性一共有4个值,分别为static(静态的),absolute(绝对的),relative(相对的

)和fixed(固定的)。其中static为默认值,它表示块保持在原本应该在的位置上,即该值没有任

何移动的效果。下面先来介绍absolute,它表示绝对位置。

四、自动选择CSS样式代码


自动刷新CSS样式变


声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn