设计稿样式还原的一些问题

由于不同浏览器内核渲染机制的不同，所以在pc端显示样式正常，在不同的手机浏览器上可能会出现有一定偏差的展示效果，浏览器渲染的原理后面可以仔细研究一下，下面总结下这次样式修改涉及到的知识点总结。很多地方其实以前有用到过，但是发现写代码的时候还是不熟练，需要查资料才能确定，今天一起再复习下。

单行文本超出一行显示...

`overflow`	释义
`hidden`	超出容器后的内容被隐藏
`visible`	超出容器后的内容仍显示
`scroll`	浏览器显示滚动条，无论是否溢出
`auto`	只有内容溢出时才会显示滚动条
`overlay`	只有内容溢出时才会显示滚动条，滚动条绘制在内容上，不会占用空间，仅在基于 `webkit` 和 `blink` 的浏览器中受支持

`white-space`	释义
`normal`	换行符合并，空格合并，文字换行
`nowrap`	换行符合并，空格合并，文字不换行
`pre`	换行符保留，空白符保留，文字不换行
`pre-wrap`	换行符保留，空白符保留，文字换行
`pre-line`	换行符保留，空白符合并，文字换行
`break-spaces`	换行符/空白符被保留，文字换行

`text-overflow`	释义
`clip`	内容极限处截断文本
`ellipsis`	省略号显示被截断的文本
`@string`	某个字符串显示被截断的文本，浏览器未支持

多行文本超出显示...

只有基于wekit内核的浏览器才支持

.style {
  display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
  -webkit-box-orient: vertical; //设置甚多盒对象的子元素排列方式
  -webkit-line-clap: 2; //把块容器中的内容限制为指定的行号
  overflow: hidden;
}

1px边框

使用时需要将父元素设置为position: relative，right: -100%就是将该元素在右边方向上延展一个父元素的宽度。一下是包裹类的，如果设置1px的左边框，仅设置border-left，然后设置transform: scaleX(.333)和transform-origin: left 0;，不需要设置bottom和right去撑开元素

.1px:before {
  content: ' ';
  position: adsulote;
  border: 1PX solid color;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius; x;
  @media only screen and (min-resolution: 2dppx) {
    right: -100%;
    bottom :-100%;
    transfrom: scale(0.5, 0.5);
    transfrom-origin: left top;
    border-radius: x * 2
  }
  @media only screen and (min-resolution: 3dppx) {
      right: -200%;
      bottom: -200%;
      transform: scale(.333, .333);
      transform-origin: left top;
      border-radius: $radius * 3;
    }
}

居中问题

垂直居中vertical-align 用来指定行内元素inline和表格单元格table-cell的垂直对齐方式，对于块级元素不生效，需要设置父级元素display:table-cell

`vertical-align`	释义
`top`	使元素及其后代元素的顶部与整行的顶部对齐
`bottom`	使元素及其后代元素的底部与整行的底部对齐
`middle`	使元素的中部与父元素的基线加上父元素x-height的一半对齐。
`baseline`	使元素的基线与父元素的基线对齐
`sub`	使元素的基线与父元素的下标基线对齐
`super`	使元素的基线与父元素的上标基线对齐
`text-top`	使元素的顶部与父元素的字体顶部对齐
`text-bottom`	使元素的底部与父元素的字体底部对齐

伪元素结合vertical-align实现垂直居中

.cssName::before{
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  content: ' ';
}

单行文本垂直居中 line-height = height
box实现垂直居中

.vt {
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

flex实现垂直居中

.vt {
 display: flex;
  justify-content: center;
  align-items: center;
}

transform实现垂直居中

.parent {
  position: relative;
}
.children {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

负margin实现垂直居中

.parent {
  height: mpx;
  position: relative;
 }
.child {
  height: npx;
  position: absolute;
  top: 50%;
  margin-top: -(m - n) / 2px;
}

清除浮动

如何创建一个BFC	方法
根元素	`html`
浮动	`display`不为`none`
绝对定位	`position`为`absolute`或`fixed`
`overflow`	不为`visible`
`display`	`inline-block`,`table`,`table-row`,`table-cell`,`table-caption` ,`flow-root`
`contain`	`content`, `layout`, `paint`
弹性元素	`display`为`flex`或`inline-flex`的直接子元素
网格元素	`display`为`grid`或`inline-grid`的直接子元素
多列容器	元素的`column-count`或`column-width`不为`auto`

作用

BFC是就像一道屏障，隔离出了BFC内部和外部，内部和外部区域的渲染相互之间不影响。实现自适应两栏布局
BFC的区域不会和外部浮动盒子的外边距区域发生叠加，BFC内部的margin会叠加
BFC在计算高度的时候，内部浮动元素的高度也要计算在内。解决浮动元素父元素高度塌陷

伪元素清除浮动

.clearfix::after{
  display: block;
  content: '';
  clear: both;
}
.clearfix {
  *zoom: 1;
}

clear属性：要被清除的相关浮动元素指的是在相同块级格式化上下文 block_formatting_context中的前置浮动，因此只能用在after伪类上