4.CSS基础
4.1css的介绍
层叠样式表(英文全称:Cascading Style Sheets),是一种对web文档添加样式的简单机制，属于表现层的布局语言.
4.2css基础语法
CSS语法由两部分组成：选择符、声明。 声明包括：属性和属性值 选择符 {属性: 属性值 ;属性:属性值} div{width:500px;} div----->选择符 with---->属性 500px--->属性值 width:500px---->声明
4.3语法说明
每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值； 属性必须放在花括号中，属性与属性值用冒号连接。 每条声明用分号结束。 当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。 在书写样式过程中，空格、换行等操作不影响属性显示。 例如：div{ width:200px;height:200px;background:red; }
4.4 样式的建立
4.4.1内部样式(嵌套到页面中)
语法 <style type="text/css"> css语句 </style> 注：使用style标记创建样式时，最好将该标记写在<head></head>中; <head> <meta charset="UTF-8"> <title>index2</title> <style type="text/css"> div{ width: 100px; height: 200px; background-color: red; } </style> </head> ***此样式会给当前页面body中的所有div添加属性***
4.4.2外部样式(使用最多)
a:外部样式表的创建 b:外部样式表的导入 首先在css文件夹中创建.css文件 在css文件中写样式 div{ width:100px; height: 100px; background-color: blueviolet; } 语法： <link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" /> <head> <meta charset="UTF-8"> <title>index2</title> <link type="text/css" rel="stylesheet" href="css/index2.css" /> </head> 说明： 使用link元素导入外部样式表时，需将该元素写在文 档头部，即<head>与</head>之间。 rel：用于定义文档关联，表示关联样式表； type：定义文档类型；
4.4.3内联样式(表行间样式,行内样式,嵌入式样式)(用的很少)
优先级 最高 高于外部的样式的优先级 语法：<标签 style=“属性：属性值;属性:属性值;”></标签> 例如：<div style="width:100px;height:100px;"></div>
4.5样式表的优先级
以后使用的时候尽量使用一种样式,避免优先级问题 内联样式表的优先级别最高 内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高
4.6css选择符(选择器)
为了找到要修改样式的标签,所以采用选择器 选择符的定义 选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素. 常用的选择符有十种左右 类型选择符，id选择符，class选择符，通配符，群组选择符，包含选择符，伪类选择符，伪对象选择符。
4.6.1元素选择符/类型选择符（element选择器)
语法：元素名称{属性：属性值；} 例如:css文件中的div{ width:100px; height: 100px; background-color: blueviolet; } ----这种选择符会找到当前页面所有的div,并且给其添加属性---- 类型选择符是根据html语言中的标记来直接定义 说明： a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p,img,strong,span......等。 b)所有的页面元素都可以作为选择符; 用法：如果想改变某个元素得默认样式时，可以使用类型选择符； 用法： （1）如果想改变某个元素的默认样式时，可以使用类型选择符；（如：改变一个p段落样式） （2）当统一文档某个元素的显示效果时，可以使用类型选择符；（如：改变文档所有p段落样式） 案例：搭色块
4.6.2id选择器
语法：#id名{属性：属性值;}---->在css文件中 说明： 1、当我们使用id选择符时，应该为每个元素定义一个id属性； 如：<div id="top"></div> 2、id选择符的语法格式是“#”加上自定义的id名； 如：#box{width:300px; height:300px;} 3、起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字) 4、一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素 对象。 5、最大的用处：创建网页的外围结构
4.6.3class选择器
语法：.class名{属性：属性值;}---->在css中书写 .top{ background-color: blue; } 说明： 当我们使用类选择符时，应先为每个元素定义一个类名称， 类选择符的语法格式是："如：<div class="top"></div>" 用法：class选择符更适合定义一类样式；
4.6.4伪类选择器(经常给a标签使用)
a:link {color: red;} /* 未访问的链接状态 */ a:visited {color: green;} /* 已访问的链接状态 */ a:hover {color: blue;} /* 鼠标滑过链接状态 */ a:active {color: yellow;} /* 鼠标按下去时的状态 */ 上述4个都要写,并且写的顺序是固定的要与上述一致,写在css中 <a href="https://www.baidu.com/">百度一下</a> 说明： 1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为： a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效； 2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中； 例如：a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变化颜色。
4.6.5群组选择器
语法：选择符1，选择符2，选择符3......{属性：属性值;} 说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。 实例：.top, #nav, p{width:100px;} a, .b1, p { color: red }
4.6.7包含选择器
语法：选择符1(父) 选择符2（子）{属性：属性值;} 说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2; 实例： div ul li{height:200px;}
4.6.8通配符
语法：*{属性：属性值；} 说明：通配选择符的写法是“*”，其含义就是所有元素。 用法：常用来重置样式。 *{ margin: 0; padding: 0; }
4.6.9选择符的权重(判断谁先生效)
css中用四位数字表示权重，权重的表达方式如：0，0，0，0 类型选择符的权重为0001 a p div span form .... 1 class选择符的权重为0010 .class 10 id选择符的权重为0100 # 100 子选择符的权重为0000 属性选择符的权重为0010 伪类选择符的权重为0010 伪元素选择符的权重为0010 包含选择符的权重：为包含选择符的权重之和 内联样式的权重为1000 继承样式的权重为0000 注：如果权重相同时，则执行后写的样式； 当不同选择符的样式设置有冲突的时候，高权重选择 符的样式会覆盖低权重选择符的样式。 例如：b .demo的权重是1+10=11 .demo的权重是10 所以经常会发生.demo的样式失效 *相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。 （注意：是css样式中定义该选择符的先后，而不是html中使用先后）
4.7css的注释
css的注释 /*---------------注释内容--------------*/
4.8核心属性和浮动
4.8.1css属性组成和作用
属性：属性值 1）每个css样式都必须由两部分组成：选择符（Selector）和声明（Decleration） 注：声明又包括属性（Properyt）和属性值（Value） 2）css属性：属性是指定选择符具有的属性，他是css的核心，css2共有150多个属性； 3）css属性值：属性值包括法定属性值和常规的数值加单位。 div{width:400px;}
4.8.2文本字体属性
文本大小：{font-size:12px/14px/16px;} 说明： 1）属性值为数值型时，必须给属性值加单位，属性值为0时除外。 2）单位还可以是1em , 默认情况下：1em=16px,0.75em=12px; 3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em. 补充： PPI是图像分辨率的单位，图像ppi值越高，画面的细节就越丰富，因为单位面积的像素数量更多。PPI也叫图像的采样率（在图像中，每英寸所包含的像素数目）。 px是像素单位，em是相对单位
a.字体大小
em:表示元素字体高度，em值是根据父元素值(本节点没有设置字体大小)来确定；
如：font-size:12px;line-height:2em(行高为字号的两倍); 则行高为24px；
b.字体类型
{font-family:字体1,字体2,;}
说明：
*当字体1不存在使用字体2,当字体1存在时只是用字体1
*当字体名称是中文字体时需加引号；如"微软雅黑"
*当英文字体中有空格时需加引号： 如“Times New Roman”；
Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.
c.文本颜色
{color:颜色值;}
1、用十六进制表示颜色值： 16进制颜色代码指定颜色的组成方式：前两位表示红色，中间两位表示绿色，最后两位表示蓝色。把三个数值依次并列起来 ，以#开头 0 1 2 3 4 5 6 7 8 9 A B C D E F 颜色模式：光色模式 FF 00 00（红 绿 蓝）;
写法：#faf7fc；
如果两位两位一样的可以简写:--#1122ff--->#12f
2、RGB 例如：color:#F00;
3、 color:rgba(0,255,255,0.6 ) 透明度(a代表的是透明度0--1)
d.字体加粗
{ font-weight:bolder/bold/normal/100-900 ;} {font-weight: 900;} 说明： bolder(更粗的)/bold（加粗）/normal（常规） 1）在css规范中把字体的粗细分为9个等级，分别从100-900，其中100对应最轻的字体变形，而900对应最重的字体变形。 100-500常规字体 600-900加粗字体
e.字体倾斜
{ font-style：italic/oblique/normal;}
说明：
取值为：italic/oblique/normal italic和oblique都表示倾斜，不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显。
f.检索或设置对象中的文本的大小写
{text-transform:none/capitalize/uppercase/lowercase}
说明：
text-transform这个属性有3个值分别为；
text-transform: uppercase 把文字变成全大写
text-transform: lowercase 把文字变成全小写
text-transform: capitalize 变成首字母大写
g.文本对齐方式
水平对齐方式{text-align:left/right/center;}
垂直对齐方式{vertical-align:top/bottom/middle;}
h.文本行高
{line-height:normal/数值;}-->垂直方向对齐使用文本行高
说明：
当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；
当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；
当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位。（IE6及以下版本存在浏览器兼容问题）
i.文本修饰
text-decoration:none/underline/overline/line-through/blink
说明：
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
blink：闪烁--->谷歌浏览器不支持
j.首行缩进
首行缩进：{text-indent:value;}-->只对第一行起作用
说明： text-indent可以取负值； text-indent属性只对第一行起作用
k.字间距
{letter-spacing:value;}--->单词字母和汉字的间距控制
说明：控制英文字母或汉字的字距
l.词间距
word-spacing:value;
说明：控制英文单词词距
m.垂直对齐方式
{vertical-align:top/bottom/middle;}
说明：当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐； line-height=height
图文排列中常用； 此属性无法单独使用，需要支持的条件
扩展：如何让一个图片垂直居中的几个条件
1、必须给容器加一个text-align:center;
2、必须给当前元素转成行内快级元素（display:table-cell）在给当前元素加上vertical-align:middle;
4.8.3css列表属性(list)
a.定义列表符号样式
{list-style-type： }
说明：取值： disc(实心圆) circle(空心圆) square(实心方块) none(去掉列表符号)；
b.使用图片作为列表符号
{list-style-image:url(图像路径)； }
说明：url(所使用图片的路径及全称)
c.定义列表符号的位置
{list-style-position: ；}
说明：取值： outside(外边) inside(里边)；
d.简写方法
{list-style: ； }
说明：
可简写直接设置列表属性值； 常用属性： list-style:none;去掉列表样式；
4.8.4css边框属性(border)
语法：{border: ； } 说明：(属性1,属性2,属性3)的顺序可以调换 属性1：边框样式 border-style:solid/dashed/dotted/double border-style的值 solid:实线， dashed:虚线， dotted:点状线， double:双线， none/0(去掉边框) groove:槽边 ridge:岭边 inset:凹边 outset:凸边 hidden:无边框 -------------------------------------------------- 属性2: 边框厚度 bosrder-width：取值； 属性3：边框颜色 border-color:取值； 单独设置某个方向的边框属性： border-top：上边框 border-bottom:下边框 border-left:左边框 border-right:右边框 例如： border-top-style: 取值； border-top-width：取值； border-top-color:取值； 扩展: 同时设置4个边框 border:solid 4px #FF0000; 单独设置下边框 border-bottom:double 6px #000000; 设置右边无边框 border:dotted 3px #0000FF border-right:none; 设置上、下无边框 border：dashed 5px #666666； border-width：0 5px；
4.8.5css背景图属性(background)
a.背景颜色
语法：选择符{background-color:颜色值;} (常用)
简写：background:color值;(不常用因background后有很多属性)
b.背景图片的设置
语法：background-image:url(背景图片的路径及全称)；
说明：
网页上有两种图片形式：插入图片、背景图； 插入图片：属于网页内容，也就是结构。
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。
背景图片的显示原则
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
4）加载背景图必须有容器区域；
c.背景图片平铺
语法：选择符 {background-repeat:no-repeat/repeat/ repeat-x/repeat-y }
no-repeat:不平铺
repeat：平铺 (默认)
repeat-x：横向平铺
background-size: 800px 500px;后面数值为div的尺寸,对片进行拉伸或者压缩(常用的)
d.背景图片的位置
语法：选择符{background-position：水平方向属性值 垂直方向属性性;}---->首先要{background-repeat:no-repeat}
水平方向值：left/center/right或数值
垂直方向值： top/center/bottom或数值
说明：
水平向右 垂直向下移动 是正数值
水平向左 垂直向上移动 是负数值
两个值： 第一个值表示水平位置的值，
第二个值表示垂直的位置。 *例如：当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。
e.各属性的缩写
语法：选择符{background：属性值1 属性值2 属性值3;}
背景缩写： {background:#00ff00 url（背景图片的路径及全称） no-repeat center top；}
f.网页上常用的图片格式(压缩图片)
1)jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )
2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;
4.8.6 css浮动属性(经常用)
float:定义网页中其它文本如何环绕该元素显示
{float:left/right/none}---(写在css文件中) 有三个取值： left:元素活动浮动在文本左面 right:元素浮动在右面 none:默认值，不浮动。 浮动产生负作用 1、背景不能显示 由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。 2、边框不能撑开 如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。 3、margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
clear：清除浮动 none：允许两边都可以有浮动对象 both：清除两边浮动 left：清除左边浮动 right:清除右边浮动 注：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动框是脱离了普通的文档流 清除浮动的几种方法 1、clear:both清除浮动 2、父级添加overflow:hidden;缺点：父级这个盒子不能放其他元素 3、万能清除浮动 .clearfix:after{ conten:""; display:block; height:0; clear:both; } .clearfix{ zoom:1; } zoom:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。
4.8.7文本属性
容器溢出
{overflow: visible/hidden/scroll}
visible:默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
文本溢出
{text-overflow: clip / ellipsis;}
取值：
clip：不显示省略号（...），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；
省略号设置
text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；（px、%，都可以）
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;
注：必须是单行文本才能设置本文溢出！！！
4.9css盒模型
4.9.1盒模型的概念
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。
4.9.2padding属性
Padding是设定页面中一个元素内容到元素的边框之间的距离。 也称补白
用法： 1）用来调整内容(子元素)在容器（父元素）中的位置关系 2）用来调整子元素在父元素中的位置关系。 注：padding属性需要添加在父元素上。 3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉添加的padding值大小。 Padding属性值的四种方式(钟面原则--->上开始顺时针) 四个值：上 右 下 左 {padding:10px 20px 30px 40px;} 三个值：上 左右 下 {padding:10px 20px 30px ;} 二个值：上下 左右 {padding:10px 20px ;} 一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/ 可单独设置某一方向填充 上方向padding-top:10px; 右方向pahdding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px; 注意：padding值不允许是负值 padding区域在border与content之间；背景色和背景图像会覆盖padding和content组成的区域；
4.9.3margin外边界
边界：margin,在元素外边的空白区域，被称为边距
margin的使用方法 属性值的4种方式： 四个值：上 右 下 左 {margin:10px 2px 4px 3px ;} 三个值：上 左右 下 {margin:2px 4px 6px;} 二个值：上下 左右 {margin:2px 4px;} 一个值： 四个方向 {margin:2px;} 可单独设置某一方向填充 上方向margin-top:10px; 右方向margin-right:10px; 下方向margin-bottom:10px; 左方向margin-left:10px;
4.9.4border边框
border的使用方法： 复合写法：border:边框宽度 边框风格 边框颜色; 例如：border:5px solid #f00; 网页中很多修饰性线条都是由边框来实现的。 边框三类属性： 边框宽度：border-width: 边框颜色：border-color: 边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)/none; * 可单独设置一方向边框， 盒模型：Border的设置 1、 border:dashed/solid/dotted/double（默认的边框宽度为中等(大约3px和4px之间)，默认的颜色为文字的颜色） 2、 border-width:10px;(设置一个值时：四方向) 3、 border-width:5px 10px(设置两个时：第一个值的是上下、第二个值是左右) 4、 border-width:4px 10px 20px(设置三个值时：第一个值上，第二个值是左右，第三个指下；) 5、 border-width:10px 5px 7px 8px ;（分别设置四个方向的边框宽度；）
4.10盒子大小计算
盒子实际占有宽度区域=margin-left + border-left + padding-left+width+padding-right+border-right+margin-right --------------------------------------------------- 盒子实际占有高度的区域=margin-top + border-top + padding-top + height + padding-bottom+ border-bottom + margin-bottom
4.11怪异盒模型
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素
content-box
这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box
为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
举例
盒模型尺寸基准有两种，分别是默认的content-box和border-box
默认情况下我们代码中元素的是以content-box作为标准的盒子
content-box和border-box的主要区别是二者的盒子的宽度是否包含元素的边框和内边距。
html
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
css
.box{width:100px;height:100px;background:red;border:5px solid yellow;padding:10px}
#box1{box-sizing:content-box}
#box2{box-sizing:border-box}
4.12元素类型
4.12.1元素的分类
根据css显示分类，XHTML元素被分为 三种类型:块状元素，内联元素，可变元素
4.12.2块状元素特点
a、块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域， B:默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。 C:块状元素都可以定义自己的宽度和高度。 D:块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。
4.12.3内联元素（inline element）（或是行内元素）
内联元素三大特点： A:内联元素的表现形式是始终以行内逐个进行显示； B:内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度和宽度来确定，它的只能根据所包含内容的高度最小内容单元也会呈现矩形形状； C:内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(padding-top:;margin-top/bottom:;)
4.12.4常见的块级元素、内联元素
块级元素: div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - 段落 ul - 无序列表 内联元素： a –超链接（锚点） br - 换行 i - 斜体 em - 强调 label - 表单标签 span - 常用内联容器，定义文本内区块 strong - 粗体强调 textarea - 多行文本输入框 select - 项目选择 --行内块元素-- img - 图片 input - 输入框 display-inline-block
4.13元素的分类
元素类型的转换
需要根据上下文关系确定该元素是块元素或者内联元素。
盒子模型可通过display属性来改变默认的显示类型
display属性和属性值(18个属性值)
属性值：block/inline/inline-block/none
作用：该属性设置或检索对象元素应该生成的盒模型的类型
各属性值的作用：
1)block块状、显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。(将元素转为块状元素，使该元素拥有块状元素的特点；)
2)inline内联、显示：在元素后面删除换行符，多个元素可以在一行内并列显示。（元素转换为内联元素）
3)inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。（只有这一个元素类型支持vertical-align属性）img,input(行内块元素)。
4)none 此元素不会被显示。
基本类型
A、大部分块元素display属性值默认为block
B、大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block（行内块元素）。
4.14定位
4.14.1position定位属性
position：检索对象的定位方式
各属性值的作用：
static：默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
absolute：相对于父级元素的绝对定位，浮出、脱离文档流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，若父级都没有定位，则以html（根元素）可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。。(层叠的顺序z-index:value)
relative：是相对于默认位置的偏移定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流】
fixed：相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。
4.14.2元素定位
初始状态
绝对定位
相对定位
4.14.3绝对定位和相对定位的区别
1、参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
4.14.4 包含块的概念及应用
包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
4.14.5定位元素层叠属性
z-index : auto |number
检索或设置对象的层叠顺序。 auto：默认值。 number:无单位的整数值。可为负数 没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；
说明：
1）较大 数值的对象会覆盖在较小 数值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。 此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。
4.14.6让一个元素始终在窗口水平、垂直位置居中
1、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
2、div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}
4.14.7命名锚点链接应用
定义： 是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
应用：
命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：
1)给元素定义命名锚记名 语法：<标记 id="命名锚记名"> </标记>
2)命名锚记连接 语法：<a href="#命名锚记名称"></a>
4.14.8滚动条应用
Overflow内容溢出时的设置
属性：
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的属性值： visible、scroll、hidden、auto、
visible 默认值，其中的内容无论是否超出范围都将被显示。
hidden 效果与visible相反。任何超出“width”和“height”的内容都会隐藏。
scroll 无论内容是否超越范围，都将显示滚动条。
auto 当内容超出范围时，显示滚动条，否则不显示。
应用:
1）没有水平滚动条: <div style="overflow-x:hidden">test</div>
2）没有垂直滚动条 <div style="overflow-y:hidden">test</div>
3）没有滚动条 <div style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</div>
4）自动显示滚动条 <div style="height:100px;width:100px;overflow:auto;">test</div>
1334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
