目录
浮动和定位都可以将行内元素转换为块元素
当在同一个元素中同时使用浮动和定位时，会有以下两种情况：(尽量不要这么做)
1.当定位为absolute或fixed时，float会失效
2.若定位不是absolute和fixed时，两个同时起作用，则float的优先级更高。
浮动元素父类塌陷
当所有的子元素都浮动（脱标）时，父元素若没有设置高度，高度会为0；
小知识:用定位子绝父相,实现这种页面,也会出现父元素高度塌陷,没有css直接办法
如果你真的想实现绝对定位还能撑开父元素，只能通过JavaScript实现：获取到绝对定位的子元素的高度，再设置给父元素。
方法1：给父元素设置高度
不推荐理由：不能把高度固定死，不适合做自适应的效果。
方法2：父元素添加浮动
不推荐
理由：会影响后面的元素布局。
方法3：添加overflow：hidden(溢出隐藏）
添加overflow：hidden之后，父盒子会拥有BFC属性。（暂不解释）
不推荐
优点：简单
缺点：内容比较多的时候，容易造成内容被隐藏。
方法4：设置父盒子为行内块
不推荐
理由：会影响后面的元素布局。
行内块（可以和其他行内，行内块元素并排使用）
也可以将浮动的父元素转为块。此时父元素如果不设会没有宽高
方法5 专门清除浮动的属性：
clear （不推荐）
clear:both 不允许左侧和右侧有浮动效果。
clear本质：清理元素（拥有clear属性的元素）的顶部添加足够多的外边距，使清理元素的顶部边缘下降到浮动元素的下面。
不足：
1.浮动元素的父类仍然没有高度，父类塌陷没有解决。
2.清理元素的margin-top会失效，其他三个方向仍然有效。
方法6：设置空标签添加clear：both
优点：简单方便，解决了父类塌陷
缺点：会添加一个无意义的空标签，有违结构与表现的分离。在以后的维护过程中会十分麻烦。
不推荐使用。
方法7：使用伪元素清除浮动(推荐使用)
伪元素介绍
css的伪元素，是指他们不是真正的页面元素。html中并没有对应的结构，但是其用法与表现，行为与真正的页面元素一样。
：before
格式：
选择器::before
在标签内部的前面添加内容
：after
格式：
选择器::after
在标签内部的后面添加内容
设置伪元素，content是必须添加的。
添加的内容是默认为行内元素的。
用伪元素插入背景图片,基础
<style>
.son:before {
content: "";
display: block;
width: 300px;
height: 200px;
background-image: url(./weitu.jpeg);
background-size: 100% 100%;
}
.son {
width: 300px;
height: 200px;
color: teal;
}
</style>
<body>
<div class="son">使用伪元素插入图片使用伪元素插入图片使用伪元素插入图片
使用伪元素插入图片使用伪元素插入图片使用伪元素插入图片</div>
</body>
上面例子,背景图片没有在文字下面,需要调整如下
<style>
.son::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 300px;
height: 200px;
background-image: url(./weitu.jpeg);
background-size: 100% 100%;
}
.son {
width: 270px;
height: 200px;
color: #fff;
}
</style>
<body>
<div class="son">使用伪元素插入图片使用伪元素插入图片使用伪元素插入图片
使用伪元素插入图片使用伪元素插入图片使用伪元素插入图片</div>
</body>
这里的定位参考的父元素是浏览器,如果需要美观实用,用一个div包裹son的元素
然后给父元素设置相对定位
<div class="father"> <div class="son"></div> </div>
定位
- css定位
属性最常用的三种：绝对定位，相对定位和固定定位。
position 属性用于指定一个元素在文档中的定位方式。
position:
relative 相对定位
absolute 绝对定位
fixed 固定定位
top
right
bottom
left
偏移量，决定了元素的最终位置。
相对定位relative
让元素相对于自己原来的位置，进行位置调整。
margin和相对定位的区别：
1.概念
margin：用来表示盒子之间的间距。
相对定位：相对于自己原来的位置，进行位置调整。
2.影响
用相对定位只会影响当前元素本身的位置，不会对相邻元素的位置产生影响。
用margin除了会影响当前元素本身的位置，还会对相邻元素的位置产生影响。
相对定位不会脱标。原来的位置不会被其他元素占有。
相对定位的用途：
1.微调位置。
2.做绝对定位的参考系。（子绝父相）
绝对定位absolute
绝对定位会脱标。
position：absolute
会定义一个坐标系，按照坐标系进行位移。
设置绝对定位时，一定要设置偏移量。
使用top描述，是从参考系的顶部计算位置。
使用right描述，是从参考系的右边计算位置
使用bottom描述，是从参考系的底部计算位置。
使用left描述，是从参考系的左边计算位置。
绝对定位的盒子会寻找最近的定位祖先元素，并以它为参考系。
1.最近的祖先元素，不一定非是父元素。
2.不一定是相对定位，也可以绝对定位等。只要包含定位信息。
一般情况下都是设置子绝父相。
父盒子设置相对定位（零偏移），子盒子设置绝对定位。
粘性定位sticky
1.粘性定位不脱标。
2.与fixed（固定）不同，left等属性不是设置位置的。
3.left right等属性与浏览器的最小边界值。
解释:不脱离文档流,当滚动到这个位置时就一直距离浏览器顶部100px
固定定位fixed
固定定位
相对于浏览器窗口进行定位。无论页面如何滚动，盒子的位置不变。
固定定位会脱标。
position:fixed；
用途：
1.网页小广告
2.返回顶部
3.顶部导航
书写顶部导航条时，底部内容会被固定导航条遮盖。可以在body标签中，添加padding-top 高度为顶部导航条的高度即可。
静态定位static(不常用)
position ：static
静态定位/常规定位/自然定位
作用：使元素定位于常规流/自然流中
特点：
忽视top、bottom、left、right、z-index，是这些关键字作用失效
案例:
<style>
.box{
height: 100px;
width: 100px;
border: 2px solid;
text-align: center;
line-height: 100px;
position: relative;
top: 10px;
}
</style>
<body>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</body>
效果:每一个div都偏移10px
.box:nth-child(2){
position: static;
border-color: red;
}
加上这个属性后:第二个盒子就回到了原来的位置
去除鼠标事件
pointer-events: none
pointer-events: none;理解：你可以看的到某个元素，但是你无法摸的着，点击不到，点击会穿透触发到下层的元素
display：none; 是你摸不着，但是你也看不见。
最简单的使用场景是：给某个box1盒子设置样式和内容，然后定位遮住在另一个box2上，点击box1会触发点击box2的事件。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
