css 知识梳理

css 基础

标准模型区别 IE 模型

标准盒模型 width/height 是内容区域 width/height
IE 盒模型 width/height 包含 border+padding IE 模型： width=border+padding+width

设置盒模型？

box-sizing:content-box; //标准盒模型 box-sizing:border-box; //IE 盒模型

关于 line-height

行高由 line-box 决定，当是 line-box 高度是 line-height 最高者

<style>
  .text {
    background: blue;
  }
  .text span + span {
    line-height: 30px;
  }
  .text span:last-child {
    font-size: 20px;
    line-height: 40px;
  }
</style>

<div class="text">
  <span>h1 box</span>
  <span>h2 box</span>
  <span>h3 box</span>
</div>

.text 高度为 40px;
当 line-height 为字体高时，此时字体居中显示
当字体大小不一致时,此时是按baseline对齐(即字体底部),若要此时字体对齐需要都设置 vertical-align:middle
图片和文字显示时，图片距离底部由缝隙？

<style>
  .image {
    background: orange;
  }
</style>
<div class="image">
  <span>text image..</span>
  <img
    src="https://tse2-mm.cn.bing.net/th?id=OIP.AuVMA21FXKpPXBnHYLTsIgHaFj&w=174&h=130&c=7&o=5&pid=1.7"
  />
</div>

图片基于 baseline 对齐,因此和文字显示距离底部会有缝隙
图片采用 vertical-align或者设置display:block可以去除间隙

border

border 添加图片

.border{
    border:30px solid transparent; //边框透明
    border-image:url(xxx) 30 round; // 30 表示位移距离  round：让中间距离被图片均分
}

border 图像变化 2.1 css 边框交接处是斜切,因此我们可以通过让左边边透明来实现梯形

.border {
  width: 100px;
  height: 100px;
  border-right: 30px solid transparent;
  border-bottom: 30px solid blue;
  border-left: 30px solid transparent;
}

2.2 此时我们将 with不断减少梯形上边也会不断减少直到为 0时就成了三角形

.border {
  width: 0;
  height: 100px;
  border-right: 30px solid transparent;
  border-bottom: 30px solid blue;
  border-left: 30px solid transparent;
}

2.3 此时我们加入圆角后，会成为扇形

.border {
  /* 此处为2.2内容 */
  border-radius: 50%;
}

文字折行

overflow-wrap(word-wrap) 通用换行控制,是否保留单词
word-break 针对多字节文字
white-space 空白处是否断行

.txt {
  /* 单词超出文本换行 */
  overflow-wrap: break-word;
}
.txt {
  /* 所有超出范围的换行 */
  word-break: break-all;
}
.txt {
  /* 表示文字不换行 */
  white-space: nowrap;
}

伪元素和伪类区别

伪类表示状态比如： link,hover;使用单冒号
伪元素表示真的元素比如： after,before;使用双冒号

布局

决定布局方式的主要是position、float、以及 css3 新增的display属性的 grid、flex 值。下面介绍基本用法，关于更多面试相关 👉布局相关面试题

float

采用浮动布局后,会使父元素内容塌陷,此时一定记住要清除浮动

<style>
  /* 父元素清除浮动 */
  .row::after {
    display: table;
    clear: both;
    content: '';
  }
  .col-2 {
    float: left;
    width: 44%;
    margin-right: 0;
    margin-left: 4%;
  }
</style>
<div class="row">
  <div class="col-2"></div>
  <div class="col-2"></div>
</div>

** 这里除了使用table元素外还可以使用flow-root效果相同，或者采用其它形成 BFC 方案overflow,inline-bolck,block等，当由于这些在生产中会产生副作用，建议采用前面方案。

flex

属性

Parent (Flex Container)

display：flex | inline-flex
flex-direction: row | row-reverse | column | column-reverse
flex-wrap:wrap | nowrap | wrap-reverse
flex-flow: (是 flex-direction 和 flex-wrap 简写)
justify-content(主轴): flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items(交叉轴每个 flex 元素对齐方式):flex-start | flex-end | center | baseline | stretch
align-content(交叉轴多行时每行对齐方式):flex-start | flex-end | center | stretch | space-between | space-around;

Children (Flex Items)

order:
flex-grow:
flex-shrink: ;
flex-basis: | auto;
flex:是（grow, shrink, and basis）简写默认（0 1 auto）
align-self: 覆盖在父级上面的对齐方式

grid

属性

Parent (Grid Container)

```
display: grid | inline-grid;
```
grid-template-columns、grid-template-rows:基于网格列的纬度去定义定义网格线名称和尺寸 |

.myClass {
  grid-template-rows: 50% 25vh auto;
  grid-template-columns: [col1] 40px [col2] 3fr;
}

.anotherClass {
  grid-template-rows: repeat(2, 350px [name]) 10%;
}
/* 等价 */
.anotherClass {
  grid-template-rows: 350px [name] 350px [name] 10%;
}

grid-template-areas:是网格区域 grid areas 在 CSS 中的特定命名。通过选择器命名区域。然后通过此属性指定布局。必须为每个列/行指定区域名称。

.wrapper {
  grid-template-columns: 1 r;
    grid-tem
  grid-template-areas:
    'header header header header'
    'aside . article article';
  grid-template-rows: auto;
  grid-template-columns: 1fr 3fr;
}
/* 2. 指定区域 */
.class1 {
  grid-area: header;
}
.class2 {
  grid-area: article;
}
.class3 {
  grid-area: aside;
}

grid-template:是 grid-template-rows, grid-template-columns, and grid-template-areas 缩写
grid-column-gap: 列间距
grid-row-gap: 行间距
grid-gap: grid-column-gap and grid-row-gap 缩写
justify-items:align grid items 行轴对齐 start | end | center | stretch(default);
align-items:align grid items 纵轴对齐 start | end | center | stretch(default);
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
grid-auto-columns、grid-auto-rows: ;

Children (Grid Items)

```
grid-column-start
```
grid-column-end grid-row-start grid-row-end: | | span | span | auto;

.class1 {
  grid-row-start: 3;
  grid-row-end: span footer-end;
  grid-column-start: 1;
  grid-column-end: span 4;
}

grid-column grid-row: / | / span ;

.class1 {
  grid-row: 3 / span footer-end;
  grid-column: 1 / span 4;
}

grid-area: | / / / ; 有两种名称 grid-area:1. 使用区域名称;2. 使用 / / /

.class1 {
  grid-area: 1 / name3 / namedline / 4;
}

justify-self:覆盖 justify-items. start | end | center | stretch;
align-self:覆盖 align-items. start | end | center | stretch;

**练习:**通过 grid 布局让下面 html 在不同设备下展示不通的排版

.wrapper {
  display: grid;
  grid-gap: 10px;
  font-family: Arial, sans-serif;
}
.wrapper > * {
  padding: 1em;
  border-radius: 1em;
}
header {
  color: white;
  background-color: blue;
}
article {
  color: white;
  background-color: green;
}
aside {
  background-color: yellow;
}
@media (min-width: 650px) {
  header {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }
  article {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
  aside {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
  }
}
@media (min-width: 1000px) {
  header {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }
  article {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
  }
  aside {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
  }
}

<div class="wrapper">
  <header>
    <h1>My Fine Header</h1>
  </header>
  <article>
    <h2>Article Title</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci
      laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis
      incidunt?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci
      laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis
      incidunt?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci
      laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis
      incidunt?
    </p>
  </article>
  <aside>
    <h3>My Aside</h3>
    <blockquote>A fine quote!</blockquote>
  </aside>
</div>

css 效果

box-show

该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。

<style>
  .box {
    /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

    /* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
    box-shadow: inset 5em 1em gold;

    /* 任意数量的阴影，以逗号分隔 */
    box-shadow: 3px 3px red, -1em 0 0.4em orange;
  }
</style>

text-show

<style>
  .box {
    /* x偏移量 | y偏移量 | 阴影模糊半径| 阴影颜色 */
    text-shadow: 1px 1px 2px black;

    /* x偏移量 | y偏移量  | 阴影颜色 */
    text-shadow: 5px 5px #558abb;
  }
</style>

border-radius

<style>
  .box-radius {
    width: 100px;
    height: 100px;
    background-color: blue;
    /* top-left | top-right| bottom-left| bottom-right  */
    border-radius: 100% 0 0 0;
  }
</style>

clip-path

创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

<style>
  .box-border {
    width: 300px;
    height: 300px;
    background-color: orange;
    border: 1px solid blue;  在容器中间裁剪一个 1
    transition: clip-path 0.4s; nset(100px 100px); 

    /* 添加过渡
    clip-path: inset(100px 100px);
  }
  .test {
    /* 在容器 30% * 30% 位置创建一个 10% 圆形  (默认会在 50% * 50%)*/
    clip-path: circle(10% at 30% 30%);
    /* 在原图形上x,y 基础上 创建 （50%,0）(100%,50%）(50%,50%）三个点然后形成封闭图形 */
    clip-path: polygon(50% 0, 100% 50%, 50% 50%);
  }
</style>

transform

属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的

<style>
  .box-tranform {
    /* 水平方向 x移动100px,y移动 40px */
    transform: translate(100px, 40px);
    /* 顺时针旋转 30度 */
    transform: rotate(30deg);
    /* x,y同时缩放50% */
    transform: scale(0.5);
    /* x斜切30度，y斜切50度 */
    transform: skew(30deg, 50deg);
  }
</style>

构建 3D 效果

<style>
  .container-cue {
    /* 父容器 设置透视距离 */
    perspective: 500px;
  }
  .cue {
    /* 子元素设置 tra
    transform: rotateZ(30deg);  preserve-3d;
    /* 元素效果变换
    transform-style: preserve-3d;
  }
</style>
<div class="container-cue">
  <div class="cue"></div>
</div>

3D 立方体

<style>
  .container-cue {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid red;
    perspective: 500px;
  }

  .cue {
    idth: 200px;
    height: 200px;
    position: relative;
    width: 200px;
    height: 200px;
    transform: translateZ(-100px);
    transform-style: preserve-3d;
    transition: transform 3s;
  }
  .cue:hover {
    transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
  }
  .cue div {
    position: absolute;
    width: 200px;
    height: 200px;
    font-size: 50px;
    line-height: 200px;
    text-align: center;
  }
  .front {
    background: rgba(255, 0, 0, 0.3);
    transform: translateZ(100px);
  }
  .back {
    background: rgba(0, 255, 0, 0.3);
    transform: translateZ(-100px) rotateY(180deg);
  }
  .left {
    background: rgba(0, 255, 255, 0.3);
    transform: translateX(-100px) rotateY(-90deg);
  }
  .right {
    background: rgba(0, 255, 255, 0.3);
    transform: translateX(100px) rotateY(90deg);
  }
  .top {
    background: rgba(100, 100, 100, 0.4);
    transform: translateY(-100px) rotateX(-90deg);
  }
  .bottom {
    background: rgba(100, 70, 0, 0.4);
    transform: translateY(100px) rotateX(90deg);
  }
</style>
<div class="container-cue">
  <div class="cue">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="left">3</div>
    <div class="right">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
  </div>
</div>

css 工程化

postCSS

它是一款很好的 css 转换工具。本身只具有解析的能力,凭借强大的插件生态可以很好对 css 进行转换，例如：autoprefixer,cssnano,cssnext 以及 CSS Modules。 https://github.com/postcss/postcss#usage

webpack

css-loader css 变成 js
style-loader 将 css 引入 head
ExtractTextPlugin 将 css 从 js 提取出来
css modules 解决 css 变量名称冲突
Postcss-loader Postcss 处理 ...

FE-Note ｜晨风笔记