重学CSS1.0

值和单位

em

• 在 font-size 中使用是相对于父元素的 font-size 大小，比如父元素 font-size: 16px，当给子元素指定 font-size: 2em 的时候，经过计算后它的字体大小会是 32px；
• 在其他属性中使用是相对于自身的字体大小，如 width/height/padding/margin 等；

em 在计算的时候是会层层计算的，比如：

<div>
    <p></p>
</div>
div { font-size: 2em; }
p { font-size: 2em; }
//对于如上一个结构的 HTML，由于根元素 html 的字体大小是 16px，所以 p 标签最终计算出来后的字体大小会是 16 * 2 * 2 = 64px

wm、vh

• 1vw = 视口宽度均分成 100 份中 1 份的长度；100vw = window.innerWidth
• 1vh = 视口高度均分成 100 份中 1 份的长度；100vh = window.innerHeight

vmin、vmax

• vmin：取 vw 和 vh 中值较小的；
• vmax：取 vw 和 vh 中值较大的；

颜色体系

transparent 关键字

transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色。从技术上说，它是带有 alpha 通道为最小值的黑色，是 rgba(0,0,0,0) 的简写。

实现三角形

div {
    border-top-color: #ffc107;
    border-right-color: #00bcd4;
    border-bottom-color: #e26b6b;
    border-left-color: #cc7cda;
    border-width: 50px;
    border-style: solid;
}

增大点击区域

常常在移动端的时候点击的按钮的区域特别小，但是由于现实效果又不太好把它做大，所以常用的一个手段就是通过透明的边框来增大按钮的点击区域

.btn {
    border: 5px solid transparent;
}

清除浮动

BFC 清除浮动

.parent {
    overflow: hidden;
}

通过 clear 清除浮动

长文本处理

超出部分换行

overflow-wrap:break-word;

字符超出位置使用连字符

hyphens: auto

单行文本超出省略

white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis

多行文本超出省略

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;

水平垂直居中

单行的文本、inline 或 inline-block 元素

水平居中

text-align: center

垂直居中

• 通过设置上下内边距一致达到垂直居中的效果

padding-top: 10px;
padding-bottom: 10px;

• 通过设置height和line-height一致达到垂直居中

height: 100px;
line-height: 100px;

固定宽高的块级盒子

• absolute + 负 margin
• absolute + margin auto
• absolute + calc

不固定宽高的块级盒子

• absolute + transform

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

• line-height + vertical-align

.parent{
	line-height: 150px;
	line-height: 150px;
	text-align: center;
}
.child {
	display: inline-block;
	line-height: initial;
	vertical-align: middle;
}

• writing-mode

.parent{
writing-mode: vertical-lr;
text-align: center;
}
.middle {
display: inlne-block;
writing-mode: horizontal-tb;
text-align: center;
width: 100%
}
.child{
 display: inline-block
}

• table-cell

.parent {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.child {
	display: inline-block
}

• flex

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

• grid

.parent {
	display: grid
}
.child {
	justify-self: center;
	align-self: center
}

常用布局

两栏布局

• float + overflow(BFC 原理)

aside {
	float: left;
	width: 200px;
}
main {
	overflow: hidden;
}

• float + margin

aside {
	float: left;
	width: 200px;
}
main {
	margin-left: 200px;
}

• flex

.layout {
display: flex;
}
aside {
	width: 200px;
}
main {
	flex: 1;
}

• grid

.layout {
	display: grid;
	grid-template-columns: 200px auto;
}

三栏布局（两侧栏定宽主栏自适应）

• flex

<layout>
<aside>
<main>
<aside>
</layout>
.layout{
	display: flex;
}
aside{
width: 200px;
}
main{
flex: 1
}

• grid

.layout{
	display: grid;
	grid-template-columns: 200px auto 200px;
}

三行布局

• flex

• grid

flex

父容器

justify-content:定义如何沿着主轴方向排列子容器

flex-start: 起始端对齐

flex-end： 末尾端对齐

center： 居中对齐

space-around：子容器沿主轴均匀分布 位于首尾末端的子容器到父容器的距离是子容器间距的一半

space-between：子容器沿主轴均匀分布 位于首位两端的子容器与父容器相切

align-items：设置子元素如何沿交叉轴排列

flex-satrt：起始端对齐

flex-end：末尾段对齐

center：居中对齐

baseline：基线对齐 这里的baseline默认是值首行文字 即first baseline 所有子容器向基线对齐 交 叉轴起点到元素基线距离最大的子容器会将交叉轴起始端相切以确定基线

stretch：子容器沿交叉方向的尺寸拉伸至与父容器一致

子容器

每个子容器也可以单独定义沿交叉轴排列的方式，此属性的可选值与父容器 align-items 属性完全一致，如果两者同时设置则以子容器的 align-self 属性为准。

flex-start：起始端对齐

flex-end：末尾段对齐

center：居中对齐

baseline：基线对齐

stretch：拉伸对齐

轴

jusitify-content决定子容器沿主轴排列方式 align-items 决定子容器沿交叉轴的排列方向 flex-dirextion决定主轴的方向

主轴的起始端由flex-start表示 末尾以flex-end表示

向右：flex-direction： row

向下：flex-direction： column

向左：flex-direction： row-reverse

向上：flex-direction： column-reverse

flex 进阶概念

• 设置换行方式： flex-wrap

nowrap：不换行

wrap：换行

wrap-reverse：逆序换行

• 轴向与换行组合设置：flex-flow
• 多行沿交叉轴对齐：align-content

flex-start：起始端对齐

flex-end：末尾端对齐

center：居中对齐

space-around：等边距均匀分布

space-between：等间距均匀分布

strench：拉伸对齐

Grid

display 属性

通过声明display:grid该容器是一个块级元素 display: inline-grid 则容器元素为行内元素

grid-template-columns 属性和 grid-template-rows 属性

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高

.wrapper {
  display: grid;
  /*  声明了三列，宽度分别为 200px 100px 200px */
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  声明了两行，行高分别为 50px 50px  */
  grid-template-rows: 50px 50px;
}
repeat函数：可以简化重复的值 第一个参数是重复的次数 第二个对象是重复的值
grid-template-rows: repeat(2, 50px);

auto-fill 关键字：表示自动填充 让一行或者一列中尽可能地容纳更多的单元格

grid-template-columns: repeat(auto-fill, 200px);

fr 关键字： fr单位代表网格容器中可用空间的一等份

grid-template-columns: 200px 1fr 2fr;//表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。

minmax()函数：产生一个范围 表示长度在这个范围之中都可以应用到网格项目中 接收两个参数表示最大值和最小值

grid-template-columns: 1fr 1fr minmax(300px, 2fr);//，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍

auto 关键字：由浏览器决定长度

grid-template-columns: 100px auto 100px;//第一列和第三列为100px 中间由浏览器长度决定

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式。

grid-row-gap: 10px;//行间距是10px
grid-cloumn-gap：20px;//列间距是20px；
grid-gap: 10px 20px;//行间距10px 列间距20px

grid-template-areas 属性

rid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成

一般这个属性跟网格元素的 grid-area 一起使用 grid-area 属性指定项目放在哪一个区域

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas://划出六个单元格 .符号代表空的单元格 即没有用到该单元格
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}
.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

grid-auto-flow 属性

grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是”先行后列”，即先填满第一行，再开始放入第二行

grid-auto-flow: row;
grid-auto-flow: row dense;//表示尽可能填满表格
grid-auto-flow: column;//表示先列后行

justify-items 属性、align-items 属性以及 place-items 属性

justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

justify-content 属性、align-content 属性以及 place-content 属性

justify-content 属性是整个内容区域在容器里面的水平位置（左中右），align-content 属性是整个内容区域的垂直位置（上中下）

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍

space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔

space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

stretch - 项目大小没有指定时，拉伸占据整个网格容器

各种简写形式

Border-radius

border-radius: 1em 2em 3em 4em;//top-left、 top-right、 bottom-right 、bottom-left

Background

background: #000 url(images/bg.gif) no-repeat top right;//color-image-repeat-position

Font

font: italic bold .8em/1.2 Arial, sans-serif;//style-weight-size-height-family

Border

border: 1px solid #000;//wdth-style-color

Margin和Padding

margin: 10px 5px 10px 5px;
padding: 10px 5px 10px 5px;
//四个值-上下边距和左右边距-上边距和左右边距和下边距-顺时针

all

initial 该关键字代表该元素或其父元素的所有属性至初始值
inherit 元素获取其父元素的计算值 通常只在覆盖原有的值的时候使用 继承始终来自文档树中的父元素 即使父元素不是包含块
unset 表示如果有父元素继承 则继承父元素 否则使用默认 即不是inherit就是initial

Animation