【前端】常用属性及实例

一、CSS 初始化

* {
    
	margin: 0; /* 外边距清零 */
	padding: 0; /* 内边距清零 */
	scroll-behavior: smooth; /* 页面添加平滑滚动效果 */
}
/* em 和 i 斜体的文字不倾斜 */
em, i {
    
	font-style: normal; 
}
/* 去掉 li 的小圆点 */
li {
    
	list-style: none; 
}
/* 解决图片底侧有空白缝隙的问题 */
img {
    
	vertical-align: middle; 
}
/* 取消 a 链接下划线 */
a {
    
	text-decoration: none;
}

---

二、css样式设置小技巧

1. 鼠标样式修改

button {
    cursor: pointer;  }

样式	解析
cursor: default;	默认
cursor: pointer;	小手
cursor: move;	移动
cursor: text;	文本
cursor: not-allowed;	禁止

2. 改变输入框光标颜色

🔰给表单元素设置 caret-color 样式，就可以改变光标颜色；
input { caret-color: cyan; }

3. 去掉输入框默认的边框

🔰给表单元素设置 outline 样式，就可以去掉默认的蓝色边框；
input { outline: none; }

4. 将文本域设置为不可拖拽

🔰给表单元素设置 resize 样式，就可以将文本域变为不可拖拽；
textatea { resize: none; }

4. 元素内容两端对齐

🔰给元素设置 text-align-last 样式，就可以使内容两端对齐；
text-align-last: justify;

5. 输入框提示文本样式设置

🔰给表单元素设置 input::placeholder 选择器，就可以对输入框提示文本进行样式设置；
input::placeholder {}

6. 改变表单组件的颜色

🔰给表单元素设置 accent-color 样式，就可以改变表单元素的颜色；
accent-color: cyan;

7. 给元素设置纵横比

🔰给元素设置 aspect-ratio 样式，就可以通过宽高比例设置元素的尺寸；
aspect-radio: 4/3;

8. 文本颜色渐变

/* 设置渐变色背景*/
background: linear-gradient(90deg, #fa709a, #fee140);
/* 此属性为背景裁剪，值为text代表，把背景按文字形状去裁剪。*/
-webkit-background-clip: text; 
/* 文本颜色为透明色*/
color: transparent;

9. 单行文字溢出显示省略号

/* 1. 先强制一行内显示文本*/
white-space: nowrap;
/* 2. 超出部分隐藏*/
overflow:hidden;
/* 3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;

10. 多行文字溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示*/
display: -webkit-box;
/* 限制在一个块级元素显示的文本行数*/
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient: vertical;

11. 禁止多次点击导致的文字选中

.targetDiv {
   
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

12. 网页置灰

利用css滤镜(filter)控制灰度(grayscale)：

html {
   
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);/*灰度*/
    filter: gray;
}

13. calc()：直接在CSS中进行计算

🔰使用calc()，你可以在样式表中直接进行计算，无需预先手动计算。
不使用calc()的示例：

使用calc()的示例：

通过calc()，你可以组合不同的度量单位，如百分比和像素，以实现更灵活和适应性强的设计。

14. fit-content()：根据内容调整宽度

🔰fit-content()允许你根据内容调整元素的宽度，但不超过指定的最大值。
不使用fit-content()的示例：

（在这种情况下，如果按钮文本很长，按钮会变得过长。）
使用fit-content()的示例：

使用fit-content()，按钮会根据文本大小调整，但永远不会超过200px宽。如果文本较短，按钮会更小。

15. 定义CSS可重用的值

🔰使用 –custom-properties 定义可重用的值，然后在整个 CSS 中使用它们！

:root {
   
  --main-color: #ff6347;
}
body {
   
  background-color: var(--main-color);
}

16. 固定在版心右侧位置

1. left: 50%;：走到浏览器可视区(也可以看做版心)的一半位置；
2. margin-life: 版心宽度的一半距离;：多走版心宽度的一半位置；

17. CSS 三角

🔰网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标；

.box {
    
       width: 0;
       height: 0;
       /*边框颜色设置为透明*/
       border: 50px solid transparent;
       border-top-color: pink;
   }

          

实例

18. 列宽自动调整

.card {
    
   columns: auto 8rem;
}

🔰这里的 columns 属性是一个简写属性，它结合了 column-width 和 column-count 这两个属性。
🔰auto 8rem 意味着列宽会自动调整，但最小宽度是 8rem。

---

三、 水平居中和水平垂直居中

1.水平居中

1）设置margin

<style>
	div {
     	
		margin: 0 auto;   
	}
</style>
<div></div>

2）设置相对定位

<style>
	div {
     	
		position: relative; /*相对定位*/
		left: 50%; /*往左移动父级宽度的一半*/
		transform: translateX(-50%); /*往右移动自身宽度的一半*/
	 }
</style>
<div></div>

2