CSS基础-塌陷及定位

简介: clear:right; 右侧不允许有浮动元素

父级边框塌陷的问题

  • clear:right; 右侧不允许有浮动元素
  • clear:left; 左侧不允许有浮动元素
  • clear:both; 两侧不允许有浮动元素
  • clear:none;
  • 解决方案: 1.增加父级元素高度

2.增加一个空的div标签,消除浮动

div{
clear:both;
margin:0;
padding 0;
}

3.在父级元素中增加一个 overflow:hidden;

4.父类添加一个伪类:after

#father:after{
content:'';
display:block;
clear:both;
}

小结:

  • 浮动元素后面增加空的div 简单,代码中尽量避免空的div
  • 设置父元素的高度 简单,元素假设有了固定的高度,就会被限制
  • overflow 简单,下拉的一些场景避免使用
  • 父类添加一个伪类:after(推荐) 写法稍微复杂一点,但是没有副作用,推荐使用

对比

  • display 方向不可以控制
  • floa 浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷问题

定位

相对定位

相对定位:possition:relative; 相对原来的位置,进行指定的偏移,相对定位的话,它依然在标准文档流中,原来的位置会被保留

top:-20px;
left:20px;
bottom:-10px;
ringht:20px;

网络异常,图片无法展示
|

绝对定位

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

网络异常,图片无法展示
|

定位:基于xxx定位,上下左右

1.没有父级元素定位的前提下,相对于浏览器定位

2.假设父级元素存在定位,我们通常会相对于父级元素进行偏移

3.在父级元素范围内移动,相对于父级或者浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留

固定定位fiex

possition:flxed;

被固定定位的div盒子会随着屏幕上下移动

z-index

z-index:默认是0,最高无限-999

网络异常,图片无法展示
|

相关文章
|
2月前
|
前端开发 容器
《CSS 简易速速上手小册》第2章:CSS 布局与定位(2024 最新版)
《CSS 简易速速上手小册》第2章:CSS 布局与定位(2024 最新版)
34 2
|
2月前
|
前端开发
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
|
18天前
|
前端开发
css实用技巧——给锚点定位添加偏移
css实用技巧——给锚点定位添加偏移
18 3
|
21天前
|
前端开发 开发者
CSS属性选择器:精确定位元素的利器
CSS属性选择器:精确定位元素的利器
18 4
|
28天前
|
前端开发 编译器
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
|
8天前
|
前端开发 索引 Python
技术心得:xpath、CSS定位方法
技术心得:xpath、CSS定位方法
|
11天前
|
前端开发 容器
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
9 0
|
1月前
|
前端开发 定位技术 开发者
CSS基础-定位:static, relative, absolute, fixed
【6月更文挑战第10天】本文探讨了CSS四种定位方式:static、relative、absolute和fixed,强调理解它们的差异对前端开发者的重要性。static遵循正常文档流,relative通过偏移量调整位置但不脱离文档流,absolute完全脱离文档流并依附于最近的非static祖先元素,fixed则相对于浏览器窗口固定。文章列举了常见问题及避免策略,并提供了实战代码示例以直观展示四种定位的效果。掌握这些定位技术能提升布局效率和页面设计质量。
|
24天前
|
移动开发 前端开发 HTML5
CSS3 定位
CSS3 定位
|
1月前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
24 0