css定位

定位的扩展

1.绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中,但是可以通过以下计算方法实现水平和垂直居中

1)left:50%;上盒子的左侧移动到父级元素的水平中心位置

2)margin-left: 100px;让盒子向左移动自身宽度的一半

2.定位的特殊性

绝对定位和固定定位也和浮动类似

1)行内元素添加绝对或者固定定位,可以直接设置宽度和高度

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

3.脱标的盒子不会触发外边距塌陷

浮动元素,绝对定位(固定定位)元素的都不会触发外边合并的问题

4.绝对定位或者固定定位会完全压住盒子

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

但是绝对定位和固定定位会压住下面标准流所有的内容

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

注意:如果两个定位元素重叠,没有指定z-index,最后在HTML代码中的元素将被显示在最前面

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • <!DOCTYPE html> test .test1 { ...
    金色888阅读 708评论 0 0
  • 来源于视频教程: https://www.bilibili.com/video/BV14J4114768?p=23...
    那时青荷_e26a阅读 1,360评论 0 0
  • 2020-09-13 学习目标 能够说出为什么要用定位 能够说出定位的4种分类 能够说出4种定位各自的特点 能够写...
    皮皮章阅读 2,325评论 0 0
  • 昨天晚上进行了测试,真是一塌糊涂。戒骄戒躁,不惧前行。加油! 学了定位总结:子绝父相 ,万事不行,...
    黑云阅读 1,792评论 0 1
  • 学习目标 理解能说出为什么要用定位能说出定位的 4 种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局...
    jovelin阅读 5,544评论 0 0

友情链接更多精彩内容