盐都城乡建设部网站首页,网站开发旅游前台模板,运输公司网站模板,东莞网站推广外包CSS入门1_CSS概要1.1_CSS引入方式2_CSS选择器3_字体样式3.1_字体属性3.2_字体类型#xff1a;font-family3.3_字体大小#xff1a;font-size3.4_字体粗细#xff1a;font-weight3.5_字体颜色#xff1a;color3.6_总结4_文本样式4.1_文本样式属性4.2_首行缩进#xff1a;te…
CSS入门1_CSS概要1.1_CSS引入方式2_CSS选择器3_字体样式3.1_字体属性3.2_字体类型font-family3.3_字体大小font-size3.4_字体粗细font-weight3.5_字体颜色color3.6_总结4_文本样式4.1_文本样式属性4.2_首行缩进text-indent4.3_水平对齐text-align4.4_文本修饰划线text-decoration4.5_大小写text-transform4.6_行高line-height4.7_间距letter-spacing、word-spacing5_边框5.1_边框的属性5.2_边框属性详细使用5.3_局部样式6_列表样式6.1_列表项符号一般不使用此方法list-style-type6.2_列表项图片list-style-image7_表格7.1_表格标题位置7.2_表格边框合并border-collapse7.3_表格边框间距border-spacing8_图片样式8.1_图片大小8.2_图片边框border8.3_图片或文本对齐text-align8.4_文字环绕float9_背景样式9.1_背景颜色和背景图片9.2_背景颜色background-color9.3_背景图片样式background-image9.4_背景图片重复background-repeat9.5_背景图片位置background-position9.6_背景图片固定background-attachment10_伪类鼠标状态10.1_四个伪类10.2_深入了解:hover10.3_鼠标样式11_盒子模型11.1_盒子模型组成部分11.2_宽高width、height11.3_内边距padding11.4_外边距margin12_浮动布局12.1_设置浮动12.2_清除浮动13_定位布局13.1_定位布局属性13.2_固定定位相对于屏幕fixed13.3_相对定位relative13.4_绝对定位相对于页面absolute1_CSS概要
1.1_CSS引入方式
1外部样式表 2内部样式表 3行内样式表 外部样式表 外部样式表是最理想的CSS引入方式。所谓的外部样式表指的是把CSS代码和HTML代码都单独放在不同文件中然后在HTML文档中使用link标签来引用CSS样式表。 link relstylesheet typetext/css href文件路径 / 内部样式表 内部样式表指的是把HTML代码和CSS代码放到同一个HTML文件中。其中CSS代码放在style标签内并且style标签是放在head标签内部的。 style typetext/css …… /style 行内样式表 行内样式表跟内部样式表类似也是把HTML代码和CSS代码放到同一个HTML文件。但是两者有着本质的区别内部样式表的CSS是在“style标签”内定义的而行内样式表的CSS是在“标签的style属性”中定义的。 外部样式表
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlelink relstylesheet typetext/css hrefcss/index.css /
/head
body
/body
/html内部样式表
!DOCTYPE html
html
headmeta charsetutf-8/title/titlestyle typetext/cssdiv{color:red;}/style
/head
bodydiv绿叶给你初恋般的感觉。/divdiv绿叶给你初恋般的感觉。/divdiv绿叶给你初恋般的感觉。/div
/body
/html行内样式表
!DOCTYPE html
html
headmeta charsetutf-8/title/title
/head
bodydiv stylecolor:red;绿叶给你初恋般的感觉。/divdiv stylecolor:red;绿叶给你初恋般的感觉。/divdiv stylecolor:red;绿叶给你初恋般的感觉。/div
/body
/html2_CSS选择器
5种选择器
3_字体样式
3.1_字体属性
表1 字体相关的CSS属性 属性说明font-family字体类型font-size字体大小font-weight字体粗细font-style字体风格color字体颜色
3.2_字体类型font-family
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/css#div1{font-family: Arial;} /*如果字体类型只有一个英文单词则不需要加上双引号*/#div2{font-family: Times New Roman;}#div3{font-family: 微软雅黑;}#div4{font-family:Arial,Verdana,Georgia;}/style
/head
bodydiv iddiv1Arial/divdiv iddiv2Times New Roman/divdiv iddiv3微软雅黑/divdiv iddiv4其实原因是这样的每个人的电脑装的字体都不一样有些字体有安装但也有些字体没有安装。p{font-family:Arial,Verdana,Georgia;}这一句的意思是p元素优先使用“Aria字体”来显示如果你的电脑没有装“Arial字体”那就接着考虑“Verdana字体”。如果你的电脑还是没有装“Verdana字体”那就接着考虑“Georgia字体”/div
/body
/html3.3_字体大小font-size
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/css#p1 {font-size: 10px;}#p2 {font-size: 15px;}#p3 {font-size: 20px;}/style
/head
bodyp idp1字体大小为10px/pp idp2字体大小为15px/pp idp3字体大小为20px/p
/body
/html3.4_字体粗细font-weight
font-weight属性取值有两种一种是“100~900的数值”另外一种是“关键字”。其中关键字取值如下表所示。
表1 font-weight属性取值 属性值说明normal正常默认值lighter较细bold较粗一般我们只会用到bold这一个属性值bolder很粗其实效果跟bold差不多
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/css#p1 {font-weight: 100;}#p2 {font-weight: 400;}#p3{font-weight:bold;}#p4{font-weight:bolder;}/style
/head
bodyp idp1字体粗细为:100lighter/pp idp2字体粗细为:400normal/pp idp3字体粗细为:700bold/pp idp4字体粗细为:900bolder/p
/body
/html3.5_字体颜色color
color属性取值有两种**一种是“关键字”、另外一种是“16进制RGB值”。**除了这两种其实还有RGBA、HSL等不过后面那几个都是属于CSS3的内容。
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/css#p1{color:gray;}#p2{color: #048C02;}/style
/head
bodyp idp1字体颜色为灰色/pp idp2#048C02/p
/body
/html3.6_总结
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/cssp{font-family:Arial,Verdana,Georgia;color:blue;font-size:14px;font-weight:bolder;}/style
/head
bodyp“有规划的人生叫蓝图没规划的人生叫拼图。/p
/body
/html4_文本样式
4.1_文本样式属性
表1 文本样式属性 属性说明text-indent首行缩进text-align水平对齐text-decoration文本修饰text-transform大小写转换line-height行高letter-spacing字母间距word-spacing词间距
4.2_首行缩进text-indent
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/cssp{font-size:14px;text-indent:28px;/*首行缩进28像素*/}/style
/head
bodyh3爱莲说/h3p水陆草木之花可爱者甚蕃。晋陶渊明独爱菊。自李唐来世人甚爱牡丹。予独爱莲之出淤泥而不染濯清涟而不妖中通外直不蔓不枝香远益清亭亭净植可远观而不可亵玩焉。/pp予谓菊花之隐逸者也牡丹花之富贵者也莲花之君子者也。噫菊之爱陶后鲜有闻莲之爱同予者何人? 牡丹之爱宜乎众矣。/p
/body
/html4.3_水平对齐text-align
表1 text-align属性取值 属性值说明left左对齐默认值center居中对齐right右对齐
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/css#p1{text-align:left;}#p2{text-align:center;}#p3{text-align:right;}/style
/head
bodyp idp1strong左对齐/strong:好好学习天天向上。/pp idp2strong居中对齐/strong:好好学习天天向上。/pp idp3strong右对齐/strong:好好学习天天向上。/p
/body
/html4.4_文本修饰划线text-decoration
表1 text-decoration属性取值 属性值说明none去除所有的划线效果默认值underline下划线line-through中划线overline顶划线
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/css#p1{text-decoration:underline;}#p2{text-decoration:line-through;}#p3{text-decoration:overline;}/style
/head
bodyp idp1这是“下划线”效果/pp idp2这是“删除线”效果/pp idp3这是“顶划线”效果/p
/body
/html4.5_大小写text-transform 在CSS中我们可以使用text-transform属性来将文本进行大小写转换。text-transform属性是针对英文而言因为中文不存在大小写之分。 表1 text-transform属性取值 属性值说明none无转换默认值uppercase转换为大写lowercase转换为小写capitalize只将每个英文单词首字母转换为大写
4.6_行高line-height line-height属性涉及的理论知识非常多也极其重要这一节只是简单接触一下。 !DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/css#p1{line-height:15px;}#p2{line-height:20px;}#p3{line-height:25px;}/style
/head
bodyp idp1水陆草木之花可爱者甚蕃。晋陶渊明独爱菊。自李唐来世人甚爱牡丹。予独爱莲之出淤泥而不染濯清涟而不妖中通外直不蔓不枝香远益清亭亭净植可远观而不可亵玩焉。/phr/p idp2水陆草木之花可爱者甚蕃。晋陶渊明独爱菊。自李唐来世人甚爱牡丹。予独爱莲之出淤泥而不染濯清涟而不妖中通外直不蔓不枝香远益清亭亭净植可远观而不可亵玩焉。/phr/p idp3水陆草木之花可爱者甚蕃。晋陶渊明独爱菊。自李唐来世人甚爱牡丹。予独爱莲之出淤泥而不染濯清涟而不妖中通外直不蔓不枝香远益清亭亭净植可远观而不可亵玩焉。/p
/body
/html4.7_间距letter-spacing、word-spacing 字间距 letter-spacing: 像素值; 词间距 word-spacing: 像素值; 字间距
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/css#p1{letter-spacing:0px;}#p2{letter-spacing:3px;}#p3{letter-spacing:5px;}/style
/head
bodyp idp1Rome wast built in a day.罗马不是一天建成的。/phr/p idp2Rome wast built in a day.罗马不是一天建成的。/phr/p idp3Rome wast built in a day.罗马不是一天建成的。/p
/body
/html词间距
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/css#p1{word-spacing:0px;}#p2{word-spacing:3px;}#p3{word-spacing:5px;}/style
/head
bodyp idp1Rome wast built in a day.罗马不是一天建成的。/phr/p idp2Rome wast built in a day.罗马不是一天建成的。/phr/p idp3Rome wast built in a day.罗马不是一天建成的。/p
/body
/html5_边框
5.1_边框的属性 想要为一个元素定义边框样式必须要同时设置border-width、border-style、border-color属性才会有效果。 表1 边框样式属性 属性说明border-width边框的宽度border-style边框的外观border-color边框的颜色
5.2_边框属性详细使用 border-width border-width属性用于定义边框的宽度取值是一个像素值。 border-style border-style属性用于定义边框的外观常用取值如下表所示。 表1 border-style属性取值 属性值说明none无样式dashed虚线solid实线除了上表列出这几个还有hidden、dotted、double等取值。不过其他取值几乎用不上可以直接忽略 border-color border-color属性用于定义边框的颜色取值可以是“关键字”或“16进制RGB值”。 简写形式
border: 1px solid red;5.3_局部样式 一个元素其实有4条边上、下、左、右上一节我们学习的是4条边的整体样式。那么如果想要对某一条边进行单独设置这该怎么实现呢 !DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/cssdiv{width: 100px; /*div元素宽为100px*/height: 60px; /*div元素高为60px*/border-top: 2px solid red; /*上边框样式*/border-right: 2px solid yellow; /*右边框样式*/border-bottom: 2px solid blue; /*下边框样式*/border-left: 2px solid green; /*左边框样式*/}/style
/head
bodydiv/div
/body
/html6_列表样式
6.1_列表项符号一般不使用此方法list-style-type 在CSS中不管是有序列表还是无序列表我们都是使用list-style-type属性来定义列表项符号。 语法 list-style-type: 取值; 表1去除列表项符号 属性值说明none无符号由于列表项符号比较丑因此在实际开发中大多数情况下我们都需要使用list-style-type:none;去掉。
表2 ol的list-style-type属性取值 属性值说明decimal阿拉伯数字1、2、3…默认值lower-roman小写罗马数字i、ii、iii…upper-roman大写罗马数字I、II、III…lower-alpha小写英文字母a、b、c…upper-alpha大写英文字母A、B、C…
表1 ul的list-style-type属性取值 属性值说明disc实心圆●默认值circle空心圆○square正方形■
6.2_列表项图片list-style-image 在CSS中我们可以使用list-style-image属性来定义列表项图片也就是使用图片来代替列表项符号。 语法 list-style-image: url(图片路径); !DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/cssul{list-style-image: url(img/leaf.png);}/style
/head
bodyulliHTML/liliCSS/liliJavaScript/li/ul
/body
/htmllist-style-image属性实际上就是把列表项符号改为一张图片而引用一张图片就要给出图片的路径。在真正的开发项目中一般情况下我们都不会用list-style-image属性来实现而是使用更为高级的iconfont图标技术来实现这个自行百度。 7_表格
7.1_表格标题位置 默认情况下表格标题是在表格的上方。如果想要把表格标题放在表格的下方应该怎么去实现呢 在CSS中我们可以使用caption-side属性来定义表格标题的位置。 语法 caption-side: 取值; 表1 caption-side属性取值 属性值说明top标题在顶部默认值bottom标题在底部
7.2_表格边框合并border-collapse 从前面的学习中可以知道表格加入边框后的页面效果中单元格之间是有一定空隙的。但是在实际开发中为了让表格更加美观我们都是要把单元格之间的空隙去除。 在CSS中我们可以使用border-collapse属性来去除单元格之间的空隙也就是将两条边框合并为一条。 语法 border-collapse: 取值; 表1 border-collapse属性取值 属性值说明separate边框分开有空隙默认值collapse边框合并无空隙
7.3_表格边框间距border-spacing 上一节介绍了如何去除表格边框间距但是在实际开发中有时候我们却需要定义一下表格边框的间距。 在CSS中我们可以使用border-spacing属性来定义表格边框间距。 语法 border-spacing: 像素值; !DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/csstable,th,td{border:1px solid silver;}table{border-spacing: 8px;}/**//style
/head
bodytablecaption表格标题/caption!--表头--theadtrth表头单元格1/thth表头单元格2/th/tr/thead!--表身--tbodytrtd表行单元格1/tdtd表行单元格2/td/tr/tbody!--表脚--tfoottrtd表行单元格5/tdtd表行单元格6/td/tr/tfoot/table
/body
/html8_图片样式
8.1_图片大小 语法 width: 像素值;height: 像素值; 8.2_图片边框border 语法 border: 1px solid red; 8.3_图片或文本对齐text-align 水平对齐 text-align属性一般只用于两个地方文本水平对齐和图片水平对齐。 语法 text-align: 取值; 很多人以为图片的水平对齐是在img元素中定义其实这是错的。图片是在父元素中进行水平对齐因此我们当然是在图片的父元素中定义啦。 表1 text-align属性取值 属性值说明left左对齐默认值center居中对齐right右对齐垂直对齐 语法 vertical-align: 取值; 表2 vertical-align属性取值 属性值说明top顶部对齐middle中部对齐baseline基线对齐bottom底部对齐
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/cssimg{ width: 60px; height: 60px; }#img1{ vertical-align: top; }#img2{ vertical-align: middle; }#img3{ vertical-align: bottom; }#img4{ vertical-align: baseline; }/style
/head
body绿叶学习网img idimg1 srcimg/girl.gif alt/绿叶学习网tophr/绿叶学习网img idimg2 srcimg/girl.gif alt/绿叶学习网middlehr/绿叶学习网img idimg3 srcimg/girl.gif alt/绿叶学习网bottomhr/绿叶学习网img idimg4 srcimg/girl.gif alt/绿叶学习网baseline
/body
/html8.4_文字环绕float 语法 float: 取值; 表1 float属性取值 属性值说明left元素向左浮动right元素向右浮动
9_背景样式
9.1_背景颜色和背景图片 在CSS中背景样式包括两个方面背景颜色和背景图片。 在CSS中定义“背景颜色”使用的是background-color属性而定义“背景图片”则比较复杂往往涉及以下属性。 表1 背景样式属性 属性说明background-image定义背景图片地址background-repeat定义背景图片重复例如横向重复、纵向重复background-position定义背景图片位置background-attachment定义背景图片固定
9.2_背景颜色background-color
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/cssdiv{width:100px;height:60px;}#div1{background-color: hotpink}/*关键字定义背景颜色*/#div2{background-color: #87CEFA;}/style
/head
bodydiv iddiv1背景颜色为hotpink/divdiv iddiv2背景颜色为#87CEFA/div
/body
/html9.3_背景图片样式background-image 语法 background-image: url(图片路径); !DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/cssdiv{width:250px;/*必须给出宽和高默认为0*/height:170px;background-image: url(img/haizei.png);}/style
/head
bodydiv/div
/body
/html9.4_背景图片重复background-repeat 语法 background-repeat: 取值; 表1 background-repeat属性取值 属性值说明repeat在水平方向和垂直方向上同时平铺默认值repeat-x只在水平方向x轴上平铺repeat-y只在垂直方向y轴上平铺no-repeat不平铺
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/cssdiv{width:200px;height:100px;border: 1px solid silver;background-image: url(img/flower.png);}#div2{background-repeat: repeat-x}#div3{background-repeat: repeat-y}#div4{background-repeat: no-repeat}/style
/head
bodydiv iddiv1/divdiv iddiv2/divdiv iddiv3/divdiv iddiv4/div
/body
/html9.5_背景图片位置background-position 在实际开发中background-position一般用于实现CSS Spirit精灵图片。 语法 background-position: 像素值/关键字; background-position属性常用取值有两种一种是“像素值”另外一种是“关键字”这里不考虑百分比取值。 像素值 语法 background-position: 水平距离 垂直距离; background-position属性设置的两个值是相对该元素的左上角来说的 关键字 表1 关键字属性值说明top left左上top center靠上居中top right右上center left居中靠左center center正中center right居中靠右bottom left左下bottom center靠下居中bottom right右下
9.6_背景图片固定background-attachment 在CSS中我们可以使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。 语法 background-attachment: 取值;表1 background-attachment属性取值 属性值说明scroll随元素一起滚动默认值fixed固定不动
10_伪类鼠标状态
10.1_四个伪类
表1 超链接伪类
伪类说明a:link定义a元素未访问时的样式a:visited定义a元素访问后的样式a:hover定义鼠标经过a元素时的样式只用记这个a:active定义鼠标点击激活时的样式
10.2_深入了解:hover 语法 元素:hover{…} !DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/cssdiv{width:100px;height:30px;line-height:30px;text-align:center;color:white;background-color: lightskyblue;}div:hover/*鼠标经过时背景颜色改变*/{background-color: hotpink;}/style
/head
bodydiv绿叶学习网/div
/body
/html10.3_鼠标样式 浏览器鼠标样式 语法 cursor: 取值; !DOCTYPE html
html
headmeta charsetutf-8 /style typetext/cssdiv{width:100px;height:30px;line-height:30px;text-align:center;background-color: hotpink;color:white;font-size:14px;cursor:default;}div:hover{cursor:pointer;}/*定义鼠标经过时变为手状*//style
/head
bodydiv鼠标样式/div
/body
/html自定义鼠标样式 语法 cursor: url(图片地址), 属性值; 这个“图片地址”是鼠标图片地址其中鼠标图片后缀名一般都是.cur我们可以使用Photoshop来制作小伙伴们自行搜索一下制作方法。 而这个“属性值”一般为3种default、pointer和text。 !DOCTYPE html
html
headmeta charsetutf-8 /style typetext/cssdiv{width:100px;height:30px;line-height:30px;text-align:center;background-color: hotpink;color:white;font-size:14px;}#div_default{cursor:url(img/cursor/default.cur),default;}#div_pointer{cursor:url(img/cursor/pointer.cur),pointer;}/style
/head
bodydiv iddiv_default鼠标默认样式/divdiv iddiv_pointer鼠标手状样式/div
/body
/html11_盒子模型 浏览器审查元素 浏览器提供的控制台功能非常强大远不止这一个功能。使用浏览器控制台辅助开发这是前端开发必备的一项基础技能。 11.1_盒子模型组成部分
表1 盒子模型组成部分 属性说明content内容可以是文本或图片padding内边距用于定义内容与边框之间的距离margin外边距用于定义当前元素与其他元素之间的距离border边框用于定义元素的边框在这个例子中display:inline-block表示将元素转换为行内块元素即inline-block其中inline-block元素的宽度是由内容区撑起来的。我们之所以在这个例子中将元素转换为inline-block元素也是为了让元素的宽度由内容区撑起来以便更好地观察。 11.2_宽高width、height 语法 width: 像素值; height: 像素值; 只有块元素才可以设置width和height行内元素是无法设置width和height的。我们这里不考虑inline-block元素 11.3_内边距padding 语法 padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/cssdiv{display:inline-block; /*将块元素转换为inline-block元素*/padding-top:20px;padding-right:40px;padding-bottom:60px;padding-left:80px;border:2px solid red;background-color:#FFDEAD;}/style
/head
bodydiv绿叶学习网/div
/body
/html简写形式 padding: 像素值;/*表示4个方向的内边距都是20px。*/
padding: 像素值1 像素值2;/*表示padding-top和padding-bottom为像素值1padding-right和padding-left为像素值2。*/
padding: 像素值1 像素值2 像素值3 像素值4;/*表示padding-top为像素值1padding-right为像素值2padding-bottom为像素值3padding-left为像素值4。*/11.4_外边距margin 外边距指的是两个盒子之间的距离它可能是子元素与父元素之间的距离也可能是兄弟元素之间的距离。 语法 margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;举例只有父元素没有兄弟元素时
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/css#father{display: inline-block; /*将块元素转换为inline-block元素*/border:1px solid blue;}#son{display:inline-block; /*将块元素转换为inline-block元素*/padding:20px;margin-top:20px;margin-right:40px;margin-bottom:60px;margin-left:80px;border:1px solid red;background-color:#FFDEAD;}/style
/head
bodydiv idfatherdiv idson绿叶学习网/div/div
/body
/html举例有兄弟元素时
!DOCTYPE html
html
headmeta charsetutf-8 /title/titlestyle typetext/css#father{display: inline-block; /*将块元素转换为inline-block元素*/border:1px solid blue;}#son{display:inline-block; /*将块元素转换为inline-block元素*/padding:20px;margin-top:20px;margin-right:40px;margin-bottom:60px;margin-left:80px;border:1px solid red;background-color:#FFDEAD;}.brother{height:50px;background-color:lightskyblue;}/style
/head
bodydiv idfatherdiv classbrother/divdiv idson绿叶学习网/divdiv classbrother/div/div
/body
/html12_浮动布局
12.1_设置浮动 语法 float: 取值; 表1 float属性取值 属性值说明left元素向左浮动right元素向右浮动
12.2_清除浮动 语法 clear: 取值; clear属性取值 属性值说明left清除左浮动right清除右浮动both同时清除左浮动和右浮动
13_定位布局
13.1_定位布局属性
表1 position属性取值属性值说明fixed固定定位relative相对定位absolute绝对定位static静态定位默认值
13.2_固定定位相对于屏幕fixed 语法 position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;说明 position:fixed;是结合top、bottom、left和right这4个属性一起使用的。其中position:fixed使得元素成为固定定位元素接着使用top、bottom、left和right这4个属性来设置元素相对于屏幕的位置。 top、bottom、left和right这4个属性不一定全部都用到一般只会用到其中两个。注意这4个值的参考对象是浏览器的4条边。 13.3_相对定位relative 语法 position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;说明 注意在默认情况下固定定位元素的位置是相对浏览器而言而相对定位元素的位置是相对于原始位置而言 13.4_绝对定位相对于页面absolute 一个元素变成了绝对定位元素这个元素就完全脱离文档流了绝对定位元素的前面或后面的元素会认为这个元素并不存在此时这个元素浮于其他元素上面已经完全独立出来了。 语法 position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;
