第十七章 BFC、置换元素、三角形、0.5像素的线/1像素边框、透明、万能清除法、隐藏元素

一、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;
        }