一些常见的CSS问题盒子模型内容区（content）填充（padding）边框（border）空白边（margi

盒子模型

内容区（content）

填充（padding）

边框（border）

空白边（margin）

响应式布局

1、单位

根据不同屏幕设定好根元素的font-size，使用了rem单位的元素就会自适应显示相应的尺寸。比如html的font-size为12px，那么这个2rem的元素font-size就是24px

  html {font-size: 16px;}
  h1 { font-size: 2rem; } /* 2 × 16px = 32px */
  p { font-size: 1.5rem;} /* 1.5 × 16px = 24px */
  div {width: 20rem;} /* 20 * 16px = 320px*/

对 viewport 设置可以对网页的展示进行有效的控制，视口单位中，1vw 等于视口宽度的1% ，1vh 等于视口高度的1% ，比如对于iphone6/7，375*667的分辨率，100px/375**100 = 26.666vw

rem + vw

<style>
  html{
    font-size: 26.666vw;
  }
  .container{
    width: 2rem;   /* 200px */
    height: 4rem;  /* 400px */
    background: red
  }
</style>
<body>
  <div class=container></div>
</body>

2、媒体查询

针对不同媒体类型，可以定制不同的样式规则，比如视窗的宽高、设备的朝向、分辨率等

1、all ：用于所有多媒体类型设备

2、print ：用于打印机

3、screen ：用于电脑屏幕，平板，智能手机等

4、speech ：用于屏幕阅读器

<style>
body{
    background-color:#fff;
}
<!-- 在屏幕可视窗口尺寸大于 600 像素时变色 -->
@media screen and (min-width: 600px){
    body{
        background: #000;
    }
}
</style>

设置居中的方法

1、display: table

<style>
  .wrapper {
    display: table;
    width: 100px;
    height: 100px;
    background: pink;
  }
  .cell {
    display: table-cell;
    vertical-align: middle;
  }
  .box {
    margin: auto;
    width: 10px;
    height: 10px;
    background: skyblue
  }
</style>

<body>
  <div class="wrapper">
    <div class="cell">
      <div class="box"></div>
    </div>
  </div>
  </body>

2、display: flex

  display: flex;
  justify-content: center;
  align-items: center;

3、margin: auto;

position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;

4、transform：translate(-50%,-50%)

position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;

BFC

BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响；
可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题；

1、触发条件

float: left / right
position: absolute / fixed
overflow: auto / scroll / hidden
display: inline-block / table-caption / table-cell
根元素

2、主要特性

属于同一个BFC的两个相邻容器的上下margin会重叠
计算BFC高度时浮动元素也参于计算
BFC的区域不会与浮动容器发生重叠

3、作用

解决两个相邻元素的上下margin重叠问题

触发其中一个元素的BFC，使得两个元素不在同一个BFC内。

解决父元素高度塌陷

当父元素没有设置高度且子元素浮动时，父元素会出现高度塌陷，使父元素触发BFC ，如设置overflow: hidden，此时子元素虽然设置了浮动，但其高度仍计算至父元素内，从而解决高度塌陷问题。

实现多栏布局

正常情况下，左侧元素浮动时，脱离文档流，会与右侧元素发生重叠，不能实现自适应两栏效果。给右侧元素添加声明overflow: hidden;，使得右侧元素触发了BFC ，从而解决了重叠问题。

一像素边框解决方案

/**
* 移动端1px边框
* @param $radiusValue 圆角度 设置值需要*2
* @param $borderColor 边框颜色
*/

@mixin border-one-px ($radiusValue, $borderColor) {
    position: relative;

    &::after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        border: 1PX solid $borderColor;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: left top;
        border-radius: $radiusValue;
        pointer-events: none;
    }
}

CSS一些概念

预处理器

CSS 预处理器为 CSS 增加一些编程的特性，比如 Sass、Less、Stylus 都可以进行嵌套，使用 & 表示父元素。也无需考虑浏览器的兼容性问题

css-loader

css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样

文本溢出

单行文本溢出

overflow: hidden; 
text-overflow: ellipsis;/* 溢出部分显示省略号 */
white-space: nowrap;/* 不换行 */

多行文本溢出

display: -webkit-box;/* 弹性伸缩盒子模型  */
-webkit-box-orient: vertical;/* 排列方式 */
-webkit-line-clamp: 3;  /* 限制显示的文本的行数 */
overflow: hidden;