likes
comments
collection
share

css知识点记录

作者站长头像
站长
· 阅读数 23

css杂谈

前言

今天主要在这里记录一下css里面的一些知识点，知识有点杂。只是发现自己在做项目的时候老是忘记，干脆把今天见到的一些样式给记录下来，以后忘记的时候可以时不时的看看！

重置样式

这是一整段重置样式的css文件，一个常用的“重置”或“标准化”样式表，目的就是消除浏览器的默认样式，确保我们的网页元素在不同的浏览器中具有一致的外观。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

单位

  • vh：100vh 100vw 占满100%的视口高度和宽度
  • em：em 是一个相对于其父元素字体大小的单位。如果一个元素的字体大小没有特别设置，默认通常是16px，那么1em就等于16px。
  • rem：rem 是相对于根元素（通常是<html>元素）的字体大小来计算的单位。这意味着，无论元素在DOM树中的嵌套有多深，1rem始终等于根元素的字体大小。
  • height: calc(100vh - 70px)：对高度进行运算

弹性布局

  • display：flex 设为弹性布局，使块级元素显示在同一行。
  • justify-content: xxxx 这个属性用于设置Flex容器中主轴（默认为水平方向）上的对齐方式。 后面可以设置为start左对齐，end右对齐，center居中对齐，space-between两端对齐，space-around平均分布
  • lign-items: xxx 这个属性控制Flex容器中交叉轴（如果主轴为默认的水平方向，就是垂直方向）上的对齐方式，有start，end
  • flex-direction 改变主轴方向，有row，column

颜色

  • background-color: rgba(255, 255, 255, 0.5)设置为半透明，最后一个参数是透明度
  • background-image:linear-gradient(to bottom,#fff,#44b0ee) 设置为渐变，第一个参数表示渐变方向，第二三个元素表示从某个颜色渐变到另一个颜色。

伪类...

  • :hover 鼠标移到上面的样式
  • :active 点击后的样式
  • :foucs 有焦点的样式
  • cursor: pointer 鼠标移到上面就是一只手

总结

以上是我今天遇到的一些css上的一些知识点，可能有点杂乱，可能对大佬来说也比较简单，但是对我个人来说，这样写一下文章还是加深了一些我对这个的记忆。以后我还会更新这里面的内容，把自己新见到的一些样式都更新到这里面。

转载自:https://juejin.cn/post/7388022210856632332
评论
请登录