定位+body

140 阅读3分钟

简介伪类:

1,hover鼠标移上去的时候/link未访问的链接/visited访问以后的链接/active点击链接的时候

同时用在a标签上的顺序:link》visited》hover》active( l v  好 a)

注意事项:hover可以用在所有标签里面,用法:div:hover/div:hover p

伪类和伪元素的区别:伪类为一个冒号:,伪元素为双冒号::(新的伪元素以及伪类出来没有被所有浏览器介绍的时候用的都是双号::)

*2,定位:

定位的目的:将元素挪到想要的地方,网页应用常见

定位的分类:静态position:none/相对定位:relative/绝对定位absolute/固定定位fixed

定位属性:left/right/top/bottom

相对定位:相对的是自己原来的位置,半脱离文档流:看起来浮动了,但还占着之前的位置,不会改变标签的属性类型,主要作用是给绝对定位当爹(子绝父相)

绝对定位:相对的是已经定位的父级,所有定位都行,如果已定位的父级,就相对body,绝对定位后完全脱离文档流,不保留原先位置,标签类型被改变为类似于行类块,主要用途:网页中小图片,小图标,运动图标等

固定定位:相对的是浏览器窗口的可视区,定位后完全脱离文档流,标签类型改变为类似于行类块,主要用于浏览器中位置不变的的广告,弹窗等,窗口滚动但位置不改变

3.层级:

z-index:

正常值为0,想要提高从1开始.-1就是比普通层级还要低

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释:元素可拥有负的 z-index 属性值。

注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

4,常见的网页布局格式:

01.定宽布局:两侧空白,文档居中布局:margin:o auto;例如:.win{ width:1200px; margin:0 auto; }

02.两列布局:定义一列的宽度,绝对定位top/left=0,另一列用marginleft推开,例如: #left{ width: 200px; background: red; height: 100%; position: absolute; left: 0; top: 0; } 

 #right{ background: blue; height: 100%; margin-left: 200px; }

 body{ height: 100%; }

 html{ height: 100%; }

03.文本的上下左右居中:text-align:center+line-height:块的高度

04.块的上下左右居中:先绝对定位x/y轴50%,然后再左上浮动各自宽高度的一半例如: position:absolute top:50%; left:50% 

 margin-left:-物体宽度的一半 margin-top:-物体高度的一半

05.图片的居中:给图片加上vertical-align:middle

内涵属性:top/middle/bottom默认/baseline基线

5,overflow以及display的使用方法

01.overflow:溢出隐藏

属性值:默认visible溢出后可见/scroll滚轮,滚动可见/anto自动/hidden溢出隐藏

scroll和anto的区别:如果内容能装下anto不会显示滚轮标志

02.display:改变标签类型/隐藏显示

改变标签类型属性值:block变成块/lnline行内标签/lnline-block行内块

隐藏显示属性值:none隐藏/block显示

*display和visibility hidden的区别

01.共同点;两个都可以隐藏

02.区别:display:none:隐藏后不占位置

visibi hidden:隐藏后还是占据着位置

6,单行文本溢出和%的使用

单行文本溢出:overflow:hidden/text-overflow:ellipsis