css笔记专栏

yourana123

已于 2023-11-21 15:03:55 修改

阅读量109

点赞数

文章标签： css

于 2022-07-06 16:52:13 首次发布

本文链接：https://blog.csdn.net/yourana123/article/details/125643244

版权

绘制虚线 border-bottom: 1px dashed #ccc;

滚动吸附
在父元素中：sccroll-snap-type: 参数1(吸附方向：x,y) 参数2(强制吸附或者附件 mandatory, proximity)
在子元素中：吸附对齐方式 sccroll-snap-algin: start center end
是否停止 sccroll-snap-stop: always

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格
例如：width: calc(100% - 10px)

隐藏过长的文字 overflow: hidden; text-overflow: ellipsis;

background-posrion 背景位置
boder-collapse:cliiapse 合并边框

:nth-child(n)选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:nth-child(n)选择器</title>
		<style>
			/* 
			 :nth-child(n)选择器用于匹配父元素索引为n的子元素，即选取属于其父元素的第N个子元素，不论元素的类型。
			 n可以是数字、关键词（Odd 和 even）或公式。
			 */
			/* p:nth-child(2) {
				background: pink;
			} */
		</style>
	</head>
	<body>
		<p>第一个段落。</p>
		<p>第二个段落。</p>
		<p>第三个段落。</p>
	</body>
</html>

嵌套块元素塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有外边距，此时父元素会塌陷较大的的外边距值。
解决方案:
可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加overflow.hidden。

box-shadow 盒子阴影

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术

画三角形

box{
width: 0;
height: 0;
boder-left(方位)-color：颜色；
boder: 大小px solid transparent(透明)
}

伪元素：不存在在DOM文档中，是虚拟的元素，是创建新元素。
伪类：用于已有元素处于某种状态时为其添加对应的样式，但是通过DOM树又无法表示这种状态，就可以通过伪类来为其添加样式。

伪类和伪元素的最大区别就在于有没有创建一个文档树以外的元素。伪元素创建了一个文档树以外的元素（虚拟容器）并为他添加样式，这个容器不包含任何DOM元素但是可以包含内容。换句话说伪类和伪元素的区别就是

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树以外的元素。
几种常见伪元素：
1）:frist-letter用于向文本中的第一个字母添加样式
2）:first-line向文本的首行添加样式
3）:before在元素之前添加内容
4）:after在元素之后添加内容
5）::selection：匹配选中部分的内容。可用的CSS属性为background,color。
伪元素的content属性填充伪元素的内容。

动态伪类 :link 未访问的链接 :visited 已访问的链接 :hover 鼠标移动到链接上 :active 选定的链接 :hover
用于当用户把鼠标移动到元素上面时的效果； :focus 用于元素成为焦点

动画

声明:
@keyframes 动画名称{
//动画开始
%0{}
//动画结束
%100{}
}
调用
div{
animation-name:动画名称
animation-duration:持续时间
}

弹性布局

display:flex
当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex父项的属性

flex-direction :设置主轴的方向

row ：默认再一行内排列
row-reverse：翻转横向排列（右对齐，从后往前排，最后一项排在最前面）
column：纵向排列
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面 row默认再一行内排列

justify-content:设置主轴上的子元素排列方式

flex-start：默认值从头部开始如果主轴是x轴，则从左到右
flex-end：从尾部开始排列
center：在主轴居中对齐(如果主轴是x轴则水平居中)
space-between：先两边贴边再平分剩余空间(重要)
space-around：平分剩余空间

align-items :设置侧轴上的子元素排列方式(单行)

flex-start：默认值从头部开始如果主轴是x轴，则从左到右
flex-end：从尾部开始排列
center：在主轴居中对齐(如果主轴是x轴则水平居中)
stretch（默认值）：拉伸（不能有height）

align-content :设置侧轴上的子元素的排列方式(多行，单行是没有效果的)

flex-start：默认值在侧轴的头部开始排列
flex-end：在侧轴的尾部开始排列
center：在侧轴中间显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头，再平分剩余空间
stretch：设置子项元素高度平分父元素高度

flex-wrap∶设置子元素是否换行

nowrap（默认）：不换行；
wrap：换行，第一行在上方；
wrap-reverse：换行，第一行在下方。

flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap

flex子项的属性

flex：表示占剩下空间的多少份数。
order：属性定义项目的排列顺序
align-self：控制子项自己在侧轴上的排列方式

scss
全局设置

:root {
  --main-color: #d04a02; // 界面主题颜色
  --main-text-color: #515a6e; // 文字主题颜色
  --mian-hover-text-color: #eb8c00; // 文字hover颜色
  --mian-aside-color: rgba(251, 249, 249, 1); // 导航栏背景颜色
  --components-button-color: rgb(255, 93, 24); // 自定义按钮样式
  --fontSize: 12px;  // 通用字体大小 -- 12px
  --fontSize-title: 14px;  // 标题字体大小 -- 14px
  --fontSize-important: 16px;  // 重要字体大小 -- 16px
}

使用

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

需要动态改变全局的设置的时候

//改变全局中的字体大小和颜色
function changeSystemStyle(systemStyle) {
  const { fontSize, primaryColor } = systemStyle;
  document.body.style.setProperty("--main-color", primaryColor);
  const f = parseInt(fontSize);
  const title = f + 2 + "px";//字体加大2个px
  const important = f + 4 + "px";//字体加大4个px
  document.body.style.setProperty("--main-fontSize", fontSize);
  document.body.style.setProperty("--mian-fontSize-title", title);
  document.body.style.setProperty(
    "--main-fontSize-important",
    important
  );
}