查看浏览器是否支持CSS3属性：https://caniuse.com/
1.利用CSS实现三角形和梯形
//下三角或下梯形
// html
<div class="demo"></div>
//css
.demo {
margin: 100px auto;
width: 0px; /*下三角*/
/*下梯形 */
/*width: 20px;*/
height: 0px;
border-top: 30px solid red; /*决定三角的高度 */
border-left: 30px solid transparent; /*决定三角的宽度*/
border-right: 30px solid transparent; /*决定三角的宽度*/
}
2.CSS实现旋转及确定旋转原点
// html
<div class="demo"></div>
//css
.demo {
margin: 100px auto;
width: 40px;
height: 40px;
background-color: red;
/*确定旋转原点*/
transform-origin: 0 0; /*原点左上角*/
/*transform-origin: 0 100%; 原点左下角*/
/*transform-origin: 100% 0; 原点右上角*/
/*transform-origin: 100% 100%; 原点右下角*/
transform: rotate(35deg); /*旋转35°*/
}
3.CSS实现太极图
body {
background-color: grey;
}
/*实现左黑右白大圆*/
.demo {
margin: 100px auto;
width: 150px;
height: 300px;
background-color: white;
border-left: 150px solid black;
border-radius: 50%;
position: relative;
}
/* 实现内白外黑圆环 */
.demo::before {
content: '';
width: 0px;
height: 0px;
padding: 25px;
border-radius: 50%;
background-color: white;
border: 50px solid black;
position: absolute;
top: 0;
left: -75px;
}
/* 实现内黑外白圆环 */
.demo::after {
content: '';
width: 0px;
height: 0px;
padding: 25px;
border-radius: 50%;
background-color: black;
border: 50px solid white;
position: absolute;
bottom: 0;
left: -75px;
}
4.float浮动
float：指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除。
清除浮动：
{
clear: left; /*不允许左边有浮动元素*/
clear: right; /*不允许右边有浮动元素*/
clear: both; /*不允许两边有浮动元素*/
}
该清除浮动方式只能影响设置该属性的元素本身，不能影响其他元素，也就是说，假设两个div，div1， div2均设置为浮动，现在想要div2移至下一行，即清除div1浮动，那么要在div2内设置clear属性，在div1内设置没有作用(即使设置为both)，因为该属性只会影响设置该属性的元素本身，使之周围没有浮动元素，但不会清除自身的浮动属性。
浮动元素导致父元素无法被撑起：父元素设置高度；最后一个子元素设置清除浮动；父元素设置伪类清除浮动；父元素设置overflow属性
利用父元素设置伪类清除浮动：
<style>
* {
margin: 0;
padding: 0;
}
.outer {
background: yellow;
border: 1px solid purple;
}
.outer::after {
content: ""; /* 必须设置 */
display: block; /* 必须设置 */
height: 0;
width: 0;
clear: both; /* 必须设置 */
}
.item1 {
float: left;
width: 100px;
height: 100px;
background: green;
}
.item2 {
float: left;
height: 100px;
width: 100px;
background: pink;
}
.item3 {
float: left;
width: 100px;
height: 100px;
background: blueviolet;
}
</style>
<body>
<div class="outer">
<div class="inner item1">1</div>
<div class="inner item2">2</div>
<div class="inner item3">3</div>
</div>
</body>
注意：伪类的content必须设置，即使设置为空；display必须设置为block
5.鼠标进入变成手型
{
cursor: pointer;
}
6.过渡效果
注意：过渡效果需加在相应对象上，而不是触发动作中。如：图片需加过渡效果，则transition需加在img内，而不是img::hover内
{
transition-duration: 2s; /*过渡持续时间*/
transition-property: all; /*过渡属性，height, width, border, all等取值*/
transition-delay: .2s; /*过渡延迟时间*/
transition-timing-function: ease; /*过渡函数*/
/*简写*/
transition: 2s all .2s ease;
}
7.伪元素和伪类
{
.demo::before {
content: ''; /*content属性必须有*/
}
}
:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素以外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd) 匹配所有第奇数个子元素，第1个，第3个，第5个...
:nth-child(even) 匹配所有第偶数个子元素，第2个，第4个，第6个...
:nth-child(3n+1) 匹配所有第3n+1个元素，第4个，第7个，第10个...
:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:only-child 匹配仅有的一个子元素
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd) 匹配所有第奇数个指定类型子元素
:nth-of-type(even) 匹配所有第偶数个指定类型子元素
:nth-of-type(3n+1) 匹配所有第3n+1个指定类型子元素
:first-of-type 匹配第一个指定类型子元素
:last-of-type 匹配最后一个指定类型子元素
:only-of-type 匹配仅有的一个指定类型子元素
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符
8.动作选择器
<div class='main'>
<img src='./test.jpg' />
</div>
{
/*当鼠标移动到.main div时，img发生一些变化*/
.main::hover img {
/*一些操作*/
}
}
9.animation动画
keyframes 关键帧
<div class="rect"></div>
/*由左边20%移动到右边80%*/
.rect {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
animation: mymove 2s infinite;
}
@keyframes mymove {
from { top:0; left: 20% }
to { top:0; left: 80%; }
}
/* 环绕一周 */
.rect {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
animation: mymove 2s infinite;
}
@keyframes mymove {
0% { top:0; left: 20% }
25% { top:0; left: 80%; }
50% { top:80%; left: 80%; }
75% { top:80%; left: 20%; }
100% { top:0; left: 20%; }
}
animation属性
{
animation-name: mymove; /*动画名称，关键帧名称*/
animation-duration: 3s; /*动画持续时间*/
animation-timing-function: ease; /*动画效果，与transition相应效果相同*/
animation-delay: .2s; /*延迟时间*/
animation-iteration-count: 2; /*动画执行次数，infinite为无限执行*/
animation-direction: alternate; /*动画执行方向，normal为正常方向，alternate为反向执行：一次正向一次反向，当仅执行一次时，只执行正向*/
/*animation-fill-mode, 默认为none*/
/*forwards: 当动画完成后，保持最后一个属性值(在最后一个关键帧中定义)*/
/*backwards: 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值(在第一个关键帧中定义)*/
/*both: 向前和向后填充模式都被应用*/
animation-fill-mode: none;
/*简写方式*/
animation: name duration timing-function delay iteration-count direction fill-mode;
}
animation实现spinner
<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.spinner {
width: 60px;
height: 60px;
margin: 100px auto;
}
.spinner div {
width: 6px;
height: 100%;
background-color: #34fa40;
display: inline-block;
animation: loading 1.2s infinite ease-in-out;
}
.spinner div:nth-child(2) {
animation-delay: -1.1s;
}
.spinner div:nth-child(3) {
animation-delay: -1.0s;
}
.spinner div:nth-child(4) {
animation-delay: -0.9s;
}
.spinner div:nth-child(5) {
animation-delay: -0.8s;
}
@keyframes loading {
0%, 40%, 100% { transform: scaleY(0.4); }
20% { transform: scaleY(1.0); }
}
10.text-shadow字体阴影
{
text-shadow: 1px 1px 1px red; /*x轴偏移量，y轴偏移量，阴影大小，阴影颜色*/
}
/* 发光 */
.font1 {
color: white;
text-shadow: 0px 0px 20px red;
}
/* 内嵌 */
.font2 {
color: black;
text-shadow: 0px 1px 1px white;
}
/* 3D ，阴影一点一点偏移形成3D效果*/
.font3 {
color: white;
text-shadow: 1px 1px rgba(147, 240, 248, 0.8),
2px 2px rgba(147, 240, 248, 0.8),
3px 3px rgba(147, 240, 248, 0.8),
4px 4px rgba(147, 240, 248, 0.8);
}
11.text-overflow
/*超出部分直接剪切*/
{
overflow: hidden;
text-overflow: clip;
}
/*超出部分使用...代替*/
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
12.媒体查询
不同设备应用不同CSS
<link rel="stylesheet" href="./style.css">
/*style.css内容*/
@import url(comman.css); /*应用到所有设备类型*/
@import url(screen.css) screen; /*应用到屏幕设备*/
@import url(print.css) print; /*应用到打印设备*/
13.实现左固定右自适应布局及顶部一行固定右固定宽度左自适应布局
左固定右自适应：
float实现：
注意浮动的div一定要放在前面，因为float会导致元素脱离文档流，放到后面会使浮动元素浮动到下一行
<style type="text/css">
.box1 {
background-color: red;
width: 100px;
height: 100px;
float: left;
}
.box2 {
background-color: green;
height: 100px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
flex实现：
注意固定宽度元素一定要设置flex-shrink属性，否则会随屏幕变小随之变小
<style type="text/css">
.box {
display: flex;
border: 1px solid black;
height: 100px;
}
.box1 {
background-color: red;
width: 100px;
flex-shrink: 0;
}
.box2 {
background-color: green;
width: 100%;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
定位实现：
注意绝对定位元素的CSS属性right: 0，是实现右侧自适应的重点
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
.box1 {
background-color: red;
height: 100px;
width: 100px;
}
.box2 {
background-color: green;
position: absolute;
height: 100px;
left: 100px;
right: 0; /*实现自适应重点*/
top: 0;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
顶部一行固定右固定宽度左自适应布局：
使用float实现
<style>
* {
margin: 0;
padding: 0;
}
/* 顶部一行固定，使用fixed */
.outer1 {
width: 100%;
height: 100px;
background: red;
position: fixed;
top: 0;
left: 0;
}
.outer2 {
/* 由于上面一行设置了fixed定位，脱离了文档流，
因此需要设置margin-top，否则下面内容会顶到顶部，
覆盖fixed定位的一行 */
margin-top: 100px;
}
/* float元素要放在前面，否则由于其脱离文档流，第一个
非float块级元素会单独占一行，其会被挤到下一行 */
.inner1{
height: 100px;
float: right;
width: 200px;
background: green;
}
.inner2{
height: 100px;
/* 右侧有浮动元素，因此需要设置margin-right避开浮动元素 */
margin-right: 200px;
background: blue;
}
</style>
<body>
<div class="outer1"></div>
<div class="outer2">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
使用flex布局实现
<style>
* {
margin: 0;
padding: 0;
}
/* 顶部一行固定，使用fixed */
.outer1 {
width: 100%;
height: 100px;
background: red;
position: fixed;
top: 0;
left: 0;
}
.outer2 {
/* 由于上面一行设置了fixed定位，脱离了文档流，
因此需要设置margin-top，否则下面内容会顶到顶部，
覆盖fixed定位的一行 */
margin-top: 100px;
display:flex;
height: 100px;
}
.inner1{
/* 宽度为100%，但有其他元素且不换行时，会随之缩放，
由于没有设置flex-shrink属性为0，因此会自适应 */
width: 100%;
background: blue;
}
.inner2{
width: 200px;
/* 设置不允许缩放，实现固定宽度 */
flex-shrink: 0;
background: green;
}
</style>
<body>
<div class="outer1"></div>
<div class="outer2">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
使用absolute绝对定位实现
<style>
* {
margin: 0;
padding: 0;
}
/* 顶部一行固定，使用fixed */
.outer1 {
width: 100%;
height: 100px;
background: red;
position: fixed;
top: 0;
left: 0;
}
.outer2 {
/* 由于上面一行设置了fixed定位，脱离了文档流，
因此需要设置margin-top，否则下面内容会顶到顶部，
覆盖fixed定位的一行 */
margin-top: 100px;
/* 默认为static，但子元素绝对定位会相对第一个定位不为static的父元素定位，
因此要使子元素相对父元素绝对定位，父元素position不能为static */
position: relative;
}
.inner1{
height: 100px;
position: absolute;
/* left:0, right:右侧元素宽度，
实现元素占据除右侧元素外其余空间，自适应 */
left: 0;
right: 200px;
background: blue;
}
.inner2{
height: 100px;
width: 200px;
/* 只能使用absolute，而不能使用relative，
因为前面元素设置absolute已经脱离文档流，
如果设置为relative，此时元素会相对文档流正常位置定位，而正常位置在窗口左侧；
而设置为absolute，就是相对父级元素定位，right为0会出现在父元素右侧 */
position: absolute;
right: 0;
background: green;
}
</style>
<body>
<div class="outer1"></div>
<div class="outer2">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
14.padding
padding百分比是按照宽度确定的，要实现高度为宽度的一半，可不设置高度，将padding设置为{padding: 0 25%}，将box撑起来。
当含有margin时，box宽度不等于视口宽度，此时设置padding的百分比是按照视口宽度确定的，因此高度不等于box宽度的一半，而等于视口宽度的一半。此时可在内部添加一个div，将文字放到此div内，设置高度为0，然后再利用padding将高度撑起来。
实现元素A垂直水平居中，字体20px，宽度自适应，高度为宽度一半：
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw; /*宽度设置为视口宽度100%*/
height: 100vh; /*高度设置为视口高度100%*/
}
.out {
margin: 0 10px;
background: red;
font-size: 20px;
width: 100%;
text-align: center;
}
.inner {
height: 0;
padding: 25% 0;
}
</style>
<body>
<div class="out">
<div class="inner">A</div>
</div>
</body>
15.position
position取值：
- static: 默认值，文档流中正常定位
- relative: 相对定位，相对元素在文档流正常位置定位
- absolute: 绝对定位，相对具有static定位以外的距离最近的父元素
- fixed: 固定定位，相对于浏览器窗口
- inherit: 继承其父元素定位
- sticky: 当窗口滚动到该元素后，该元素将在指定位置悬浮不同(类似于此时使用fixed定位)；比如指定top:50px，当滚动到该元素后，该元素将悬停在距离其父元素顶部50px位置
16.reflow(回流)与repaint(重绘)
reflow：当布局发生变化时，如一个元素的显示与隐藏，边距，大小发生变化等，都会引起浏览器的回流
repaint：当布局未发生变化，但元素的一些属性发生变化时，如背景颜色，字体颜色，边框颜色等发生变化时，会引起重绘
17.box-sizing
三种取值：content-box(默认)|border-box|inherit
content-box: 宽高只包含内容，不包含内边距与边框
border-box: 宽高包括内容，内边距与边框
inherit: 从父元素继承box-sizing属性
18.权重计算
!important > 内联样式 > id选择器 > 类选择器=伪类选择器=属性选择器 > 标签选择器=伪元素选择器 > 通配符 > 继承
内联: 1000
id: 0100
类选择器: 0010
标签: 0001
通配符: 0000
继承: 没有权重
注意： 1000 > 0,99,99,99 因为比较是从左往右，逐个比较的，前一级相等才会比较下一级
19.伪类的n是从1开始计算的
:nth-child(n) 选定第n个子元素，但是是从1开始数，父元素下第1个子元素，n就为1，而不是0
20.flex布局
flex容器属性
1. flex-direction
- row 主轴为水平方向，起点在左端，默认值
- column 主轴为垂直方向，起点在上端
- row-reverse 主轴为水平方向，起点在右端
- column-reverse 主轴为垂直方向，起点在下端
2. flex-wrap
- nowrap 不换行，即使子元素宽度相加超出100%，也不会换行，默认值
- wrap 换行，当一行无法容纳所有子元素时会自动换行
- wrap-reverse 反向换行，但第一行会在最下面，最后一行在最上面
3. flex-flow
- <flex-direction> || <flex-wrap> flex-direction和flex-wrap简写形式
4.justify-content
与主轴方向有关，默认水平方向主轴，从左至右
- flex-start 左对齐，默认值
- flex-end 右对齐
- center 居中对齐
- space-between 所有子元素之间间隔相同
- space-around 所有子元素两侧间隔相同，因此子元素间的间隔是子元素与边框间隔的2倍
5.align-items
与交叉轴方向有关，假设交叉轴垂直方向，由上至下
- flex-start 顶部对齐
- flex-end 底部对齐
- center 中心对齐
- baseline 文字第一行基线对齐
- stretch 当子元素未设置高度或高度为auto时，会拉满(所有元素拉至当前行最高子元素高度)
6.align-content
多根轴线对齐方式，如果只有一根轴线，该属性不起作用
- flex-start 与交叉轴的起点对齐
- flex-end 与交叉轴的终点对齐
- center 与交叉轴的中心点对齐
- space-between 两端对齐，多根轴线之间间距平分
- space-around 轴线两侧间距相同，因此轴线之间间距是轴线与两侧间距的2倍
- stretch 若子元素未设置高度，或高度auto，则填满交叉轴线，默认值
flex子元素属性
1.order
- integer 取值为整数值，取值越小，元素越靠前，默认为0
2.flex-grow
- integer 取值为整数值，默认值为0，即存在剩余空间也不放大；若所有元素均设置为1，则将平分剩余空间；若所有元素均不为0且均不相等，则将按照该值的比例分配剩余空间。
3.flex-shrink
- interger 取值为1或0，默认值为1，即当空间不足时将默认缩小；若有一个子元素设置为0，其余为1，则空间不足时，其余子元素均缩小，而该子元素不缩小。
4.flex-basis
- <length> | auto 默认值为auto，它决定了主轴在分配剩余空间之前，元素占据的主轴空间。主轴将根据该值计算是否有剩余空间。也可以设置为固定值，如350px，但即使设置为固定值，若未设置flex-shrink属性为0，当空间不足时，该元素也会随之缩小。
5.flex
- <flex-grow> || <flex-shrink> || <flex-basis> 缩写形式，默认值为0 1 auto。
该属性有两个快捷值：
- auto: 1 1 auto 自动放大和缩小
- none: 0 0 auto 不放大也不缩小，当元素宽度设置为固定值时，宽度将不随窗口大小变化而发生变化
推荐优先使用该简写属性而不是三个分开属性，因为浏览器会推算相关值
5.align-self
允许某元素修改自己的对齐方式，覆盖align-items的值
取值为：flex-start | flex-end | center | baseline | stretch
21. BFC规则及触发条件
BFC就相当于一个封闭的盒子，里面的元素不会影响外部布局，反之，外部元素也不会影响盒子里面的元素布局
规则：
- 当父级元素触发BFC时，里面的浮动元素高度也会被计算。
- BFC区域不会与float元素发生重叠；非浮动元素触发BFC时，不会覆盖浮动元素，因为浮动元素也是一个BFC，两个封闭的盒子不会相互覆盖。
- 父级元素触发BFC时，子元素的margin不会再传递给父级元素；相当于把父级元素盒子给封上了，子元素的margin将相对于父元素边缘计算；当父级元素未触发BFC时，相当于盒子没封上，子元素的margin相对于更外层的边缘计算。
- 两个BFC之间的margin不会重叠；同一个BFC内的块级元素之间的margin会重叠。
触发条件：
- 元素的overflow不为visiable
- 元素的float属性不为none
- 元素的position属性不为relative或static
- 元素的display属性值为table-caption，table-cell或inline-block
BFC应用场景
- float属性引发父级元素高度塌陷时，可以通过父级元素触发BFC清除浮动，这是因为BFC内部浮动元素也会参与高度计算
- 利用浮动元素设置固定宽度，非浮动元素触发BFC，从而不与浮动元素发生重叠，实现左固定右自适应或右固定左自适应布局
- 当不希望margin传递时，可以触发父级元素BFC；当不希望兄弟元素间margin重叠时，可以使兄弟元素均触发BFC
22.水平垂直居中
使用绝对定位absolute，margin:auto实现：
<style>
html, body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
background: red;
}
</style>
<body>
<div class="box">
</div>
使用绝对定位absolute，transform实现
<style>
html, body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: red;
}
</style>
<body>
<div class="box">
</div>
</body>
使用flex布局实现
<style>
html, body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
background: red;
}
</style>
<body>
<div class="box">
</div>
</body>
