安徽工程大学web程序设计第2章.pptVIP

CSS补充知识 一、CSS盒子模型 SampleCSSbox_1.html padding(填充)是边框到内容的距离 border(边框)是盒子的边框,可以对边框的宽度、边框样式、边框颜色加以定义 margin(边界)定义元素周围的空间。可以用负值对内容进行叠加 由外到内依次是:margin、border、padding 、content。 如果对一个box设置背景属性，指的是content区域和padding区域，而width属性、height属性指的是content区域，不包括padding和margin。 css的margin、border和padding属性都分为上、下、右、左四部分，每个部分都可以单独存在。 SampleCSSbox_2.html SampleCSSbox_3.html margin定义了页边距或者与其他层之间的距离，可以简写为margin:20px 30px 40px 50px(顺序为上右下左)。分开写就是margin-top:20px、margin-right:30px;margin-bottom:40px;margin-left:50px;如果所有边界都一样，可以写为margin:20px。 border 有颜色、粗细、样式三个属性，对左边框设定属性可以写成border-left:#000000 thin solid. 分开写: border-left-color:#000000; border-left-width:thin; border-left-style:solid 如果上右下左一样，就写为border:#000000 thin solid (两个顺序 上右下左 颜色 宽度 样式) width定义的为内容的宽度 边框风格 二 绝对定位和相对定位 绝对定位是一种常用的CSS定位方法，层布局就是一种简单的CSS绝对定位方法。绝对定位在CSS中的写法为:postion:absolute。应用top、right、bottom、left进行定位，默认父标签的坐标起始点为原点；对整个网页进行定位布局时其父标签为body,其坐标原点在浏览器左上角。 如果一个box的宽度和高度固定，那么给定top和left两个属性就可以对box在网页中进行定位。 如果一个网页有包含多个box,根据box的宽度的位置要求以及大小进行计算，来进行绝对定位。 相对定位 相对是相对于静止定位时层的位置。 除了绝对和相对定位之外，还有固定定位。所谓固定定位就是将元素保持在同一位置，即使文档滚动也如此。但是ie浏览器不支持固定定位。 元素的默认的是静态定位，这意味着在文档中的连续的显示该元素。 。 SampleCSSbox_4.html #relative采用相对定位，其位置由属性top和left的值以及父对象#head的位置来决定，当#haed位置发生改变时，#relative相对于#head 的位置不发生变化。 SampleCSSbox_5.html 尝试用相对定位的方式进行整个页面，页面中有三个层，都采用相对定位，实现的关键是计算各个层的坐标，或者说各层top和left两个属性的值。 本例尝试用相对定位的方式进行这个页面的布局，这种布局方法没有使用价值，目的在于掌握计算各个层的相对坐标。 SampleCSSbox_5.html 本实例尝试用相对定位的方式进行整个页面的布局，这种布局没有使用价值。目的是进一步学习相对定位。 注意： 相对定位坐标=绝对定位坐标(absolute)-静止定位坐标(static) 三 浮动 浮动是一种常用的css定位方式，首先要理解display属性和block属性。 1)块元素和内嵌元素 HTML元素分为两种，一种是块元素，一种是内嵌元素。 块元素总是从新行开始；元素的宽、高、padding、margin属性都可在css中进行控制；默认宽度为容器的100%。常见的块元素有div、 p、h1、form、ul、li、ol、dl、dd、dt、table。 内嵌元素可和其他元素在同一行上；宽、高、padding、margin等不可改变；常见的内嵌元素有span、a、lablel、input、img、strong、em。 用display:inline或display:block可以改变HTML元素的显示特性。Sample让inline元素从新行开始，让block元素不换行。 2）浮动