微信登录

其他属性 - @media (){} - 窗口适应

+

在此添加单个AI新笔记

css - css网站

🌐资源网站

导入 - CSS文件导入HTML

📦导入文件

导入 - CSS文件导入CSS文件 - @import

📂导入样式

选择器 - id、class、<标签>

单位 - 单位 - px、%、em、rem、vw、vh、 vmin、vmax

📏尺寸单位

单位 - 单位计算 - calc()

🧮计算函数

通用属性 - display:; - 框的类型

通用属性 - position:; - 定位

📍定位属性

通用属性 - float:left; - 浮动-俄罗斯方块

💧浮动属性

通用属性 - width:100%;width:auto;

📏宽度设置

通用属性 - margin: 0 auto; - 外边框-居中

🎯居中布局

通用属性 - border:2px solid #000; - 边框样式

🖌️边框样式

通用属性 - border-radius:20px; - 圆角

🟢圆角边框

通用属性 - padding:; - 内边框

通用属性 - color:#000000; - 文字颜色

🎨文字颜色

通用属性 - font-size: 12px; - 文字大小

🔤字号大小

通用属性 - -webkit-text-stroke:1px #00ffff; - 文字描边

🖍️文字描边

通用属性 - opacity:0.5; - 透明度

通用属性 - box-shadow: 1px 1px 1px #色号; - 盒子阴影

🌑阴影效果

通用属性 - text-shadow:1px 1px 1px #色号; - 文字阴影

✨文字阴影

通用属性 - background-image:#色号50; - 背景+渐变色

🌈渐变背景

通用属性 - background-color:#色号50; - 背景色+透明度

🎨背景颜色

通用属性 - z-index:; - 远近

🔝层叠顺序

通用属性 - transform: rotate(18deg); - 旋转

🔄旋转变换

a标签 - text-decoration: none; - 去掉下划线

🚫去除下划线

li标签 - list-style-type:none - 去掉点

✅列表样式

li标签 - display:inline横向

➡️横向排列

li标签 - background:url() - 加自定义图片

🖼️背景图片

li标签 - .bg:hover{} - 鼠标滑过变css

🖱️悬停效果

特殊效果 - 高度height等于width

⚖️宽高相等

其他属性 - cursor:pointer - 靠近鼠标加上小手

🖱️鼠标指针

其他属性 - keyframes - 动画

🎬关键帧动画

其他属性 - overflow:scroll; - 内容溢出设置

📜溢出控制

其他属性 - ::-webkit-scrollbar - 滚动条

全局变量 - root{} - --xx - var(--xx)

全局变量 - root{} - 主题一键切换

🎨主题切换

其他属性 - @media (){} - 窗口适应

📱媒体查询

bootstrap - 模板

🚀框架模板

其他属性 - @media (){} - 窗口适应

作用：窗口大小决定css样式

方式1

 /*手机*/
@media (max-width: 768px)
{
    .media1{
        width:400px;
    }
}
 /*平板*/
@media (min-width: 768px) and (max-width: 979px)
{
    .media1{
        width:400px;
    }
}
 /*PC*/
@media (min-width: 979px)
{
    .media1{
        width:400px;
    }
}

方式2

<style>
 /*手机*/
 @media screen and (max-width:600px){
     .box_2 {
         padding-top: 45px;
     }
 }
 /*平板*/
 @media screen and (min-width:600px) and (max-width:960px){
     .box_2 {
         padding-top: 45px;
     }
 }
 /*PC*/
 @media screen and (min-width:960px){
     .box_2 {
         padding-top: 45px;
     }
 }
    </style>