CSS定位

来源:http://www.chinese-glasses.com 作者:Web前端 人气:76 发布时间:2020-04-29
摘要:2、浮动定位 10、相对定位:position:relative;相对原位置通过偏移属性进行移动; 取值:0~1 越小越透明 3、透明度:opacity:取值0~1; display:none和visibility:hidden的区别:display隐藏,

2、浮动定位

10、相对定位:position:relative;相对原位置通过偏移属性进行移动;

取值:0~1 越小越透明

3、透明度:opacity:取值0~1;

display:none和visibility:hidden的区别 :display隐藏,脱离文档流,不占据页面空间,visibility不脱离文档流,占据页面空间

5、光标:cursor:取值:default/pointer(小手)/crosshair(+)/text(I)/wait(等待)/help(?);

偏移属性

8、偏移属性:top/bottom/left/right;

5、固定定位

7、定位:position:取值:static(默认,静态)/relative(相对)/absolute(绝对)/fixed(固定);

3、显示

11、绝对定位:position:absolute;相对离它最近已定位(相对/绝对/固定)祖先元素进行定位,脱离文档流,不占据页面空间,变为块级元素,margin:auto失效;

cursor:

6、列表属性:①列表项标志:list-style-type:取值:none/disc/circle/square;②列表项图像:list-style-image:url();③列表项位置:list-style-position:取值:outside(列表项标志位于内容区域外)/inside(列表项标志位于内区域前);

语法:position:relative;必须配合偏移属性使用

1、显示方式:display:取值:none(隐藏,不占页面空间,脱离文档流)/block(元素变为块级)/inline(元素变为行内)/inline-block(元素变为行内块);

特点:

9、堆叠层级:z-index:取值:无单位数字;(* ①只有相对,绝对,固定定位时可用;②父子关系无法调整,子始终在父上);

(6)help:问号

10bet 110bet 2

d、文本,行内元素,行内块元素是不会被浮动元素压在下方。而是巧妙的避开了所有浮动元素,围绕者浮动元素显示

4、垂直对齐方式:vartical-align:baseline(默认,基线对齐)/top/middle/bottom;

(1)default:箭头

2、显示效果:visibility:取值:visible(默认,显示)/hidden(隐藏,占据页面空间,未脱离文档流)/collapse(用于表格,动态删除一行或一列);

(1)table标签中,控制文字的垂直对齐,取值:top/middle/bottom

12、固定定位:position:fixed;目标固定于页面,脱离文档流;

(3)相对于body实现位置的偏移

1、定位的属性

(1)固定定位脱离文档流,不占页面空间

5、光标

(2)relative:相对定位

语法:

使用场合:

1、每个元素都在页面有自己的空间

页面中元素的默认定位方式,默认文档流,从上往下,从左往右

4、在父元素中追加一个空的块级元素,并设置clear:both

opacity

2、每个元素都是从父元素的左上角开始显示

3、透明度

(5)table:让元素的表现形式和table一样,特点:尺寸以内容为准,每个元素独占一行,允许修改尺寸

visibility

元素在页面中的显示表现形式(块级,行内,行内块)

3、块级元素都是按照从上到下的方式逐行排列,每个元素独占一行

取值

clear:left/right/both

2、显示效果

position:

left:100px 向由移100px

(3)text:I

时间: 2019-09-17阅读: 174标签: 定位一、什么是定位

(4)fixed:固定定位

z-index

(5)wait:沙漏或者转圈

10bet,绝对定位的元素会脱离默认文档流,后面元素会向前补位,绝对定位的元素会相对于离他最近的已定位的祖先元素去实现定位,如果所有祖先元素不是已经定位元素,相对于body去实现定位

三、普通流定位

vertical-align

top/bottom/right/left

(1)、元素一旦浮动,就脱离文档流了,不占据页面空间,后面会上前补位

b、元素一旦浮动,如果没有定义宽度,宽度会以内容为准

f、高度坍塌,块级元素的高度如果不设置,高度以内部元素内容为准,但是如果内部元素都是浮动元素,浮动元素不占据页面空间,父元素的高没有了

使用场合:作为绝对定位的祖先元素

四、浮动定位

4、固定定位

(1)none:隐藏,不显示元素,不占据位置

取值:

本文由10bet发布于Web前端,转载请注明出处:CSS定位

关键词:

频道精选

最火资讯