朋友们大家好，早中午晚安，这里是jsliang~本系列CSS文章：主要推广学以致用。结合面试题和工作实例，让小伙伴们深度体验61个常用CSS属性和各种CSS知识。主要是纯CSS。尽量使用HTML+CSS来完成学习目的，但是还有“一小部分”功能需要JavaScript知识，适合新手学习+高手复习。如果文章在某些细节上没有写清楚或误导读者，欢迎评论/吐槽/批评。您的点赞、收藏和关注是我更新的动力。更多知识分享文章可见：jsliang的文档库。可以看到Demo——allforone的前言是在2022.07左右，同办公室的前端朋友抱怨：我的CSS有点烂，要是能学一点提高就好了它。嘿！这不是学习思路吗？于是偷偷看了下自己项目中的121个CSS/Less文件，将里面的CSS属性全部提取出来。想直接分享出来，希望他看完能有所收获。报酬。事后想想，把知识点这么硬生生的扔出去毫无意义，显得很没意思！因此，结合“Tab滑动门”、“DropDown下拉面板”、“Flex布局”等工作实例，让小伙伴们更好的理解这些CSS属性的作用。如果文章在某些细节上写的不够清楚或者误导读者，欢迎评论/吐槽/批评，您的点赞、收藏和关注是我更新的动力个人分类进行了。如果下面的分类中有CSS属性，“我看过你的眼睛，那是你看不懂的代码”，请使用Ctrl+F搜索本文中该CSS属性的用法。这里只是做统计，协助jsliang统计哪些属性还没有写案例，或者让小伙伴们看看哪些属性不熟悉~在学习这些CSS属性的时候，推荐2个靠谱的网站：CanIuse-CSSCompatibilityMDN-IntroductiontoCSSProperties2.1影响元素尺寸[x]box-sizing计算元素尺寸的方法[x]widthwidth[]min-widthminimumwidth[x]max-widthmaximumwidth[x]heightheight[]min-heightminimumheight[]max-height最大高度[x]marginmargin[x]paddinginnermargin[x]borderborder2.2font[x]font-sizefontsize[x]font-weightfontfat[x]]font-style字体样式[]font-family字体类型2.3affectcolor[x]backgroundbackground[x]colorcolor[x]filterfilter[x]opacitytransparency2.4pseudoelement[x]::beforefirstchildelement[x]::afterthelastchildelement[x]content用于在元素的::before和::after伪元素中插入内容[x]::placeholder适用于,调整占位符样式2.5伪类[x]:hovermousehovereffect[]:activeelementactivestateeffect2.6elementselector[x]:first-childfirstelement[x]:last-childlastelement[x]:nth-childwhichnumber元素，可以用2n设置偶数个元素样式[]a>bsiblingelementselector[]a+bsiblingelementselector[x]a~bsiblingelementselector2.7positioning[x]position:absolute/fixed启用定位[x]left[x]right[x]top[x]bottom2.8elementsvisible[x]visibility:visible/hiddenvisuallyhidden[x]display:block/noneShowhideonDOMlevel[x]不透明度：1/0透明2.9Flex全家桶[x]display:flexFlexlayout[x]justify-contenthorizo??ntalorientationadjustment[x]align-itemsverticalorientationadjustment[x]flex-directionarrangementdirection[x]flex-shrinkFlex的是否element可以被挤压[]flex-growFlexelementgrowthitem[]flex-basisFlexelement起始位置2.10Other:Alphabeticalorder[x]animation动画[x]border-radius圆角[x]box-shadowshadow[x]calc()computedproperty[x]cursormousegesture[x]displaylayout[x]line-heightlineheight[x]linear-gradientcreateimagewithcolorgradient[x]:not()unspecifiedelement[x]outline轮廓属性,可用于input/a等属性[x]溢出滚动效果[x]溢出-x水平滚动效果[x]溢出-y垂直滚动效果[x]位置定位[x]指针-事件具体是否元素响应鼠标事件[x]text-align水平布局方法[x]text-overflow如何处理withoverflowingtext(...)[]text-indent块文本第一行的缩进[x]transitionstateswitchingtransitioneffect[x]transform旋转、缩放、倾斜或平移给定元素[x]transform-originstartposition[]vertical-align垂直布局方式[x]white-spaceprocesselementblank[x]z-indexlevel3初始化导航页面OK，话不多说，来折腾吧！新建一个code文件夹存放我们的项目代码：-code-index.html主页上的HTML主要用于导航，本来打算把ShadowDOM作为代码的公共部分不过想想，这样增加了精神负担，所以后续的代码会尽量简洁，讲解部分就只有关键代码了~（如果需要全部代码，可以去代码仓库或者网上代码平台看~)code/index.html
