一、BFC:块级格式化上下文
一个元素如果具备了BFC的条件,那么这个元素会形成一个独立的渲染区域,内部元素的渲染不会影响外界
- 触发方式
1、overflow
2、padding
3、float
4、position:fixed/absolute
5、display:flex/grid
6、根目录html标签是BFC
- 作用:
1、防止magin重叠,即在同一个BFC内两个相邻的盒子会出现外边距塌陷的问题,我们可以让这两个div分别位于两个不同的BFC中,则可以有效的避免外边距塌陷的问题;
2、清除内部浮动,BFC可以包裹浮动元素,所以可以清除浮动;
3、阻止元素被浮动元素覆盖,即一个没有浮动一个有浮动;
4、使用BFC实现左侧盒子定宽,右侧盒子自适应布局;
二、万能清除法:先起一个类名加上:after,把这个放在最后一个有浮动的地方添加上这个类即可;
.clear::after{
display: block;
content: "";
clear: both;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
三、透明
- 透明整个标签:opacity
两种写法:非IE==opacity 取值为0-1;
IE==filter:alpha(opacity=50) 取值为0-100,其中0为透明颜色;
- 透明的颜色:rgba、transparent(透明边框)
四、如何隐藏一个元素
1、opacity: 0;
2、visibility: hidden;
3、width: 0;height: 0;overflow: hidden;
4、transform: scale(0);
5、display:none
注意:其中1和2是占据位置的,剩余是不占位置的;
五、置换元素
所有的行内块标签都是可置换标签,其余标签都是不可置换
六、如何取消图片下面的三像素
1、浮动;
2、变块级;
3、中线对齐,图片默认的是基线对齐;
七、三角形
宽高为0、边框透明、一个方向边框给颜色
.a{
width:0;
height: 0;
border-top: solid 20px red;
border-bottom: solid 20px blue;
border-left: solid 20px yellow;
border-right: solid 20px pink;
}
实现效果:
所以给不想要有颜色的地方透明颜色即可:
.a{
width:0;
height: 0;
border: solid 20px transparent;
border-right: solid 20px pink;
}
八、1像素的边框或者0.5的线如何实现
1、缩放
2、阴影:不占位置
.b{
width: 100px;
height: 100px;
background: pink;
margin: 100px auto;
position: relative;
}
.b::after{
content:"";
box-sizing: border-box;
/* 给定位,父相子绝 */
position: absolute;
left: 0;
bottom: 0;
/* 可以给一个层级,避免无法上来 */
z-index: 9;
/* 给边框宽,高可以随便给,只要能放得下边框的宽度即可 */
width: 100%;
height: 2px;
border-bottom: 1px solid red;
/* 沿Y轴进行缩放 */
transform: scaleY(0.5);
/* 注意修改原点 */
transform-origin: left bottom;
}