css
不要再inline元素里写block元素，会bug.
span的宽度决定于内容高度，直接给宽高没用的；span的高度由line-height间接决定；一个div里面包一个span,给span一个padding虽然可视高度有变化，但实际高度没变
block元素，能有多宽有多宽，永远不要写宽度100% 文档流高度决定高度；脱离文档流的内容高度不被计算到父元素里
inline-block模仿了span的宽度,而且只能让inline元素变成inline-block元素
有横向滚动条时，内联元素默认在第一屏显示
div的分层：background<border<div<float<内联子元素
overflow
溢出部分，默认是visible,隐藏hidden,滚动scroll,自动auto,超出了自己加滚动条，没超出就没有；
脱离文档流
position:absolute/fixed脱离文档流，所在的容器不会计算脱离内容的高度在内了
float:left也是脱离文档流。使用的时候必须给父元素添加class='clearfix'然后添加
.clearfix::after{
content:"";
display:block;
clear:both;
}
如果不添加，父元素的盒不会被撑起来因为脱离文档了，使用float布局时最后一个div最好不要设置宽度，否则页面会失去响应式,通常float也只是用来对付IE浏览器
盒模型
content-box:宽度只包括内容
border-box:宽度包含border 优先使用，因为更符合人类逻辑
我理解的就是当设置宽度或高度100px时，content-box=content=100px,而
border-box=border+padding+content=100px;但是如果没有指定padding和border两者没有区别
margin会合并
常用margin-left:auto多用于子元素，把中间空出来
两个相邻元素，当一个元素设置margin-bottom=30px;另一个元素设置margin-top=30px;这两个margin会合并！
display:inline-block时margin不会合并！但同时要设置宽度100%所以没用！
左右margin不会合并，若不想让上下两个margin合并，可以给相邻元素加一点东西，例如padding-to，有东西相隔就不会合并或overflow:hidden可以取消margin合并
重要知识点
当要做平均布局时，往往算好的尺寸在最后一个元素会BUG，这时候，给整个要平均布局的元素加一个父元素，并且给一个.father{margin-left:-12px}
不要把宽高写死为基本，若真要用可写min-width最小宽度
Flex
简写flex:1 分配空间比例用的
flex-content:
弹性盒模型display:flex常用布局flex记得给父元素,默认的div就是横着，跟文档里流没啥关系了，最后一个放不下时会挤扁其他盒，所以要自己控制是否折行，flex-wrap我理解的会往一个点看齐，通过这个点改变流向
子元素整体的布局的位置居中justify-content:center也可以说X轴居中
空间平均分布在中间，元素在两边： justify-content:space-between还有三个但一般不咋用，自行搜索
不确定高度情况下居中对齐align-items:flex-end
把空间放中间，上下顶着 align-content:space-between
flex-direction可以控制流动方向
flex-item:
选中元素可用order的大小给内容排序内容默认能有多窄有多窄
常用于导航栏设置头像和内容之间父元素设置多余空间给子元素能有多宽有多宽flex-grow:1 可以认为1为份数。若需要某个元素多分宽度，则选中元素并加上flex-grow:X
优先压缩谁flex-shrink:XX默认1一起变瘦，X=0不能变瘦X=其他看数大小
align-items:center子元素文字居中也可以说Y轴居中
Grid
这也是新出的一个css布局方式，大概使用是将网页分成网格状，然后看横竖的线决定元素大小
.container {
display: grid; //设置类型
grid-template-columns: 100px 100px 100px; //3行
grid-template-rows: 100px 100px 100px; //3列
}
.x{
grid-columns-start:1;
grid-columns-end:2;
grid-rows-start:1;
grid-rows-end:2;
}
position
这是将文档流浮起来
默认是:static。
浮起来：relativ 很少用来做位移z-index:1来展示谁高 配合Z一般是给absolute做父元素 。
相对定位：absolute，先给父元素一个position：relativ，再给自己position：absolute，这样才是相对父亲，它的位置在哪，得有个基准,也可以是元素的爷爷，相对谁给谁！它会针对于祖先元素最近的那个position：relativ。用了absolute必须要有个top和left!位置正好对就写0，否则会bug。
针对网页的视口：fixed，解释下页面的视口，就是这个浏览器看到的地方。父元素要有transform:scale(0.9)会有bug,使用场景在线发牌页面的两边的广告。手机端别用
这里特别注意一下，transform只针对块和和行块盒有效果，span这种元素没用的
粘在页面中：不知道咋解释百度position: sticky用在导航栏，始终钉在最上边;
bfc
在写代码过程中，可能遇到高度塌陷的问题，例如子元素浮起来，父元素塌陷等塌陷问题,其中任意都能解决
overflow: hidden;
position: absolute;
float: left;
display: inline-block;
伪元素也能解决，缺一不可
::after{
content:'';
display: block;
clear: both; //清除塌陷
}
rem、px、em、vh
这些都是css的尺寸单位
px 是像素，px 是一个我们经常在开发中使用的一个单元; 它表示在屏幕上展示的最小单元;不建议把高度写死的原因是在手机或者小屏幕上显示的高度都是一样的，会有bug
rem是一个相对HTML的字体尺寸，在设置好HTML字体尺寸后，1.5rem就是设置尺寸的1.5倍。更好的做响应式页面。
em是一个相对父元素的字体尺寸，相同两个子元素设置1em但 其父元素设font-size不一样导致子元素也不一样所以说是em这个单位是继承父元素的尺寸，开发组件时好适配一些。
% 是针对相对定位的父元素，position：absolute; 或者针对是视口position：fixed的单位
vh,vw是针对视窗，把电脑屏幕分成100分，50vh或50vw就是屏幕的一半
vmax，vmin是根据当前视口宽和高哪个大就是哪个作为依据分成100份 50vmax就是50份. vmin取小的值。使用场景 手机横屏后如果使用的是vhvw 宽度高度会格外不合适。而vmax和vmin可以解决横屏问题
@media的用法
1.媒体类型：
all:所有媒体（默认值）.
screen:彩色屏幕.
print:打印预览.
projection:手持设备.
tv:电视.
braille:盲文触觉设备.
embossed:盲文打印机.
speech:屏幕阅读器等发声设备.
tty:不适用像素的设备.
2.媒体属性:
width:浏览器窗口的尺寸（可加max min前缀）.
min-width:100px >=100px
max-width:100px <=100px
height:浏览器窗口的尺寸（可加max min前缀）.
device-width:设备独立像素（可加max min前缀）.
pc端:分辨率.
移动端:具体看机器的参数.
device-pixel-ratio:屏幕可见宽度与高度的比率/像素比（可加max min前缀，需要加-webkit前缀）.
pc端:1.
移动端:具体看机器的参数（DPR）.
orientation:portrait(竖屏) | landscape(横屏)
3.操作符，关键字（only,and,(, or),not）
only:和浏览器兼容性有关，老版本的浏览器只支持媒体类型，不支持带媒体属性的查询.
@media only screen and (min-width:800px){css-style规则}
@media screen and (min-width:800px){css-style规则}
在老款的浏览器下:
@media only --> 因为没有only这种设备,规则被忽略.
@media screen --> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询，执行相应的样式.
建议在每次抒写@media 媒体类型的时候带上only.
and:代表与的意思，一般用and来连接媒体类型和媒体属性.
类似JS里的&&.
or(,):和and相似.
对于所有的连接选项只要匹配成功一个就能应用规则.
类似JS里的||.
not:取反,类似JS里的!.
————————————————
版权声明：本文为CSDN博主「wll_blogs」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wll_web/article/details/103689528
总结：顺序不能反
@media (max-width: 767px) { ... col-xs-3... } { //<=767的设备 } 手机
@media (min-width: 768px) { ... col-sm-3... } { //>=768的设备 } 平板
@media (min-width: 992px) { ... col-md-3...} { //>=992的设备 } 电脑
@media (min-width: 1200px) { ... col-lg-3...} { //>=1200的设备 } 大显示器
即将解锁这种响应式宽度设置
@media (800px<width<=1200px) {
.text {
grid-template-columns: 1fr 1fr;
}
}
grid布局时，设置文本有几行
@media(max-width:900px){
.text{
grid-template-columns:1fr 1fr ;
}
}
@media(max-width:600px){
.text{
grid-template-columns:1fr ;
}
}
————————————————
版权声明：本文为CSDN博主「flyqingfei」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：blog.csdn.net/flyqingfei/…
照片响应式
<img
src="./image.png"
alt="图"
srcset=" 使用不同尺寸的图片路径
../image-1240.png 1240w,
../image-600.png 600w,
../image-300.png 300w
"
sizes="(max-width:400px)300px ,(max-width:900px)600px,1240px"
前边为图片可视宽度满足时后边的值指定图片宽度
/>
也可以用这种好理解~不同条件下调用不同的照片尺寸
<picture>
<source media="(max-width:400px)" srcset="../image-300.png">
<source media="(max-width:900px)" srcset="../image-600.png">
<img src="../image-1240.png" alt="">
</picture>
无聊的知识 有点杂
box-shadow: inset 0 -5px 5px -5px fade-out(black, 0.5);input表单的背景颜色在下边边框有个渐变
图片溢出：vertical-align:middle;
border有时候会干扰宽度，outline不会；
margin:0 auto;用的时候当心覆盖别人，最好的办法 margin-left:auto,margin-left:auto
white-space:wrap阻止文字换行
opacity:0.5影响整个元素的背景色 与background：rgba()的区别，一个是颜色淡化，一个是整体元素包含字符串之类的
text-align:center;文字居中
-webkit-mask-image: linear-gradient(transparent,#000);# 蒙版效果-webkit-mask
突破12像素限制：一般浏览器默认字体尺寸12px也不能低于这个尺寸，受浏览器限制。正常情况下低于12没效果，解决方法：
font-size:12px //例如想要字体6像素 设置字体12px
transform:scale(0.5) //中心缩放0.5
transform:left centext //因为中心缩放所以会让盒居中
//如果是span多加一句： display：inline-block
在CSS中例如background等复合属性，F12后能够看到background这一项是个小箭头复合属性，有许多默认属性，当心被后边写的css覆盖
强制换行 **注意：** 设置强制将英文单词断行，需要将行内元素设置为块级元素。
word-break:break-all;
flex: 1 0 0 ;
flex-grow: 1;flex-basis: 0;两个代码效果一样 平均分配空间
font-family: inherit;继承父元素的字体样式
flex-shrink: 0;用来固定元素不被挤压
目前手机端大部分滑动事件都是webkit 取消滚动条
::-webkit-scrollbar {
display: none;
}
控制滚动条出现之前显示高度：先设置一行高度，再设置高度
line-height: 32px;
height: calc(32px * 12);
SVG
SVG是矢量图，看不到锯齿的所以，放大1000倍都可以，它不是字体，color改变不了颜色，fill可以改变，之前有一段代码可以批量删除SVG默认颜色，好像写在别的文章里了：vue - 掘金 (juejin.cn)
Vue-3中遇到：在设置SVG时，总会有图片加载，解决办法：在页面第一次进入时就加载全部的页面，有个插件Vue3中级指南-如何在vite中使用svg图标 - 掘金 (juejin.cn)
移动端的痛苦
在移动端 因为手机屏幕的尺寸差异，css很难抉择，正好看到一个方法，先用js获得屏幕的最大宽度，然后÷10缩小一点，然后用对应的rem来最为单位 更好响应。但rem总要经常的换算，又想到通过函数算好后拼接字符串的形式，这样就能按照正常尺寸写css了附加代码:
//获取屏幕宽度的js
let Width= window.innerWidth
document.write('<style>html{font-size:'+Width+'px;}</style>')
function px(px){
return px/$designWidth*10 +rem;
}
$designWidth=640 //设计稿的宽度
width:px(320)//css中使用
通过css实现点击侧导航栏到指定区域
设置好侧边的a链接 给a链接href:#+id //#是锚点 id是元素id 但是效果很生硬，所以再加一个：
scroll-behavior: smooth;
实现滚动条滑动
页面变灰
一般加到最上边 style属性上
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
