CSS 基础

css 引用

<link>
1. HTML 标签
2. ⻚面被加载时，link 会被同时加载
3. 权重较高兼容性好
4. js 动态插入
@import
1. CSS 提供
2. 引用的 css 会等到⻚面被加载完再加载
3. 权重较低有兼容性问题

layout 布局历程

block inline

块内联

inline-block

内联块

float

浮动

relative absolute fixed sticky

定位
粘性定位 relative + fixed

flex

弹性盒模型

float 浮动

一开始，浮动的目的只是达成图文环绕效果

1	<img src="dog.jpg" align="left" />

在 img 的标签上面，可以添加 align，用于控制图片浮动的方向，向左 or 向右

后来，这样的特性被添加到 css 中，可以对任何元素使用

1	<img src="dog.jpg" style="float: left;" />

效果和上面添加 align=”left” 是一样的

浮动的特性

一行可以显示多个元素
支持宽高
宽高由内容撑开
会按照指定方向进行浮动，遇到父级的边界或者上一个浮动元素的时候停止浮动，浮动元素不会覆盖浮动元素
元素浮动后，margin 不再重叠，并阻止子级元素的 margin 传递，触发BFC

浮动的问题

脱离文档流

为什么文字可以围绕在浮动元素的周围？

文字会认同浮动元素所占有的位置，围绕它进行布局，也就是浮动元素并不会脱离文本流，只会脱离文档流。

clear

只会对写在它前面的浮动元素有效
清除指定方向的浮动
只有给不浮动的块标签添加才有效

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

BFC

块级格式化上下文 Block Formatting Context

作用

包含浮动元素，解决父级高度塌陷问题
阻止 margin 的传递
不被浮动元素覆盖

触发条件

根元素 html
float 不为 none
overflow 不为 visible
position 为 absolute、fixed
display 为 inline-block、table-cell、table-caption
父元素 flex 布局

position 定位

静态定位 static
相对定位 relative
- 可以利用 top、bottom、left、right 设置偏移值
- 位移方向参照自己当前位置
- 不设置偏移方向，元素不发生位置变化
- 元素移动后不脱离文档流原始位置会被保留
- 提升层级
- 作为定位父级
绝对定位 absolute
- 脱离文档流
- 内联标签可以支持宽高
- 块标签不设置宽高的情况下，宽高内容撑开
- 位移方向参照定位父级的位置，没有定位父级，根据 document 位置
- 提升层级
- 触发BFC布局环境
固定定位 fixed
- 脱离文档流
- 内联标签可以支持宽高
- 块标签不设置宽高的情况下，宽高内容撑开
- 元素定位参照页面可视区即使滚动条滚动，也不影响可视区
- 提升层级
- 触发BFC布局环境

z-index 层级

只能加给定位元素
数值越大层级越高，可以接受负数
在同级元素之间比较层级
z-index 不为 auto 创建层叠上下文

层叠上下文

根元素 html
z-index 值不为 auto 的绝对/相对定位
position: fixed;
z-index 值不为 auto 的 flex 项目
opacity 值小于 1 的元素
transform 值不为 none 的元素
mix-blend-mode 值不为 normal 的元素
filter 值不为 none 的元素
perspective 值不为 none 的元素
isolation: isolate;
will-change 任意属性
-webkit-overflow-scrolling 值为 touch 的元素

flex 弹性盒模型

flex 容器

flex-direction 确定主轴方向
row row-reverse column column-reverse
flex-wrap 项目是否换行
nowrap wrap wrap-reverse
justify-content 主轴对齐方式
flex-start flex-end center space-between space-around
align-items 交叉轴对齐方式
stretch flex-start flex-end center baseline
align-content 多轴线对齐方式(出现换行)
stretch flex-start flex-end center space-between space-around

flex 项目

order定义项目排列顺序，数值越小，排列越靠前，默认 0，接受负值
flex-grow定义项目放大比例，默认 0，即如果存在剩余空间，也不放大
flex-shrink定义元素缩放比例，默认 1，即如果可用空间不足，将缩小该项目
flex-basis项目占有固定空间，默认 auto
align-self允许单个项目和其他项目有不一样的交叉轴对齐方式

复合样式

flex-flowflex-direction 和 flex-wrap 的简写
flexflex-grow, flex-shrink, flex-basis 的简写
flex: 1 👉 flex: 1 1 0%

table 表格布局

基本组成

<table>
  <caption>标题</caption>
  <thead>
    <tr>
      <th>表头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>脚注</td>
    </tr>
  </tfoot>
</table>

默认样式

table {
  display: table;
}
caption {
  /* BFC */
  display: table-caption;
}
thead {
  display: table-header-group;
}
tr {
  display: table-row;
}
th, td {
  /* 垂直居中、BFC */
  display: table-cell;
}
tbody {
  display: table-row-group;
}
tfoot {
  display: table-footer-group;
}

清除样式

th {
  font-weight: normal;
}
th, td {
  padding: 0;
}
table {
  border-collapse: collapse;
}

标签样式

1 2	<table border="1" cellspacing="20" cellpadding="50"></table> <td rowspan="2" colspan="3"></td>

样式表样式

table {
  border-spacing: 20px; /* cellspacing */
  /* 边框合并为单一边框, 忽略border-spacing; 默认 separate */
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
  padding: 50px; /* cellpadding */
  vertical-align: middle; /* 默认垂直居中 */
}

使用特性

修改其中一个的宽度, 会影响整列的宽度
修改其中一个的高度, 会影响整行的高度

样式录

隐藏元素

opacity: 0; 占据空间可以交互
visibility: hidden; 占据空间不可交互
overflow: hidden; 溢出部分隐藏
display: none; 不占空间不可交互
z-index: -9999; 层级放到底部
transform: scale(0, 0); 占据空间不可交互
position: absolute 定位到可视区外
text-indent: -999px;
clip-path 裁剪

伪类伪元素

border 边框

边框宽度border-width 边框样式border-color 边框颜色border-style

border: 宽度样式颜色;

1
2
3

div {
  border: 1px solid #000;
}

border-radius 圆角

border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角

border-radius: 10px 30px 50px 70px / 20px 40px 60px 80px;
左边设置x半径 / 右边设置y半径

1
2
3

div {
  border-radius: 50%;
}

background 背景

background-color: 背景颜色;
background-image: url(背景图片地址) / 背景渐变;
background-repeat: repeat/repeat-x/repeat-y/no-repeat; 背景重复
background-position: 背景位置;
配合关键词可以更好的指定背景的位置
background-position: right 20px bottom 50px;
background-size: 背景尺寸;
background-attachment: fixed/scroll; 背景跟随

background: 背景颜色背景图片背景位置 / 背景尺寸背景重复背景跟随;

多背景图片设置，通过,进行间隔；写在前面的在上，写在后面的在下

1
2
3

div {
  background: chocolate url('bg.png') 50px 50px / cover no-repeat scroll;
}

font 字体

font-weight: lighter; 字体加粗
1. normal 400
2. bold 700
3. border 语义化上比 bold 更强烈
4. -webkit-text-stroke: 1px #ffc0cb;
font-style: italic; 字体倾斜
font-weight / font-style 如果想要去除的话，可以使用normal
font-size: 字体大小;
谷歌最小显示字体为12px，小于12px的，按照12px处理
不设置的情况，一般默认为16px的大小
font-family: Arial, “宋体”; 字体名称
中文常用: 微软雅黑、宋体（中文写在引号内）
英文常用: Arial、Helvetica
首选字体放在前面，备选字体放在后面
英文写在中文的前面，因为英文的字体里面没有中文的，但是因为中文有a o e拼音，所以对于英文也有字体的设计
line-height: 行高;
如果行高是奇数，文字的下方比上方多1px

font: 14px / 1 FontAwesome;
font: font-style font-weight font-size / line-height font-family;

font-face 自定义字体

@font-face {
  font-family: "font";
  src: url("font.woff2") format("woff2"), /* chrome 36+ firefox 35+ opera 23+ Android 37+ */
       url("font.woff") format("woff"), /* chrome 5+ Safari 5.1+ Firefox 3.6+ Opera  11.50+ IE 9+ Android 4.4+ iOS 5.1+ */
       url("font.ttf") format("truetype"), /* Chrome 3.5+ Safari 3+ Firefox 3.5+ Opera 10.1+ IE 9+ Android 2.2+ iOS 4.3+ */
       url("font.eot") format("embedded-opentype"), /* IE6+ */
       url("font.svg") format("svg"), /* Chrome3.5+ Safari 3.2+ iOS3.1+ */
       url("font.otf") format("opentype"); /* Chrome4.0+ Safari3.2+ Firefox3.5+ iOS 4.3+ */
  font-weight: normal;
  font-style: normal;
}

文本设置

color: 文字颜色;
text-align: left/right/center/justify; 文本对齐方式

text-indent: 首行缩进;

1em是当前元素上的文字大小，想缩进两个文字2em就好啦

以图换字

/* <h1>这是一个字体图片</h1> */
h1 {
  background: url(logo.jpg);
  text-indent: -999px;
  overflow: hidden;
}

text-decoration: 文本修饰;
- none 去除
- underline 下划线
- overline 上划线
- line-through 删除线
word-spacing: 词间距;

间隔 = 空格大小 + 词间距
在宋体的情况下，一个空格 = 字体大小的一半，但是不是所有字体都是
letter-spacing: 字间距;
word-break: break-all; 强制换行（数字和英文默认不换行）

white-space: nowrap; 强制不换行（中文默认换行）

@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin ellipsisMulti($line: 2) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;

  word-break: break-word;

  // word-wrap
  /* overflow-wrap: break-word; */
}

text-shadow: x y 模糊距离颜色; 文字阴影

x、y是必须项，模糊距离（默认为0）和颜色（默认字体颜色）非必须项

投影字text-shadow: 5px 10px 2px #000, 10px 20px 2px red;
空心字color: white; text-shadow: 0 1px black, 0 -1px black, 1px 0 black, -1px 0 black;
发光字text-shadow: 0 0 5px;

box-shadow 盒阴影

box-shadow: inset x y 模糊半径扩展颜色;

inset 内阴影
x 距离左侧
y 距离顶部
模糊半径
扩展: 扩展到一个位置之后，再进行模糊
颜色: 盒模型阴影的颜色
无限投影 不占空间的边框

1	box-shadow: 0 0 0 1px #fff inset;

overflow 溢出

visible 溢出
hidden 截断
scroll 滚动条
auto 超出则显示滚动条

text-overflow 文本溢出

clip 裁切
ellipsis 省略号

filter 滤镜

opacity 透明度
filter: opacity(.5); 硬件加速
相对 opacity: .5; 效果好兼容性不好
取值 0 ~ 1 0透明 1正常默认 1
ie浏览器 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
drop-shadow 阴影
filter: drop-shadow(0 0 20px red);
和 box-shadow 是有区别的 box-shadow: 0 0 20px 30px red;
sepia 怀旧
filter: sepia(.5);
取值 0 ~ 1 0正常 1怀旧默认 0
saturate 饱和度
filter: saturate(10);
取值 0 ~ 1+ 1正常 0不饱和 1+提高饱和度默认 1
hsl(h, s, l) h色调 s饱和度 l亮度
hue-rotate 色相反转
filter: hue-rotate(90deg);
取值 0 ~ 360deg 0正常 360deg 和 0 一致默认 0deg
inverte 反色
filter: inverte(1);
取值 0 ~ 1 默认 0
brightness 亮度
filter: brightness(2);
取值 0 ~ 1+ 0黑色 1正常 1+更亮默认 1
contrast 对比度
filter: contrast(10);
取值 0 ~ 1+ 0黑色 1正常 1+更低的对比度默认 1
grayscale 灰度
filter: grayscale(1);
取值 0 ~ 1 0正常 1灰色默认 0
blur 模糊
filter: blur(4px); 👍
backdrop-filter: blur(4px);
取值 0 ~ 0+ 0正常 0+模糊默认 0
ie浏览器 filter:progid:DXImageTransform.Microsoft.Blur();

background-clip 背景裁切

div {
  background-clip: padding-box; /* 👍 推荐 */
                /* border-box 默认值
                   content-box */
  background-origin: padding-box; /* 默认值 */
}

-webkit-background-clip 文字背景裁切

<style>
div {
  width: 1000px;
  height: 600px;
  font: bold 60px / 10 Helvetica;
  text-align: center;
  margin: auto;
  background: url('https://cdn.jsdelivr.net/gh/daidaibo/PicGo/sky.jpg');
  -webkit-background-clip: text;
  /* color: transparent; */
  -webkit-text-fill-color: transparent;
  transition: 1s;
}
div:hover {
  background-position: left -200px;
}
</style>

<div>文字背景裁切</div>

linear-gradient 线性渐变

background-image: linear-gradient(yellow, green, red);
background-image: linear-gradient(white 20%, black 70%);
background-image: linear-gradient(to left, yellow, green, red);
background-image: linear-gradient(to right bottom, yellow, green, red);
background-image: linear-gradient(45deg, yellow, green, red);
background-image: repeating-linear-gradient(white 0, white 20px, black 20px, black 40px);
/* 虚线应用 */
div {
  width: 500px;
  height: 100px;
  /* border-bottom: 5px dashed #000; */
  background-image:
    linear-gradient(white 90px, transparent 90px),
    repeating-linear-gradient(to right, black 0px, black 10px, white 10px, white 15px);
}

radial-gradient 径向渐变

background-image: radial-gradient(yellow, green, red);
background-image: radial-gradient(white 20%, black 70%);
background-image: radial-gradient(circle, yellow, green, red);
background-image: radial-gradient(50px 30px, yellow, green, red);
background-image: radial-gradient(at center top, yellow, green, red);
background-image: radial-gradient(farthest-side at left top, red, black);
background-image: repeating-radial-gradient(yellow 10%, green 20%, red 30%);

transform 2d / 3d 转换

不脱离文档流，不改变文档大小，多值书写时，动画从后往前执行

translate(x, y)位移
不会引起重排 重绘
百分比数值，基于自身宽高计算未知宽高居中定位
rotate(180deg)旋转
- deg 旋转角度
- turn 旋转圈数
- rad 弧度
scale(x, y)缩放
skew(x, y)斜切

transform-origin 原点

关键词 left、right、top、bottom
数值 px
默认 center center

perspective 透视

transform: perspective(700px);
作用于自己，3D 视觉效果，近大远小
只给最外层加一次 perspective 就好，不要层层都加，不然效果会很诡异
backface-visibility: hidden;
perspective-origin

preserve-3d

transform-style: preserve-3d;
给父级去掉平面限制，默认值 flat，作用于子级
每个需要子级飘出来的地方都要给 preserve-3d

transition 过渡动画

transition-property过渡执行样式
transition-duration过渡持续时间
transition-timing-function过渡执行动画
- linear 匀速
- ease 快慢快默认
- ease-in 开始慢
- ease-out 结束慢
- ease-in-out 开始慢、结束慢
- cubic-bezier 贝塞尔曲线
transition-delay过渡延迟时间

transition: property duration timing-function delay;

animation 关键帧动画

animation-name动画名称
animation-duration动画执行时间
animation-timing-function动画形式
- linear 匀速
- ease 快慢快默认
- ease-in 开始慢
- ease-out 结束慢
- ease-in-out 开始慢、结束慢
- cubic-bezier 贝塞尔曲线
animation-delay动画延迟时间
animation-iteration-count动画执行次数
- number
- infinite
aniamtion-direction轮流反向播放动画
- normal
- alternate
animation-fill-mode动画停留时的状态
- none
- forwards 停留在 100%
- backwards 一开始就在 0% 的位置，不走计算后样式，用在延迟动画的时候设定起始位置
- both 综合 forwards 和 backwards
animation-play-state
- paused 暂停动画
- running 执行

animation: name duration timing-function delay iteration-count direction fill-mode;

@keyframes 动画名称 {
  from {} /* 起点 */
  to {} /* 目标点 */
}

@keyframes 动画名称 {
  0% {}
  10% {}
  20% {}
  100% {}
}

div {
  animation: 动画名称（必填） 动画时间（必填）;
}

direction 文字排版

direction
- ltr 从左往右
- rtl从右往左
unicode-bidi
- bidi-override表示按照direction属性的值重排序
- normal 默认值
- embed 作用于 inline 元素，表示对象打开附件的嵌入层

<style>
  .box {
    width: 500px;
    height: 50px;
    border: 3px solid gray;
    margin-bottom: 20px;
  }
  .reverse {
    direction: rtl;
    unicode-bidi: bidi-override;
  }
  span {
    unicode-bidi: embed;
  }

  .arabic {
    text-align: right;
    direction: rtl;
  }
</style>

<div class="box">今天天气不错，心情也不错</div>
<div class="box">@#$%^&*(</div>
<div class="box reverse">@#$%^&*(</div>
<div class="box reverse">
  今天天气 <span>不错，心情</span> 也不错
</div>

<div class="arabic">阿拉伯语</div>

mask 透明遮罩背景

mask-image
默认值为none，值为透明图片，或透明渐变
mask-repeat
默认值为repeat，可选值与 background-repeat 相同
mask-position
默认值为0 0，可选值与 background-position 相同
mask-clip
默认值为border-box，可选值与 background-clip 相同
mask-origin
默认值为border-box，可选值与 background-origin 相同
mask-size
默认值为auto，可选值与 background-size 相同

<style>
  .box {
    width: 800px;
    height: 500px;
    margin: auto;
    background: url(https://cdn.jsdelivr.net/gh/daidaibo/PicGo/sky.jpg) center / cover no-repeat;
    -webkit-mask-image: url(mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 100px 200px;
  }
</style>

<div class="box"></div>

border-image 边框背景图

border-image-source
border-image-slice
图片剪裁位置，默认单位px，支持百分比值，百分比值大小是相对于边框图片的大小
border-image-repeat
设置图像边界是否重复（repeat）、拉伸（stretch）或铺满（round），默认 stretch
border-image-width
边框背景的宽度，默认是边框宽度，用来限制相应区域背景图的范围

length 带 px, em … 单位的尺寸值
percentage 百分比
number 不带单位的数字，表示 border-width 的倍数
auto border-image-width 将会使用 border-image-slice 的值
border-image-outset
用于指定在边框外部绘制（扩散），相当于把原来的贴图位置向外延伸，不能为负值

<style>
  .box {
    width: 200px;
    height: 200px;
    border: 25px solid;
    border-image-source: url(border-image.png);
    border-image-slice: 25;
    border-image-width: 30px;
    border-image-outset: 10px;
    border-image-repeat: round;
  }
</style>

<img src="border-image.png" />
<div class="box"></div>

scrollbar 滚动条

.hide_scroll_bar {
  overscroll-behavior: contain;
  /* firefox */
  scrollbar-width: none;
  /* IE 10+ */
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    /* Chrome Safari */
    display: none;
  }
}

瀑布流

.list {
  column-count: 3;
  .item {
    display: inline-block;
  }
}

css 函数

var()

/* 黑白主题 */
:root {
/* html { */
  --color: #333;
  --bg-color: #fff;
}
html.black {
  --color: #fff;
  --bg-color: #333;
}

p {
  color: var(--color);
  background-color: var(--bg-color);
}

css 预处理器

less
sass
- scss 新版
- sass 老版
stylus

css hack

简单的说，hack就是只有某些特定的浏览器才能识别这段代码，是一种兼容的方式。

属性前缀

.txt {
  background-color: #f1ee18; /* 所有识别 */
  .background-color: #00deff; /* IE6、7、8识别 */
  +background-color: #a200ff; /* IE6、7识别 */
  _background-color: #1e0bd1; /* IE6识别 */
}

选择器前缀

1
2
3

*html, txt {
  color: red; /* 只在IE6中生效 */
}