css技术

🌈 选择器

div>p   所有父子级是div内的p元素
div+p   所有跟在div后面的第一个p元素
input[name]    选择所有input中带有name元素的
input:focus        焦点输入时
div:first-line     选择div第一行元素
div:before     在每个div前插入内容      content:"插入的文字";    //可改属性
div:after      在每个div后插入内容
::selection    选中文字时
nth-child(2)   选择父元素的第二个元素    
nth-child(odd)   每个奇数     
nth-child(even)  每个偶数

✅ 背景

background-color（背景颜色）
background-image:url（背景图片）
background-color: rgba(255, 255, 255,0.4)（外部透明内部不透明）
background-image: linear-gradient(#e66465, #9198e5)（从上到下颜色渐变）
background-image: linear-gradient(to right,#e66465, #9198e5)（从左到右渐变）
background-repeat: no-repeat;（背景图像不重复）
background-position（背景图片位置）
background-color:transparent（取消背景图片）

🚀 超链接

text-decoration:none;（取消超链接下划线）
text-decoration:underline;(显示超链接)
a:link{未访问过的链接}
a:visited（已访问过的链接）
a:hover（鼠标放在链接上时）
a:active（链接被点击的那一刻）
display: block（区域块）

📦 文本

text-transform:uppercase;（字母大写）
text-transform:lowercase;（字母小写）
text-transform:capitalize;（首字母大写）
letter-spacing（字符间距）
line-height（行间距）
word-spacing（空白间距）
text-align:center（居中对齐）
text-align:left（左对齐）
text-align:right（右对齐）
text-indent:2em（首行缩进两个字符）
font-weight（加粗）
font-family（字体）
font-size（字体大小）
font-weight（加粗

🔍 列表

list-style-type:none（取消项目符号）
display: inline列表横向
list-style-image: url('/#') （列表图像）

⚙️ 边框

border-style（dotted 点线、dashed 虚线、solid 实体）
border-color（边框颜色）、border-width（边框大小）
border-top-style:dotted;（单独边框）

🎯 边距

margin  外边距
padding  内边距

💡 表格

所有表格元素加边框，父子设 border-collapse:collapse;      //单边框
colspan      //横向合并
rowspan    //竖向合并

⚠️ 显示

display:block;  显示
display:none;  隐藏

✨ 定位

fixed（绝对定位）
absolute（移动后原来的位置不占空间
relative（移动后原来的位置占空间）
sticky（粘性定位）
static（默认定位）

🎉 布局Overflow

auto  多余内容滚动条显示 
hidden  多余内容自动裁剪 

overflow: hidden; /* 隐藏溢出内容 */  
text-overflow: ellipsis; /* 使用省略号表示溢出 */  
white-space: nowrap; /* 防止文本换行 */  
溢出内容自动转换为...代替

📱 浮动

display:float;  开启浮动
clear:both;  清除浮动 
overflow:hidden解决高度塌陷;

📊 鼠标样式

cursor：值
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
text	此光标指示文本。
wait	此光标指示程序正忙

🔒 过度

transition:width 2s；（transition:样式 时间）
transition: width 2s, height 2s;（多个样式）
transition:width 2s linear 2s;（延迟两秒）

🔧 动画

animation:名 10s — 在要改变的元素内设置 — +linear infinite normal（循环）

@keyframes 名
{
    时间 — 0%   {background:red}
	25%  {background:yellow;}
	50%  {background:blue;}
	100%  {background:green;} —可以是css样式
}

🔄 弹性盒子

父子层加入display: flex;
可以自己设置行数flex-wrap: wrap;
分配空间flex:1;
flex-direction:row/row-reverse/column/column-reverse
从左到右边、从右到左、从上到下、从下到上
justify-content:flex-end/center/flex-start/space-between
向右浮动、中间对齐、向左边浮动、左边右边中间分散开
align-items:flex-end/center
显示到底部、垂直居中
order:值
元素的排序

🔷 其他

阴影：box-shadow: 2px 2px 10px 1px black;（左、下、透明度、阴影大小）
盒子：box-sizing:border-box;  可以使一个区块忽略外内边距 
透明：opacity:0.5;
文本域禁止拖动： resize: none;  
圆角边框：border-radius
左下角边框圆角：border-bottom-left-radius;  
响应式图片：object-fit:cover;
响应式布局：
@media screen and (max-width: 810px) and (min-width: 1px) {

}

函数
设置宽或高：width: calc(100% - 10px);
变量css
:root{ --main-bg-color:coral; }
#div1{background-color:var(--main-bg-color); }