浮动与定位

浮动

在子元素浮动且父元素不设高度的情况下，子元素无法撑起父元素高度，这叫高度塌陷，所以我们需要清楚浮动

清除浮动

给父元素设定高度

这个基本不用

clear清除浮动

给后一个元素添加clear:both
首先讲缺点：导致margin失效。为什么不能给前一个元素添加呢，因为前一个元素的子元素都已经脱离标准流，不能撑起父元素。
中间添加空盒子设定clear(隔墙法)
中间的空盒子清除了上面的盒子浮动影响，也可以使下面的标准流盒子生效。
缺点：第一个盒子仍处于高度塌陷状态
在第一个元素内添加空盒子，这个空盒子清除浮动这种方法可以使得这个空盒子不受浮动影响，进入标准流，并撑起父盒子高度，使得父盒子没有高度塌陷，而第二个盒子margin自然也会有效

BFC清除浮动

BFC的两个特性：可以包含浮动(不会坍塌)，不会影响文档流(解决垂直边距折叠)
触发BFC的条件：

float设置为left或right
overflow设置为hidden,scroll,auto
display: inline-block, table-cell,flex,table-caption
position: absolute, fixed

伪元素清除浮动

clear这个属性，指的是不允许某一侧出现浮动，从而使自身往下撑开父级
用伪元素(需display转化为块级元素，因为默认是行内元素)并clearboth，双伪元素和单伪元素还没明白区别.
这个其实就是在元素最后加一个撑开父级元素盒子的清除浮动的空块级盒子，适用于有父级盒子，里面子盒子有一个浮动，有一个不浮动，由于最后一个空盒子清除浮动，而浮动盒子为空盒子前一个，空盒子清除浮动，自动掉下，撑开盒子。

.clearfix::before,
        .clearfix::after {
            display: table; /*因为伪元素默认为内联样式，所以需要添加display*/
            content: "";
        }
        .claerfix::after {
            clear: both;
        }

BFC

BFC,又叫块级格式上下文，指一块独立的容器，有自己固定的规则，不受外界的影响。

特点

垂直方向上，从上往下排列，与文档流一致。
BFC上下相邻的盒子margin会重叠
BFC盒子的高度需将浮动元素计算在内，也就是说BFC不会有高度塌陷的问题
BFC区域不会和浮动的元素重叠
盒子内的元素左margin与BFC盒子左border重叠
容器内元素不影响外界元素

作用

解决margin重叠问题(两个BFC)
解决浮动导致高度塌陷问题
创建两栏布局

创建方式

根元素body
float除none外的值
display:flex, table-cell, inline-block, table-caption
position: absolute, fixed
overflow: hidden, scroll, auto

margin合并问题

两个块级元素下外边距和上外边距会合并取绝对值较大者(一正一负则相减)，注意，只会发生在垂直方向上，浮动元素、绝对定位、固定定位由于脱离文档流，不会产生这个问题。
父子元素的margin合并，父元素创建BFC即可，兄弟元素的margin合并，则需两个元素都为BFC。

position的属性

absolute: 相对于position值为static以外的父元素进行定位，默认为相对body
static: 默认值
relative: 相对于自身原来位置
fixed：相对于视窗
inherit：继承父元素position
sticky：依赖于用户滚动，超出可视距离则转化为fixed, 否则为relative

场景应用

画三角形

首先理解一下border属性，如果给一个长宽为50的盒子设置border:100px,其结构如图

等于说每条边都是由两边的border作为直角边组合成的，而且每次都是由中心的点发出开始计算,以三角形最上面那个点为基点，判断斜边是哪两个border组成

例子

画上三角形

            border-bottom: 100px solid #000;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;

画右三角形

            border-bottom: 100px solid #000;
           border-right: 100px solid transparent;

画扇形

一个圆截取四分之一

            border-top: 100px solid transparent;
           border-bottom: 100px solid #000;
           border-right: 100px solid transparent;
           border-left: 100px solid transparent;
           border-radius: 100px;

宽高自适应的正方形

利用vw

 .b {
    width: 10%;
    height: 10vw;
    background-color: tomato;
}

利用margin/padding百分比依据父元素width

 .b {
    width: 10%;
    padding-top: 10%;
    background-color: tomato;
}

利用伪元素和margin/padding百分比撑开盒子*

 .b {
    width: 10%;
    overflow: hidden;
    background-color: tomato;
}
.b::after {
   content: '';
   display: block;
   margin-top: 100%;
}

画0.5px的线

transform:scale

 .b {
    width: 100%;
    height: 1px;
    transform: scale(0.5, 0.5);
    background-color: tomato;
}

meta viewport

只在移动端生效

<meta name="viewport" content="width=device-width, initial-scale=0.5">

1px问题

由于逻辑像素的出现，即设备像素比为2的屏幕将2x2像素当作一个像素使用，使得我们设置1px的时候会变粗，因此我们可以通过伪元素加transform方式解决(还没搞懂为什么要用伪元素)

.scale-1px{
  position: relative;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  /*核心是利用transform缩放边框*/
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

CSS八股笔记自用2