CSS知识点集锦二

CSS知识集锦二

学习计划参考字节飞书的学习计划 - 超清楚（必看）)

参考阮一峰大大的 Flex 布局教程：语法篇

参考文章 个人总结（css3新特性）

参考文章 梳理CSS模块化

部分内容摘自MDN CSS(层叠样式表)

一、flex布局

flex布局是什么

Flexible Box 模型，一般称为flexbox,它为flexbox 的子元素之间提供了强大的空间分布和对齐能力

行内元素想要使用flex布局也可以使用：
display: inline-flex

tips: 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

基本概念

flex 布局的元素，为flex容器, 容器中的直系子元素就会变为 flex 元素
flex容器内存在两根轴线：主轴和交叉轴

容器的属性

• flex-direction
  flex-direction属性决定主轴的方向（flex元素的排列方向）

  • row (默认值) 主轴为水平方向，起点在左端
  • row-reverse 主轴为水平方向，起点在右端
  • column 主轴为垂直方向，起点在上沿
  • column-reverse 主轴为垂直方向，起点在下沿

• flex-wrap
  flex-wrap 指定flex元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。

  • nowrap （默认值）不换行
  • wrap 换行，第一行在上方
  • wrap-reverse 换行，第一行在下方

• flex-flow
  两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow
  使用方法：.box { flex-flow: <flex-direction> || <flex-wrap>;}

  • 默认值 为 row nowrap

• justify-content
  justify-content属性定义了flex元素在主轴上的对齐方式
  假设主轴从左到右， 以下属性为

  • flex-start 左对齐
  • flex-end 右对齐
  • center 居中
  • space-between 两端对齐，flex元素之间的间隔都相等
  • space-around 每个flex元素两侧的间隔相等

• align-items
  align-items属性定义项目在交叉轴上如何对齐
  假设交叉轴从上到下

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: flex元素的第一行文字的基线对齐。
  • stretch（默认值）：如果flex元素未设置高度或设为auto，将占满整个容器的高度

• align-content
  align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

flex元素

• order
  flex元素的排列顺序。数值越小，排列越靠前

• flex-grow
  flex-grow属性定义flex元素的放大比例，默认为0，即如果存在剩余空间，也不放大

  如果所有flex元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个flex元素的flex-grow属性为2，其他flex元素都为1，则前者占据的剩余空间将比其他项多一倍

• flex-shrink
  flex-shrink属性定义了flex元素的缩小比例，默认为1，即如果空间不足，该flex元素将缩小
  如果所有flex元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个flex元素的flex-shrink属性为0，其他flex元素都为1，则空间不足时，前者不缩小

• flex-basis
  flex-basis属性定义了在分配多余空间之前，flex元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即flex元素的本来大小
  接受的赋值与width 和 height 一样， px em rem %

• flex
  flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
  该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

• align-self
  align-self属性允许单个flex元素有与其他flex元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
  取值与align-items相同

二、CSS优先级

!important (无限大) > 行内样式(1000) > id选择器(100) > 类选择器 或 伪类(10) > 标签选择器或伪元素选择器(1) > 通配符* 0

tips:

• 内联样式和外联样式的优先级和加载顺序有关,谁后加载谁覆盖前面的样式
• 相同优先级的样式，谁后加载谁覆盖前面的样式
• div.#id 优先级大于 #id 可以理解成上述的值（100 + 1）> 100
• 注意这里给的优先级的值是相对的，即100个伪类优先级叠加的样式也不会超过 id选择器的优先级, 不能简单的 10 * 100 > 100

三、双飞翼/圣杯布局

圣杯布局

<div class="header">#header</div>
<div class="container">
  <div class="center">#center</div>
  <div class="left">#left</div>
  <div class="right">#right</div>
</div>
<div class="footer">#footer</div>

body {
/* 避免缩小到低于left 和right的宽度时样式混乱，另外left使用了position ，同样需要多一个left的宽度   */
  min-width: 400px; // 给定最小宽度, 避免宽度不够导致浮动参差；
}
.header {
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #f3f3f3;
}
.footer {
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #f3f3f3;
}

.container {
  padding: 0 100px 0 150px;
  /*  清除浮动  */
  overflow: hidden;
}

.center, .left, .right {
  text-align: center;
  float: left;
}

.center {
  height: 100px;
  background: pink;
  width: 100%;
}

.left {
  height: 100px;
  width: 150px;
  background: green;
  /* center 100% 则left 和 right被挤到第二行    */
  /* 使用外边距使left 和float 到第一行的位置，同时利用相对定位调整位置   */
  margin-left: -100%;
  position: relative;
  right: 150px;
}
.right {
  height: 100px;
  width: 100px;
  margin-left: -100px;
  background: yellow;
  position: relative;
  left: 100px;
}

codePen链接

双飞翼布局

<div class="header">header</div>
<div class="container">
  <div class="center">
    <div class="inner">inner</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="footer">footer</div>

body {
  /* 最小宽度不能小于侧边栏的宽度之和   */
  min-width: 400px;
}
.header, .footer {
  height: 50px;
  background: #f3f3f3;
  text-align: center;
}

.container {
  /* 清除浮动，撑开container盒子   */
  overflow: hidden;
  width: 100%
}

.center, .left, .right {
  float: left;
  height: 200px;
  text-align: center;
}

.center {
  width: 100%;
  background: pink;
}

.inner {
  margin: 0 200px;
}
.left {
  width: 200px;
  margin-left: -100%;
  background: yellow;
}
.right {
  width: 200px;
  margin-left: -200px;
  background: green;
}

codePen链接

四、CSS3新特性

过渡

定义： CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
语法： transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
可简写 transition：all,.5s
all 代表所有属性变化都进行过渡，过渡时间为0.5s
注意过渡的属性和时间是必须有的;

动画

语法：

animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running)

形状转换

transform:允许你旋转，缩放，倾斜或平移给定元素

CSS伪选择器

具体可以看 MDN的伪类选择器

阴影

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向

边框圆角

border-radius: n1,n2,n3,n4;
border-radius: n1,n2,n3,n4/n1,n2,n3,n4;

文字换行及文本省略

换行

语法：word-break: normal|break-all|keep-all;

• normal 默认值 使用默认的断行规则。
• break-all 可在单词内换行
• keep-all 只在半角空格及连字符换行

文本省略

单行文本省略

overflow: hidden;
width: 100px;
text-overflow: ellipsis;
white-space: nowrap;

多行文本省略

width: 100px;
overflow: hidden;
word-break: break-all;
text-overflow: ellipisis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 行数

颜色

rgba 和 hsla

渐变

线性渐变：linear-gradient()
径向渐变：radial-gradient()
圆锥渐变：conic-gradient()

弹性布局

flex弹性盒子，可以参照该文章第一篇幅；

栅格布局

了解有这个东西，具体还未用过；（待补充）

多列布局

待补充

盒模型

可以看我写的CSS知识集锦一

媒体查询

用处很多，可以参考MDN的使用媒体查询

五、CSS样式隔离

避免相同类名的样式污染问题促使我们需要进行CSS样式隔离及CSS模块化

BEM命名方法

BEM 的命名规范如下

/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */
.block {
}

/* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */
.block__element {
}

/* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */
.block--modifier {
}

CSS Modules

CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性，通过这种方式，即可在使用时明确指定所引用的 css 样式

通过webpack 的cssloader modules打包时加入hash值来避免 css 类名冲突的问题

CSS In JS

CSS in JS，意思就是使用 js 语言写 css，完全不需要些单独的 css 文件，所有的 css 代码全部放在组件内部，以实现 css 的模块化

import React from "react";
import styled from "styled-components";

// 创建一个带样式的 h1 标签
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 创建一个带样式的 section 标签
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// 通过属性动态定义样式
const Button = styled.button`
  background: ${props => (props.primary ? "palevioletred" : "white")};
  color: ${props => (props.primary ? "white" : "palevioletred")};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 样式复用
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
  <Button primary>Primary</Button>
</Wrapper>;

使用用于实现css in js 的库（如 styled-components）允许我们直接在 js 中编写 css，案例中在定义源生 html 时就创建好了样式，在使用的时候就可以渲染出带样式的组件