社交网站建设内容,做网站用到的工具,wordpress 水印 七牛,如何进入优容网站#x1f353;个人主页#xff1a;bit.. #x1f352;系列专栏#xff1a;Linux(Ubuntu)入门必看 C语言刷题 数据结构与算法 HTML和CSS3 目录 1.1为什么需要定位#xff1f;
1.2定位组成
1.3静态定位static#xff08;了解#xff09;
1.4相对定位 relative … 个人主页bit.. 系列专栏Linux(Ubuntu)入门必看 C语言刷题 数据结构与算法 HTML和CSS3 目录 1.1为什么需要定位
1.2定位组成
1.3静态定位static了解
1.4相对定位 relative 重要
1.5绝对定位 absolute重要
1.6子绝父相的由来
1.7 固定定位 fixed 重要
1.8 粘性定位 sticky 了解
1.9 定位模式的总结
1.10 定位叠放次序 z-index
1.11 定位的拓展
1.绝对定位的盒子居中
2.定位特殊特性
3.脱标的盒子不会触发外边距塌陷
4.绝对定位固定定位会完全压住盒子 1.1为什么需要定位 以上右侧几个盒子随着页面的滚动他们始终不发生变化。标准流或浮动都快速实现此时需要定位来实现。
所以
浮动可以让多个会计盒子一行没有缝隙排列显示经常用于横向排列盒子。定位则是可以让多个盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置并且可以压住其他盒子。
1.2定位组成
定位将盒子定在某一位置所以定位也是在摆放盒子按照定位的方式移动盒子。
定位 定位模式 边偏移
定位模式用于指定一个元素在文档中的定位方式。
边偏移决定了该元素的最终位置。
1.定位模式
定位模式决定元素的定位方式它是通过CSS的position 属性来设置的其值可以分为四个
值语义static静态定位relative相对定位absolute绝对定位fixed固定定位2.边偏移
边偏移就是定位的盒子移动到最终位置有 top bottom left 和right 4个属性。
边偏移属性示例描述toptop: 80px顶端偏移量定义元素相对于其父元素上边线的距离bottombottom80px底部偏移量定义元素相对于其父元素下边线的距离leftleft: 80px左侧偏移量定义元素相对于父元素左边线的距离rightright80px右侧偏移量定义元素相对于其夫元素右变现的距离
1.3静态定位static了解
静态定位是元素的默认定位方式无定位的意思。
语法 选择器 { position static;} 静态定位是按照标准流特性摆放位置他没有边偏移。静态定位在布局时很少用到
1.4相对定位 relative 重要 相对定位是元素在移动的时候相对于他原来的位置来说的自恋型。
语法 选择器 { position: relative; } 相对定位的特点务必记住
他是相对于自己原来的位置来移动的移动的时候参照点是自己原来的位置原来在表中流的位置继续占有后面的盒子任然以标准流的方式对待它。不脱标继续保留原来的位置因此相对定位并没有脱标他最典型的应用是给决定位当爹的...
1.5绝对定位 absolute重要
绝对定位是元素在移动位置的时候是相对于它祖先元素来说的拼爹型
语法 选择器 { positionabsolute; } 绝对定位的特点务必记住
如果没有祖先元素或者祖先元素没有定位则以浏览器为标准定位Document 文档如果祖先元素有定位相对绝对固定定位则以最近一级的有定位祖先元素为参考点移动位置。绝对定位不在具有原先的位置。脱标
1.6子绝父相的由来
弄清楚这个口诀就明白了绝对定位和相对定位的使用场景
这个“子绝父相” 很重要是我们学习定位的口诀是定位中最常用的一种方式这句话的意思是子级是绝对定位的话父级要用相对定位。
子级绝对定位不会占有位置可以放到父盒子里面的任何一个地方不会影响其他的兄弟盒子父盒子需要添加定位限制子盒子放在父盒子内显示 父盒子布局时需要占位置因为父亲只能是相对定位
这就是子绝父相的由来所以相对定位经常用来作为绝对定位的父级。
总结因为父级元素需要占有位置因此是相对定位子盒子不需要占有位置则是绝对定位当然子绝父相不是永远不变的如果父元素不需要占有位置子绝父绝也会遇到。
1.7 固定定位 fixed 重要
固定定位是元素固定于浏览器可视区域的位置。主要场景可以在浏览器页面滚动时元素的位置不会发生改变。 语法 选择器 { positionfixed; } 固定定位的特点务必记住
以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系不随着滚动条的滚动 固定定位不在占有原先的位置。固定定位也是脱标的其实固定定位也可以看做是一种特殊的绝对定位。固定定位的小技巧固定在版心右侧位置。
小算法
让固定定位的盒子的盒子 left50%走到浏览器可视区也可以看作版心的一般位置让固定定位的盒子 margin-left版心宽度的一般距离多走版心宽度的一般位置。
1.8 粘性定位 sticky 了解
粘性定位可以被认为是相对定位和固定定位的混合。sticky 粘性的
语法 选择器 { positionsticky; top: 10px; } 粘性定位的特点
以浏览器的可视窗口为参照点移动元素固定定位的特点粘性定位是占有原来的位置相对定位特点必须添加top left right bottom 其中一个才有效
跟页面滚动搭配使用。兼容性较差IE不支持。
1.9 定位模式的总结
定位模式是否脱标移动位置是否常用static 静态定位否不能使用边偏移很少relative 相对定位否 占有位置相对于自身位置移动常用absolute 绝对定位是 不占有位置带有定位的父级常用fixed 固定定位是 不占有位置浏览器可视区常用sticky 粘性定位否 占有位置浏览器可视区当前阶段较少
1.10 定位叠放次序 z-index
在使用定位布局时可能会出现盒子重叠的情况此时可以使用 z-index 来控制盒子的前后次序z轴
语法 选择器 { z-index1;} 数值可以是整数负整数或0默认是auto数值越大盒子越靠上如果属性值相同则按照书写的顺序后来者居上数字后面不能加单位只有定位的盒子才有 z-index属性
1.11 定位的拓展
1.绝对定位的盒子居中
加了绝对定位的盒子不能通过margin: 0 auto; 水平居中但是可以通过一下的计算方法实现水平居中和垂直居中。
left: 50%; 让盒子的左侧移动到父级元素的水平中心位置。margin-left100px; 让盒子相左侧移动自身宽度的一半。
2.定位特殊特性
绝对定位和固定定位也和浮动类似。
行内元素添加绝对或者固定定位可以直接设置高度和宽度。块级元素添加绝对或者固定定位如果不给宽度或者高度默认大小是内容的大小。
3.脱标的盒子不会触发外边距塌陷
浮动元素绝对定位固定定位元素的都不会出发外边距合并的问题。
4.绝对定位固定定位会完全压住盒子
浮动元素不会只会压住它下面的标准流的盒子但是不会压住下面标准流盒子里面的文字图片
但是绝对定位固定定位会压住下面标准流所有的内容。
浮动之所以不会压住文字因为浮动产生的目的最初是为了做文字环绕的效果。文字会围绕浮动元素
