CSS 一样平常开辟常用属性总结

CSS 一样平常开辟常用属性总结

一、 常用 CSS 属性

1、结构相干

（1）display：

• block：元素占据一行，左右排列。
  
• inline：元素在一行内排列，不能设置宽高。
  
• inline-block：团结了 block 和 inline 的特性。
  
• flex：弹性盒子结构，适合响应式计划。
  
• grid：网格结构，适合复杂的二维 layouts。
  
• none：隐蔽元素，但空间保存。
  

（2）position：

• static：默认值，元素在正常文档流中。
  
• relative：相对定位，参照自身位置。
  
• absolute：绝对定位，参照近来的绝对定位先人。
  
• fixed：固定定位，相对于视口。
  
• sticky：粘性定位，团结了 relative 和 fixed。
  

（3）float：

• left 或 right：元素漂浮到指定方向。
  
• none：取消浮动。
  

（4）clear：

• both：清除两边的浮动影响。
  
• left 或 right：分别清除浮动。
  

2、尺寸与溢出

（1）width 和 height：

• 设置元素的宽度和高度。
  
• 可以利用百分数（%）、像素（px）或视口单位（vw、vh）。
  

（2）max-width 和 max-height：

设置元素的最大宽度和高度。
（3）overflow：

• hidden：隐蔽溢出内容。
  
• scroll：显示滚动条。
  
• auto：自动显示滚动条。
  
• visible：显示溢出内容。
  

3、文本样式

（1）color：

• 设置文本颜色。
  
• 可以利用颜色名称、十六进制（#RRGGBB）或 RGB 值。
  

（2）font-size：

• 设置字体大小。
  
• 常用单位：px、em、rem。
  

（3）font-weight：

• 设置字体粗细。
  
• 常见值：400、700、bold（700）。
  

（4）text-align：

• 文本对齐方式：left、right、center、justify。
  

（5）text-decoration：

• 添加装饰效果：如 underline（下划线）、none（消除链接的默认下划线）。
  

4、背景与边框

（1）background-color：

• 设置背景颜色。
  
• 可以是颜色名称、十六进制或 RGB 值。
  

（2）background-image：

• 设置背景图片。
  
• 可以多个图片叠加，利用逗号分隔。
  
• 
  

（3）background-repeat：

• repeat：平铺。
  
• no-repeat：不平铺。
  
• repeat-x：只横向平铺。
  
• repeat-y：只纵向平铺。
  

（4）background-position：

• 设置背景图片的位置。
  
• 可以是像素值或百分比。
  

（5）background：

• 简写属性，综合以上多个背景相干属性。
  

（6）border：

• 简写属性，用于设置边框的宽度、样式和颜色。
  
• 示例：border: 1px solid #333;
  

（7）border-radius：

• 设置边框圆角。
  
• 示例：border-radius: 5px; 或 50%（圆形）。
  

5、盒模子

（1）padding：

• 设置内边距。
  
• 简写或分开设置：padding-top、padding-right 等。
  

（2）margin：

• 设置外边距。
  
• 简写或分开设置：margin-top、margin-right 等。
  

（3）box-sizing：

• content-box：默认，尺寸不包罗 padding 和 border。
  
• border-box：尺寸包罗 padding 和 border。
  

6、图像处置惩罚

（1）object-fit：

• fill：填充整个容器，可能变形。
  
• contain：保持比例，适应容器。
  
• cover：填充容器，保持比例，不显示完整图像。
  

（2）object-position：

• 设置图像在容器中的位置。
  

7、动画与过渡

（1）transition：

• 简写属性，用于设置过渡效果。
  
• 示例：transition: all 0.3s ease;
  

（2）animation：

• 简写属性，用于设置动画。
  
• 示例：animation: slide 3s infinitealternate;
  

（3）keyframes：

定义动画的具体步调：

1. @keyframes slide {
2.   from { transform: translateX(0); }
3.   to { transform: translateX(100px); }
4. }

复制代码

二、常用 CSS 本领

1、响应式计划

（1）@media 媒体查询：

根据不同设备或屏幕尺寸应用不同的样式。

1. @media (max-width: 768px) {
2.   body {
3.     font-size: 14px;
4.   }
5. }

复制代码

（2）视口单位：

• vw：视口宽度的百分比。
  
• vh：视口高度的百分比。
  
• 示例：width: 50vw;
  

（3）Flexbox 和 Grid：

• 弹性盒子和网格结构，适合响应式计划。
  

2、居中结构

（1） 水平居中：

1. .container {
2.   width: 600px;
3.   margin: 0 auto;
4. }

复制代码

（2）垂直居中：

1. .container {
2.   display: flex;
3.   align-items: center;
4.   justify-content: center;
5.   height: 100vh;
6. }

复制代码

3、Hover 效果

（1）hover 状态：

1. .button:hover {
2.   background-color: #333;
3.   color: white;
4. }

复制代码

（2）::after 和 ::beforeseudo-elements：

1. .tooltip:hover::after {
2.   content: '这是一个提示';
3.   position: absolute;
4.   top: 100%;
5.   left: 50%;
6.   transform: translateX(-50%);
7. }

复制代码

4、视觉优化

（1）阴影效果：

1. .card {
2.   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
3. }

复制代码

（2）圆角边框：

1. .button {
2.   border-radius: 5px;
3. }

复制代码

（3）文字阴影：

1. .title {
2.   text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
3. }

复制代码

5、CSS 预处置惩罚器

（1）Sass/SCSS 和 Less：

支持变量、嵌套、模块化等功能，提高代码可维护性。
示例：Sass 变量。

1. $primary-color: #333;
2. .button {
3.   background-color: $primary-color;
4. }

复制代码

（2）PostCSS：

通过插件提供更多功能，如自动增补浏览器前缀。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。