为什么需要定位

总结一下吧~本章对我的收获巨大希望对你也是到此CSS基础部分也算是全部更新完成了后门进入进阶部分~

1.能够说出为什么要用定位

定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置并且可以压住其他盒子。

1.2

值语义static静态定位relative相对定位absolute绝对定位fixed固定定位

边偏移

边偏移属性示例描述toptop:80px顶端偏移量定义元素相对于其父元素上边线的距离bottombottom:80px底部偏移量定义元素相对于其父元素下边线的距离leftleft:80px左侧偏移量定义元素相对于其父元素左边线的距离rightright:80px右侧偏移量定义元素相对于其父元素右边线的距离

1.3

它是相对于自己原来的位置来移动的移动位置的时候参照点是自己原来的位置。

因此相对定位并没有脱标。

它最典型的应用是给绝对定位当爹的。

。

。

1.5

如果祖先元素有定位相对、绝对、固定定位则以最近一级的有定位祖先元素为参考点移动位置。

绝对定位

这个“子绝父相”太重要了是我们学习定位的口诀是定位中最常用的一种方式这句话的意思是

为了让蓝盒子飘起来而且只能再粉色盒子内移动那么蓝色盒子就只能以粉色盒子为定位进行移动那么蓝色盒子就是一个绝对定位(absolution)

那么粉色盒子就必须也要拥有定位因为蓝色盒子以粉色盒子为标准。

又为了不让绿色盒子会占用粉色盒子的位置那么粉色盒子就只能是相对定位(relative)因为只有这样粉色盒子原来的位置才不会被占用还是属于粉色盒子自己的位置。

子级绝对定位不会占有位置可以放到父盒子里面的任何一个地方不会影响其他的兄弟盒子。

子绝父绝

固定定位也是脱标的其实固定定位也可以看做是一种特殊的绝对定位。

固定定位小技巧

定位模式是否脱标移动位置是否常用static静态定位否不能使用边偏移很少relative相对定位否(占有位置)相对自身位置移动常用absolute绝对定位是(不占有位置)带有定位的父级常用fixed固定定位是(不占有位置)浏览器可视区常用sticky粘性定位否(占有位置)浏览器可视区很少用

一定记住

块级元素添加绝对或者固定定位如果不给宽度或者高度默认大小是内容的大小。

绝对定位固定定位会完全压住盒子

浮动元素不同只会压住它下面标准流的盒子但是不会压住下面标准流盒子里面的文字图片

浮动之所以不会压住文字因为浮动产生的目的最初是为了做文字环绕效果的。

文字会围绕浮动元素

initial-scale1.0titleDocument/titlestyle*

{padding:

15px;border-bottom-right-radius:

15px;}.next

15px;border-bottom-left-radius:

15px;}.promo-nav

classselected/lili/lili/lili/lili/li/ul/div

/body/html

一个完整的网页是标准流、浮动、定位一起完成布局的每个都有自己的专门用法。

标准流

定位最大的特点是有层叠的概念就是可以让多个盒子前后叠压来显示。

类似网站广告当我们点击关闭就不见了但是我们重新刷新页面会重新出现

让一个元素在页面中隐藏或者显示出来

属性值描述visible不剪切内容也不添加滚动条hidden不显示超过对象尺寸的内容超出的部分隐藏掉scroll不管超出的内容总是显示滚动条auto超出自动显示滚动条不超出不显示滚动条

一般情况下我们都不想让溢出的内容显示出来因为溢出的部分会影响布局。

请慎用overflow:hidden

initial-scale1.0titleDocument/titlestyle.tudou

{position:

总结一下吧~本章对我的收获巨大希望对你也是到此CSS基础部分也算是全部更新完成了后门进入进阶部分~