BFC

块级格式上下文（Block Formatting Context），可以理解成元素的隐藏功能，默认情况下是关闭状态，触发一些条件就会开启BFC。

开启BFC能解决的问题

• 开启后，子元素不会margin塌陷问题
• 开启后，自己不会被其他浮动元素覆盖
• 开启后，子元素浮动，父元素高度不会塌陷

如何开启

• 根元素（html）开启了
• 浮动元素
• 绝对定位和固定定位的元素
• 行内块元素
• 表格单元格：table、thead、tbody、tfoot、caption、tr、th、td（这些开启了BFC，一般css这样写display: table）
• overflow的值不为visible的块元素
• 伸缩项目
• 多列容器
• column-span为all的元素
• display的值：flow-root

水平垂直居中

定宽高

父元素：position: relative;
子元素：position: absolute;
         left: 50%;
         top: 50%;
         margin-left: 子元素负的宽度一半;
         margin-top: 子元素负的高度一半;

不定宽高

父元素：position: relative;
子元素：position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       
父元素：position: relative;
子元素：position: absolute;
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
       margin: auto;

flex布局
父元素：display: flex;
       align-items: center;
       justify-content: center;

flex变异布局
父元素：display: flex;
子元素：margin: auto;

grid布局
父元素：display: grid;
子元素：margin: auto;

父元素：display: grid;
子元素：align-self: center;
       justify-self: center;

table-cell
父元素：display: table-cell;
       text-align: center;
       vertical-align: middle;
子元素：display: inline-block; // 可以换成margin: auto;

emmet语法

* {
    text-align: center; /* tac */
    position: absolute; /* poa */
    line-height: 20px; /* lh20px */
}

浮动

• 元素本身：float: right;
• clear属性指定段落的左侧或右侧不允许浮动的元素
• 浮动带来的问题：高度塌陷
• 解决：清除浮动

清除浮动

子元素浮动，造成父元素高度塌陷
1. 把父元素也设置成浮动：float: left;（缺点：父元素的父元素会造成高度塌陷）
2. 父元素绝对定位：position: absolute;（缺点：脱离文档流，影响布局）
3. 给父元素添加：overflow: hidden;（缺点：当文本过长时，并且包含过长英文时，会隐藏英文文本）
4. 给父元素设置固定的高度：（缺点：子元素高度不固定的时候，父元素高度不确定）
5. 给子元素末尾添加一个空元素设置空元素的clear：
    <div style="clear: both;"></div>
    缺点：增加了页面渲染负担（影响不大）
6. 给父元素添加伪类：
    .parent::after {
      content: "";
      display: block;
      clear: both;
    }
    .parent { /* IE6、IE7专用 */
        *zoom: 1
    }
第6个是最常用。

margin-top、margin-bottom不起作用

• 外层元素：padding
• 外层元素：overflow: hidden;
• 外层元素透明边框 border: 1px solid transparent;(常用)
• 内层元素：float:left;
• 内层元素：display:inline-block;
• 内层元素绝对定位 postion: absolute;

移除type="number"尾部的箭头

<input type="number" class="no-arrow" />

.no-arrow::-webkit-inner-spin-button { -webkit-appearance: none; }

隐藏滚动条

.className::-webkit-scrollbar {
  display: none;
}

单行文本溢出显示省略号

.className {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 非必须，只是为了制造一行放不下的效果 */
    max-width: 375px;
}

多行文本溢出显示省略号

.className {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 设置n行，也包括1 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

animation

8个属性，常用有6个属性

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

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线，默认：ease，相同速度：linear
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数（infinite）
animation-direction	规定是否应该轮流反向播放动画（reverse）

transition

transition: property duration timing-function delay

默认值分别为：all 0 ease 0

transform、translate

• transform：变形，改变
• translate：移动，是transform的一个方法

font-weight、letter-spacing、word-spaceing、text-indent、line-height

600等于bold
letter-spacing: 20px; // 字母间距
word-spacing: 20px; // 单词间距
text-indent: 2em; // 首行缩进
line-height: 1.5; // 一般文字行距这样写

font-style

* {
    font-style: italic; /* 字体倾斜 */
    font-style: normal; /* 字体默认 */
    font-style: inherit; /* 继承 */
}

text-decoration

* {
    text-decoration: underline; /* 下划线 */
    text-decoration: overline; /* 上划线 */
    text-decoration: line-through; /* 删除线 */
    text-decoration: none; /* 默认值 */
}

text-indent

text-indent: 2em; /* 缩进2个字 */

background背景

背景颜色一般默认transparent透明
background-color: red; /* rgba()可以设置背景透明 */
background-image: url();
background-repeat: no-repeat;
    /* 不平铺：repeat(默认值)、repeat-x、repeat-y */
background-position: x y;
    /*
     位置
       值可以是方位名词，如果是方位名词，没有xy的先后顺序
       如果只指定一个方位名词，另一个省略（默认center）
       x: left、center、right
       y: top、center、bottom
    */
    /*
      精确单位，第一个是x，第二个是y
      如果只给一个那么它肯定是x，另一个省略（默认center）
    */
    /*
      混合单位，第一个是x，第二个是y
    */
background-attachment: scroll; /* 背景固定：fixed */

background-origin: padding-box; /* 背景图片的位置: content-box、border-box */
background-clip: border-box; /* 背景绘制区域: padding-box、content-box */

样式：层叠性、继承性、优先级

• 层叠性：样式重复会覆盖之前的重复样式
• 继承性：text-、font-、line-开头的样式以及color
• 优先级： !important、行内样式、id、class、标签样式

盒子模型

组成部分：content、padding、border、margin
border: border-width border-style border-color;
border-style: solid; /* solid实线、dashed虚线、dotted点线 */
border-radius: 50%; /* 宽高的一半 */
border-radius: 10px 20px 30px 40px; /* 顺时针：左上、右上、右下、左下 */
border-radius: 10px 20px 30px; /* 左上、右上=左下、右下 */
border-radius: 10px 20px; /* 左上=右下、右上=左下 */
边框会影响盒子的实际大小
padding: 20px; /* 四边 */
padding: 20px 10px; /* 上下20px 左右10px */
padding: 30px 20px 10px; /* 上30px 左右20px 下10px */
padding: 40px 30px 20px 10px; /* 上右下左，顺时针 */
内边距会影响盒子的实际大小
盒子没有设置width/height，不会撑开盒子

box-sizing: content-box; /* 默认 content+padding+border */
box-sizing: border-box; /* 不会撑大盒子 */

box-shadow

box-shadow: 0px 0px 30px 50px red inset;

水平位置、垂直位置、模糊距离、阴影大小、阴影颜色、外部阴影

前两个必须，后面的可选

注意：默认outset外部不用写，写了整句报废，外部inset

text-shadow

text-shadow: 20px 20px 20px green;

水平位置、垂直位置、模糊距离、阴影颜色

前两个必须，后面的可选

表格细线边框

合并相邻的边框

border-collapse: collapse;

position

position: fixed; /* 固定定位 */
/* 右下角回到顶部按钮，固定到版心右侧 */
.btn {
    position: fixed;
    left: 50%;
    margin-left: 版心的一半;
}

position: absolute;
剪切：clip: rect(上边, 右边, 下边, 左边)

position: sticky; /* 粘性定位 */
top: 0px;
必须有top、bottom、left、right其中之下才生效
用的比较少，兼容性比较差，IE不支持

cursor

* {
    cursor: default; /* 默认 */
    pointer /* 手 */
    move /* 移动 */
    text /* 文本 */
    not-allowed /* 禁止 */
}

vertical-align

<div>
    <img style="vertical-align: middle;"/>
    asdad
</div>

img

img.img-style {
    object-fit: cover;
    object-position: right bottom;
}

伪元素

很像元素，但不是元素，是元素中的特殊位置。

div::first-letter {} // 第一个字符
div::first-line {} // 第一行
div::selection {} // 被鼠标选择的字符
div::placeholder {} // 输入框的提示文字
div::before {}
div::after {}

选择器

权重：（a,b,c）

• a：id选择器的个数
• b：类、伪类、属性选择器的个数
• c：元素、伪元素选择器的个数

属性选择器

[title] {} 有title属性的标签
div[class] {} div标签里有class的样式
input[type="text"] {} input标签里type="text"的样式
span[class^='lxh'] {} span标签里class属性的值以lxh开头的样式
span[class$='lxh'] {} span标签里class属性的值以lxh结尾的样式
span[class*='lxh'] {} span标签里class属性的值包含lxh的样式

兄弟选择器

<div>1</div>
<div class="xxx">2</div>
<div>3</div>
<div>4</div>

.xxx + div {
    color: red;
}
// 只有3变红，+是下面的第一个兄弟

.xxx ~ div {
    color: red;
}
// 3和4都变红，~是下面的所有兄弟

伪类

// 顺序不能乱写，下面的就是标准的顺序，后两个所有的元素都有，前两个是a标签的伪类
a:link {} // 没有访问过
a:visited {} // 访问过
a:hover {} // 悬浮
a:active {} // 激活（按下没有松手）

input:focus {} // 表单元素有此伪类
input:checked {
    // 注意：改变大小，不能改变颜色
} // 单选、多选
input:disabled {} // 不可用
input:enabled {} // 可用 (用得少)
div:target {} // 目标伪类（一般配合锚点）
div:lang() {} // 语言伪类
div:empty {} // 空元素（没有内容）
div:not(.lxh) {} // 除了类名为lxh的元素
div:not([title="lxh"]) {}

first-child、last-child

两个相似

<div>
    <p>1</p>
    <p>2</p>
</div>
div > p:first-child { color: red; } // 1变红，div下面第一个p元素变红

<div>
    <span>1</span>
    <p>2</p>
    <p>3</p>
</div>
div > p:first-child { color: red; } // div下面第一个不是p元素，所有没有效果

<div>
    <marquee>
        <p>1</p>
    </marquee>
    <p>2</p>
    <p>3</p>
</div>
div p:first-child {
    color: red; // 1变红
}

<div>
    <p>1</p>
    <marquee>
        <p>2</p>
    </marquee>
    <p>3</p>
    <p>4</p>
</div>
div p:first-child {
    color: pink; // 1和2变红
}

<p>1</p>
<div>
    <p>2</p>
    <marquee>
        <p>3</p>
    </marquee>
    <p>4</p>
    <p>5</p>
</div>
p:first-child {
    color: pink; // 1、2、3变红
}

nth-child()、nth-last-child()

相似

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
div > p:nth-child(2n) { // 2n或者even(偶数)
    color: pink; // 2、4都变红
}

// 奇数odd或者2n+1
// 前五：-n+5

:nth-child()、:nth-of-type()、:not()

2n是偶数，2n+1是奇数，-n+3前三项，even偶数，odd奇数

<div class="item" v-for="(item, index) in arr" :key="index">
      <div>{{ item }}</div>
</div>

<style>
// 所有的子元素
.item:nth-child(n){
    border-bottom: 1px solid red;
}
// 除了最后一个子元素
.item:not(:last-child){
    border-bottom: 1px solid red;
}
</style>

// 区别
<div>
    <span>1</span>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <span>5</span>
</div>
div > p:nth-child(2) {
    color: red; // 2变红
}

div > p:nth-of-type(2) {
    color: red; // 3变红
}

only-child、only-of-type

了解一下

添加模糊效果

filter: blur(5px); /* 数字越大越模糊 */

calc函数

width: calc(100% - 500px); /* +-/* */

ul、ol、p

去掉默认样式

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    display: inline-block;
}

p {
    margin: 0;
}

块级元素

默认宽度是父级的宽度

display: block;
div、p、ol、ul、li、h1-h6等
文字类的元素里面不能放块级元素，比如：
    p标签里面不能放块级元素，特别是div
    h1-h6里不能放块级元素

行内元素

宽高设置无效

display: inline;
span、a、i、b、s、u、em、strong、del、ins等

链接里面不能再放链接
链接里面可以放块级元素，但是a标签转换一下块级元素最安全

行内块级元素

可以设置宽高

display: inline-block;
img、input、td

flex布局

display: flex;

flex-direction: column;
flex-wrap: nowrap;
flex-flow: column nowrap; /* 简写 */

单行用align-items
多行用align-content

flex: 1;

align-self子元素对齐方式
order子元素的顺序

grid布局

容器：就是设置display: grid;的地方，可以看出是父元素
项目：可以看成是子元素
// 容器
display: grid;
grid-template-columns
grid-template-rows
column-gap
row-gap
gap: <'row-gap'> <'column-gap'>
grid-template-areas
grid-auto-flow
justify-items
align-items

// 项目
justify-self
align-selt

三角形

.className {
    /* 基础样式 */
    display: inline-block;
    border: solid 10px transparent;
    
    /*下*/
    border-top-color: #0097a7;
    /*上*/
    border-bottom-color: #b2ebf2;
    /*左*/
    border-right-color: #00bcd4;
    /*右*/
    border-left-color: #009688;
}


.three {
            width: 0;
            height: 0;
            border-width: 40px 20px 0 0;
            border-color: transparent pink transparent transparent;
            border-style: solid;
}

箭头

.className {
    /* 基础样式 */
    display: inline-block;
    width: 0;
    height: 0;
    border: 16px solid;
    border-color: transparent #CDDC39 transparent transparent;
    position: relative;
    
    /*下*/
    transform: rotate(270deg);
    /*上*/
    transform: rotate(90deg);
    /*左*/
    transform: rotate(180deg);
    /*右*/
    transform: rotate(0deg);
}

.className::after {
    content: "";
    position: absolute;
    /* 通过位移覆盖背景 */
    right: -20px;
    top: -16px;
    border: 16px solid;
    border-color: transparent #fff transparent transparent;
}

兼容性

不同浏览器标签的默认margin、padding不同

* {
    margin: 0;
    padding: 0;
}

ie6 图片默认间距

xxx {
    float: left;
}

块级元素浮动之后，margin的值变成了两倍

.xxx {
    display: inline;
}

ie6、ie7 两个块级元素，子元素相对定位，高度宽度超过父元素，父元素的overflow: hidden，但是子元素超过的部分不会隐藏

父元素也相对定位就可以实现子元素超过的部分隐藏

css3新属性，加浏览器前缀兼容早期浏览器

-ms-         /* IE */
-moz-        /* 火狐浏览器 */
-webkit-     /* 谷歌浏览器等使用Webkit引擎的浏览器 */

reset.css

normalize.css

移动端normalize.css

截图工具snipaste

F1截图、F3将截的图放在桌面置顶显示
点击图片，按alt取图片上的色，按c复制颜色/按shift切换颜色的模式
按Esc不显示图片

html

谢谢