2017_7_18定位、锚点、overflow

定位 锚点

1定位

position:static/relative/absolute/fixed;

1.1静态定位static

1.1.1在标准流中的默认定位就是static；

1.1.2静态定位是不能通过left,right,top,bottom进行移动的。

1.2相对定位relative

1.2.1相对定位是根据自己原本的位置进行定位的；

1.2.2相对定位不能脱离标准流（灵魂出窍，灵魂移动，身体还在）；

1.2.3相对定位是可以通过left,right,top,bottom进行移动，如果是正值，则是以left right top bottom这四条边为标准，向元素内部移动（如right:40px;是指以右边为标准，向左内部移动40px）；

1.3绝对定位absolute

1.3.1绝对定位是相对html或者有定位的父级（或祖辈，会一级级往外找）进行定位，不包括static的定位，但包括relative的定位。right left top bottom是相对于父级的左边，右边，上边，下边的距离

1.3.2绝对定位的元素脱离标准流。

1.4固定定位fixed

1.4.1固定定位是根据浏览器可视窗口进行定位的；

14.2固定定位脱离标准流。

心得

项目开发中常用到“子绝父相”：子元素定位到父元素的某个位置，子元素用absolute，父元素用relative。

如何让父盒子中的子盒子在父盒子中居中显示？

1.子绝父相；

2.让子盒子的left设置为50%；

3.让子盒子的margin-left为负值，数值为自盒子大小的一半。

2锚点

<a href=”#id”>，href属性值：#+id名，中间没有空格，跳转到该页面id值所在位置；

<a href=”url#id”>，href属性值：页面路径#+id名，中间没有空格，跳转到其他页面id名所在位置。

3层级

通过z-index控制层级，只能用在有定位的元素上；z-index属性值可以为负值。

4overflow文本溢出时的处理

overflow: visible可见（默认）/hidder隐藏/scroll出现滚动条（不论溢出与否）/auto溢出时出现滚动条

overflow-x:hidden;

overflow-y:scroll;

再对图片、文本进行overflow操作时，overflow只能给最近的盒子设置，不然会出现各种问题。

 

行内元素如a标签，float后 会变成行内块级元素，可设置宽高。