微信登录

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

+

在此添加单个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 - 模板

🚀框架模板

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

作用：调节内边框

padding 内边框

xxx.css文件

.xxx{
    padding:10px;全部
    padding:10px 5px;上下 左右
    padding:10px 5px 15px;上 右左 下
    padding:10px 5px 10px 5px;上 右 下 左
}
.xxx{
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

chrome浏览器 - 右键 - 检查 - 点击一个页面元素可以在样式看见padding情况
padding
内边框在不同标签会有少许差别，文字标签演示会比较清晰
text演示padding
图片展示上左下右10px累加的一个事例

padding解释

xxx.css文件

.xxx{
  padding-top: 10px;上
  padding-right: 10px;右
  padding-bottom: 10px;下
  padding-left: 10px;左
}