前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位、浮动、盒子模型(第二次课)、css的具体应用(第三次课)、css3(第四次课)。今天的内容是关于css中定位、浮动以及盒子模型。
内容:CSS最核心的内容,围绕div标签展开。
1.做静态网页首先要考虑页面的布局,可用<div></div>来将网页分为不同的模块,就相当于盖房子一样。
2.<div></div>是一个块元素,与之相对应的还有行内元素。
块元素的特点:(1)块元素默认显示在父标签的左上角;(2)块级元素默认占满一行(占满整个文档流)。常用的块级元素有:div,form,h1-h6,menu,ol,ul,table,p。
行内元素(内联元素)特点:(1)行内元素大小受到文字区域影响,不受width和height属性影响;(2)行内元素不会单独占满一行。常见的行内元素有a,span,img,input,label。
行内元素变为块级元素:display:block;块级元素变为行内元素:display:inline;还有一个display:inline-block,既有行内元素的特点,也有块元素的特点,即:高度、宽度会受影响,但不会单独占满一行。
3.浮动:float:left(第一个元素向左边靠,且第二个元素紧跟在第一个元素的后面,向左浮动),同理:float:right。设置浮动之后会对后面的元素造成影响,所以需要清除浮动的影响,使用:clear:left,clear:right,clear:both。
4.盒子模型:设置模型的边框、内间距、外间距,即盒子模型有三个元素:border,padding,margin。
border用法:border:solid 2px #000;border-top:dashed 2px #FFF;
padding用法: padding:10px;(表示上下左右内间距都是10px)
padding:10px 20px;(表示上下内间距为10px,左右内间距为20px)
padding:5px 10px 20px(表示上面的内间距为5px,左右内间距为10px,下面的内间距为20px)
padding:5px 10px 15px 20px(表示上面的内间距为5px、右面的内间距为10px、下面的内间距为15px、左面的内间距为20px)
也可单独设置:padding-top,padding-right,padding-bottom,padding-left
padding是将框撑大相应的距离,元素的尺寸会变大。padding对行内元素是支持的。
margin用法:设置块和块之间的外间距,规律与padding相同。但是margin对于行内元素只支持左右外间距,不支持上下外边距。
5.定位:position:absolute(绝对定位)和position:relative(相对定位)及position:fixed(固定位置)。
position:absolute:设置为绝对定位时,元素脱离文档流,不会单独占满一行,不会受到浮动的影响;元素的方位受到窗体的上下左右影响。
position:relative:设置为相对定位时,元素没有脱离文档流,会受到浮动的影响;元素的方位是相对元素的父标签。
position:fixed:设置固定位置,如QQ弹框。该设置是脱离文档流的。
后记:多多练习元素及属性的使用,在以后的应用中会用的比较多。