CSS 基础

BFC

块级格式上下文，可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器，容器里面的元素不会在布局上影响到外面的元素。

BFC特性

每一个BFC区域只包含其子元素，不包含其子元素的子元素
每一个BFC区域相互独立，互不影响

如何触发BFC

给元素添加BFC属性，需满足下列任一条件

根元素( html )
设置float浮动，不包含none
绝对定位元素 (元素的 position 为 absolute 或 fixed)
display 为 inline-block、table-cell、table-caption、table、table-row、table-row-groutable-header-group、table-footer-group、inline-table、flow-root、flex 或 inline-flex、grid 或 inline-grid
设置 overflow，不为 visible
contain 值为 layout、content 或 paint 的元素
多列容器（column-count 或 column-width (en-US) 值不为 auto，包括 column-count 为 1）

BFC的作用

避免外边距重叠

案例

<style>
  .box{
    width: 200px;
    height: 200px;
    background: #5aa878;
    margin: 100px;
  }
</style>
<body>
  <div class="box"></div>
  <div class="box"></div>
</body>

可以看到，块的上外边距 margin-top 和下外边距 margin-bottom 会合并为单个边距，如果两个边距相等取其中一个，若大小边距不一样区最大边距。

解决方案

<style>
  .box{
    width: 200px;
    height: 200px;
    background: #5aa878;
    margin: 100px;
  }
  .container{
    overflow: hidden;
  }
</style>

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

给这两个box给各自一个div包裹，然后给这个div添加 overflow: hidden; 属性触发 container 的 BFC，最后就可以看到理想的结果 200px。

清除浮动

案例

<style>
  .container{
    border: 2px solid yellowgreen;
  }
  .content{
    width: 100px;
    height: 100px;
    background: #47cabf;
    margin: 100px;
    float: left;
  }
</style>

<div class="container">
  <div class="content"></div>
</div>

期望效果：边框包裹着一个100px的方块。实际效果：子元素添加了浮动导致子元素脱离了文档流，所以父元素只剩下2px的边框了解决方案：给父级元素增加 overflow: hidden; 除发BFC，即清除了浮动。

防止元素被浮动元素覆盖

案例

<style>
  .box1{
    width: 100px;
    height: 100px;
    background: blue;
    float: left;
  }
  .box2{
    width: 200px;
    height: 200px;
    background: red;
  }
</style>

<div class="box1"></div>
<div class="box2"></div>

期待效果：两个盒子并排存在。实际效果：两盒盒子会重叠。解决方案：给 box2 添加 overflow: hidden; 触发 BFC。

防止父子元素外边距塌陷

案例

<style>
  .box1{
    width: 200px;
    height: 200px;
    background: blue;
  }
  .box2{
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 20px;
  }
</style>

<div class="box1">
  <div class="box2"></div>
</div>

期望效果：子节点据父节点 20px 实际效果：两个块元素完全重叠解决方案：给父元素添加 BFC 属性

选择器

css 选择器包括

元素选择器通过元素的标签名选中元素，如p、h1、div等
类选择器通过元素的class属性值选中元素，以.开头，如.classname
ID选择器通过元素的id属性值选中元素，以#开头，如#idname
属性选择器通过元素的属性值选中元素，如[attr]、[attr=value]、[attr^=value]等
伪类选择器通过元素的状态或位置选中元素，如:hover、:active、:first-child等
伪元素选择器通过元素的特定位置选中元素的某个部分，如::before、::after等
后代选择器通过元素的嵌套关系选中元素，如ancestor descendant
子元素选择器选择直接子元素，如parent > child
兄弟元素选择器选择紧邻的兄弟元素 prev + next
通配符选择器 * 选择所有元素

选择器优先级

!important 具有最高优先级的样式，会覆盖其他所有样式。
内联样式直接在HTML元素中通过style属性设置的样式。
ID选择器使用#选择器选中的元素。
类选择器、属性选择器、伪类选择器使用.、[]、:选择器选中的元素。
元素选择器、伪元素选择器使用元素名、::选择器选中的元素。
后代选择器、子元素选择器、兄弟元素选择器通过元素的嵌套关系或位置选中的元素。
通用选择器选中页面中的所有元素。

盒模型

盒模型（Box Modle）可以用来对元素进行布局，由内到外包含实际内容、内边距、边框、和外边距四个部分。

盒模型的属性

width 内容的宽度
height 内容的高度
padding 内边距
border 边框。
margin 外边距。

盒模型的分类

W3C盒模型(标准盒模型) width 和 height 指的是内容区域的宽度和高度
IE盒模型(怪异盒模型) width 和 height 包括内容区域、边框、padding内边距

Flex布局

Flexbox Layout, 官方名为 CSS Flexible Box Layout Module，意为”弹性布局”，是 CSS3 中引入的一种更加灵活高效的布局/对齐/排序方式。任何一个容器都可以指定为 Flex 布局

使用时将容器设置为弹性盒子布局。

display: flex; // 弹性盒子布局

Flex 容器属性

属性值	含义
flex-direction	决定主轴的方向(row、row-reverse、column、column-reverse)
flex-wrap	决定如果一条轴线排不下，如何换行(nowrap、wrap、wrap-reverse)
flex-flow	flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap
justify-content	定义主轴上的对齐方式(flex-start、flex-end、center、space-between、space-around)
align-items	定义了项目在交叉轴(Y轴)上的对齐方式(flex-start、flex-end、center、baseline、stretch)
align-content	设置多根轴线的对齐方式，也就是行间距。如果项目只有一行，该属性不起作用

Flex 项目属性

属性值	含义
order	定义项目的排列顺序。数值越小，排列越靠前，默认为 0, 可以为负数
flex-grow	定义项目的放大比例，默认是 0，如果容器有剩余空间，也不放大。如果所有项目均有设置 flex-grow 值，它们会按照比例填充全部空间
flex-shrink	定义项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
当容器内所有项目宽度之和，大于了容器的宽度，里面的项目就会被压缩。当项目 flex-shrink 属性为 0，则项目不会被压缩
flex-basis	定义项目占据主轴空间的大小，默认值为 auto，就是项目本身的大小。
可以设为跟 width 或者 height 一样的值，就是项目占据的固定空间
flex	flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto
align-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

Animation 动画

Animation 是 CSS3 中具有颠覆性的特征之ー，可以通过设置多个节点来精确控制一个或一组动画。常用来实现复杂的动画效果。Animation 属性由其子元素合并而成。

定义动画

@keyframes move {
  from {
    transform: translateX(0px);
  }

  to {
    transform: translateX(1200px);
  }
}

使用动画

div {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 调用动画 */
  animation-name: move;
  /* 持续时间 */
  animation-duration: 5s;
}

常用属性

属性	描述
@keyframes	定义动画
animation	所有动画属性的简写，除了 animation-play-state属性
animation-name	指定需要使用的动画（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒( 必须的 )
animation-timing-function	规定动画的速度曲线，默认是”ease”
aniamtion-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有 infinite(无限次)
animation-direction	规定动画是否在下一周期逆向播放，默认是” normal”，alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是” running” ，还有 paused 暂停
animation-fill-mode	规定动画结束后状态，保持 forwards 回到起始 backwards

属性解析

aniamtion-direction

动画是否逆向播放，可选值如下：

normal 默认的
reverse 从终点运动向起点终点=>起点
alternate 到达终点后是否原路返回( 起点=>终点=>起点 ) 当 animation-iteration-count < 2 时无效
alternate-reverse 终点=>起点=>终点 animation-iteration-count < 2 时无效

animation-fill-mode

动画结束后状态，可选值如下：

forwards 保持当前位置
backwards 回到初始位置

animation-timing-function

规定动画的速度曲线，默认是 ease，可选值如下：

linear 动画从头到尾的速度是相同的。匀速
ease 默认。动画以低速开始，然后加快，在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
steps 指定了时间函数中的间隔数量（步长），即动画从头到尾，需要多少步完成

示例

div {
  width: 0;
  height: 30px;
  background-color: red;
  /* animation: move 5s linear  forwards; */
  /* steps 指定分几步完成动画，有了 steps 就不需要 ease linear */
  animation: move 5s steps(10) forwards;
}

@keyframes move {
  0% {}
  100% {
    width: 800px;
  }
}

打字机效果

<style>
  div {
    font-size: 40px;
    font-family: monospace;
    width: 0px;
    white-space: nowrap;
    animation: move 5s steps(9) forwards;
    overflow: hidden;
  }

  @keyframes move {
    0% {}
    100% {
      width: 360px;
    }
  }
</style>

<div>动画实现打字机效果</div>

animation

动画简写属性（动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态）

animation: move 1s ease 2s 3 alertnate fowwards;

animation 动画的事件监听

dom.addEventListener("animationstart", (e) => {
  // 动画开始时触发
});

dom.addEventListener("animationend", (e) => {
  // 动画结束时触发
});

dom.addEventListener("animationiteration", (e) => {
  // 动画重复播放时触发
});

transition 过渡

transition 将元素从一种样式在指定时间内平滑的过渡到另一种样式。

transition-property

用来设置元素中参与过渡的属性名称。可取值如下

none：表示没有属性参与过渡效果；
all：表示所有属性都参与过渡效果；
property：定义应用过渡效果的 CSS 属性名称列表，多个属性名称之间使用逗号,进行分隔

transition-duration

设置元素过渡的持续时间，单位为秒或毫秒，默认为0。

transition-timing-function

设置元素过渡的动画类型，可选值如下：

属性值	描述
linear	以始终相同的速度完成整个过渡过程，等同于 cubic-bezier(0,0,1,1)
ease	以慢速开始，然后变快，然后慢速结束的顺序来完成过渡过程，等同于 cubic-bezier(0.25,0.1,0.25,1)
ease-in	以慢速开始过渡的过程，等同于 cubic-bezier(0.42,0,1,1)
ease-out	以慢速结束过渡的过程，等同于 cubic-bezier(0,0,0.58,1)
ease-in-out	以慢速开始，并以慢速结束的过渡效果，等同于 cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n, n, n, n)	使用 cubic-bezier() 函数来定义自己的值，每个参数的取值范围在 0 到 1 之间

transition-delay

设置过渡效果延迟的时间，单位为秒或毫秒，默认为 0。

transition

简写属性，用于同时设置上面的四个过渡属性。

实例

div {
  width: 100px;
  height: 100px;
  border: 3px solid black;
  margin: 10px 0px 0px 10px;
  transition: width .25s linear 1.9s, background 1s 2s, transform 2s;
}
div:hover {
  width: 200px;
  background-color: blue;
  transform: rotate(180deg);
}

写法等价于

transition-property: width, background, transform;
transition-duration: .25s, 1s, 2s;
transition-timing-function: linear, ease, ease;
transition-delay: 1.9s, 2s, 0s;

事件监听

transition 只支持 transitoinend 事件

Transform 变换

transform 是元素转换属性，其属性值为转换函数，使用该属性可以让元素向指定方向移动、缩放大小、旋转等变化。

常用转换函数

rotate 旋转函数
translate 移动函数
scale 缩放函数

语法如下

transform: translate(x, y);  // 移动到 x, y。或者可以分开写
transform: translate3d(x, y, z); // 3d 转换
transform: translateX(n);    // 沿 x 轴方向，参数为正沿 x 轴正向，为负沿 x 轴负向
transform: translateY(n);    // 沿 y 轴方向，参数为正沿 y 轴正向，为负沿 y 轴负向
transform: translateZ(n);    // 沿 z 轴方向，参数为正沿 z 轴正向，为负沿 z 轴负向

rotate、scale 与 translate 用法基本一致。

transform-origin

transform-origin(x, y) 用于指定转换的中心点，相对于容器的左上角，可设置 px,%,top,center,bottom

Position 定位

position 即定位。可以让盒子 自由的 在某个盒子内移动位置或固定在屏幕中某个位置，并且可以压住其他盒子，有层叠的概念，即可以让多个盒子前后叠压来显示。

定位组成

定位由 定位模式 和 边偏移 组成。

定位模式用于指定一个元素在文档中的定位方式
边偏移决定了该元素的最终位置

定位模式

position 属性可选值如下

1、relative

相对定位 是元素在移动位置的时候，是相对于它自己原来的位置来说的。有以下两个特点

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

2、absolute (脱离文档流)

绝对定位是元素在移动位置的时候，相对于最近的非 static 定位的父级元素定位的。

特点如下

脱离文档流，完全不占位置
父元素没有定位，则以浏览器为准进行定位（Document 文档）
祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置

子节点是绝对定位的话，父节点要用相对定位

3、static

静态定位,元素的默认定位方式，无定位的意思。

4、fixed(脱离文档流)

固定定位是元素固定于浏览器可视区的位置。

特点

以浏览器的可视窗口为参照点移动元素
不再占有原先的位置
当父级元素有 transform 属性时，会将该元素当做参照物

5、sticky

粘性定位，相对于最近的可滚动祖先进行定位。

边偏移

边偏移的属性如下

top 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom 底部偏移量，定义元素相对于其父元素下边线的距离
left 左侧偏移量，定义元素相对于其父元素左边线的距离
right 右侧偏移量，定义元素相对于其父元素右边线的距离

Z-index

z-index 属性用来设置元素的堆叠顺序(元素层级)，值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素重叠部分被遮盖住。

取值范围

auto 默认值，如果各级祖先元素均未设置该属性，则相当于0
number 整数数值，取值范围是 -2147483584 ~ 2147483584，数值越大，层级越高
inherit 继承父元素的z-index的属性值

适用范围

只能在设置了 position: relative | absolute | fixed 的元素或者父元素设置了 display: flex 属性的子元素中起作用，在其他元素中不起作用。

设置了定位且 z-index 属性值相同的同级元素，层级由元素的书写顺序决定，后面元素覆盖前面。

box-shadow

box-shadow 属性用来向边框添加阴影。

用法

box-shadow: h-shadow v-shadow blur spread color inset;

媒体查询

允许开发者根据设备的特定条件（如视口宽度、屏幕分辨率、设备方向等）来应用不同的样式规则。使得网页设计能够响应不同的设备和视口大小，实现响应式布局。

媒体类型

媒体类型描述设备的一般类别。一般常用 screen ，描述电脑、手机和平板屏幕。

all 适用于所有的设备
print 适用于打印模式
screen 主要用于屏幕
speech 主要用于语音合成器

媒体特性

媒体特性描述了 user-agent 输出设备或是浏览器环境的具体特征。

width viewport 的宽度
height viewport 的高度
aspect-ratio viewport 的宽高比
orientation viewport 的旋转方向

用法如下

@media (min-width: 700px) {  } // ...
@media (max-width: 700px) {  } // ...

/**
* 旋转方向 
*/
@media (orientation: portrait) {  } // ... 竖屏
@media (orientation: landscape) {  } // ... 横屏

逻辑操作符

逻辑操作符 not and 和 only 可用于联合构造复杂的媒体查询。

@media screen and (min-width: 680px) and (max-width: 1200px) {  }  
@media screen, print and (min-width: 700px) {  } // ... 逗号表示或操作

link标签方式

/* 区分横屏竖屏 */
<link rel="stylesheet" href="./a.css" media="(orientation:portrait)">
<link rel="stylesheet" href="./b.css" media="(orientation:landscape)">

CSS 高频效果实现

垂直居中

<div class="centerCtx">
  实现文字垂直水平居中
</div>

1、使用flex

display: flex;
justify-content: center;
align-items: center;

2、grid 布局

display: grid; /* 设置为grid布局 */
place-items: center; /* 同时进行水平和垂直居中对齐 */

3、absolute定位中top、left、bottom、right为0，margin: auto

<div class="parent">
  <div class="child">实现文字垂直水平居中</div>
</div>

.parent {
  height: 400px; /* 设置高度，确保能看到效果 */
  width: 600px;
  border: 1px solid #ccc;
  position: relative;
}

.child {
  width: 146px;
  height: 24px;
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

4、使用 margin 和 translate

.child {
  width: 146px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 等价于 */
  /* margin-top: -12px; */
  /* margin-left: -73px; */
}

5、table-cell 布局

.parent {
  height: 400px; /* 设置高度，确保能看到效果 */
  width: 600px;
  border: 1px solid #ccc;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child {
  width: 146px;
  height: 24px;
  display: inline-block;
}

文本超出省略

1、单行文本

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

2、多行文本

overflow: hidden;               // 溢出隐藏
text-overflow: ellipsis;        // 溢出用省略号显示
display: -webkit-box;           // 作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;   // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp: 3;          // 显示的行数

实现0.5px的线

1、使用 scale 缩放实现

width: 300px;
height: 1px;
background-color: red;
transform: scaleY(0.5);

2、使用 box-shadow

width: 300px;
height: 1px;
box-shadow: 0 0.5px 0 0 rgba(0,0,0, 0.5); // 设置纵向偏移量为0.5

3、使用伪类实现

.child {
  position: relative;
  border: none; /* 移除默认边框 */
}

.child::before {
  content: "";
  display: block;
  width: 300px; /* 设置为两倍大小的线条宽度 */
  height: 1px; /* 保持与原始线条相同高度 */
  background-color: black; /* 设置颜色 */
  transform: scaleY(0.5); /* 将高度缩放到0.5倍 */
  position: absolute;
  top: -0.5px; /* 调整位置使其在原始线条上方显示 */
}

4、移动端可以使用 meta viewport

<meta name="viewport" 
  content="width=device-width, 
  initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

响应式布局

媒体查询针对不同尺寸屏幕书写不同的样式，需要写多套样式
百分比布局在设置宽高时通过设置百分比去控制，但很难控制百分比是相对于哪个元素
vw、vh 与百分比类似，固定相对于视窗的百分比，强制与视窗绑定，无法设置临界值
rem 以根元素的 font-size 为基准设置宽高，根元素 font-size 根据屏幕尺寸动态变化

css绘制三角形

1、使用 border 绘制

设置容器宽高为0，设置3边的 border，两边颜色透明，中间的border设置颜色。

width: 0;
height: 0;
border-left: 5px solid transparent;
border-bottom: 5px solid red;
border-right: 5px solid transparent;