CSS常用的一些属性

最新推荐文章于 2023-05-15 11:16:38 发布

小白6402

最新推荐文章于 2023-05-15 11:16:38 发布

阅读量590

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/nihaio25/article/details/125310203

版权

本人从GitHub整理的一些说比较常用重要的CSS属性哈，它写的比较多，我就把一些比较复杂，不怎么用到的删掉了，留下那些相对于我来说比较常用的。

position

position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。

static
relative
fixed
absolute
sticky

下面就依次介绍这五个值。

static 属性值

static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。

这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为“正常的页面流”（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。

注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。

relative，absolute，fixed

relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。

这三种定位都不会对其他元素的位置产生影响，即不管有没有这个元素，其他元素的位置不变，因此元素之间可能产生重叠。

relative 属性值

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。

它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

absolute 属性值

absolute表示，相对于祖先元素（一般是父元素）进行偏移，即定位基点通常是父元素。

它有一个重要的限制条件：父元素不能是static定位，否则定位基点会移到最近一个非static定位的祖先元素。如果所有祖先元素都是static定位，定位基点就变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

注意，absolute定位的元素会被“正常页面流”忽略，即在“正常页面流”中，该元素所占空间为零，周边元素不受影响。

fixed 属性值

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。

div {
  position: fixed;
  top: 0;
}

上面代码中，div元素始终在视口顶部，不随网页滚动而变化。

sticky 属性值

sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。

因此，它能够形成“动态固定”的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。

页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。

sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生“动态固定”的效果。原因是这四个属性用来定义“偏移距离”，浏览器把它当作sticky的生效门槛。

z-index

z-index表示元素重叠时的层次关系。这个值越高，对应的元素就在越上层。所有元素的默认z-index是0。

由于静态布局的元素不会产生重叠，所以该属性对静态元素无效。只有元素是非静态布局（即position属性的值不是static），z-index属性才有意义。如果没有设置z-index，元素重叠时，HTML 代码中越后面出现的元素在越上层。

变形

transform命令用于元素的变形，它有多种设置。

transform: scaleX(-1);

上面命令设置元素的x坐标沿水平轴翻转，y坐标不变。scaleX(-1)会起到水平翻转的效果。

CSS的单位

大多数 CSS 属性默认继承它的父元素的设定，但是有一些属性默认不继承。比如，input元素和textarea元素的 CSS 属性，都是不继承父元素的。这时，可以强制它们继承。

* {
  font-family: inherit;
  line-height: inherit;
  color: inherit;
}

html {
  font-size: 125%;
  font-family: sans-serif;
  line-height: 1.5;
  color: #222;
}

上面代码中，首先强制所有元素的font-family、line-height和color属性都继承父元素，然后在网页的根元素html上设置具体的值。

em

em是一种相对单位，1em等于当前元素的font-size。一般来说，浏览器默认的字体大小是16像素，所以1em默认等于16像素。

h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */

上面代码中，对于h1元素，1em相当于20px；对于p元素，1em相当于16px。

如果当前元素没有指定字体的像素大小，那么1em等于父元素字体的像素大小。这一点非常重要，务必牢记。

html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2 = 32px */

上面代码中，h1元素的字体大小是2em，但是它没有指定像素字体大小，因此2em等于2倍的父元素像素字体大小，也就是32px。

em的一大好处是，很容易保持不同元素之间的比例关系，因此它比像素单位更合适用来设定字体大小。

html { font-size: 100%; }
h1 { font-size: 2em; }
p { font-size: 1em; }

上面代码中，h1的字体大小就是p的2倍。

整个网页的字体大小，如果全部使用em单位，不使用像素单位，会引发一个问题。em将会基于父元素计算，从而出现累积效应。

html { font-size: 100%; } /* 默认是 16px */
div { font-size: 2em; } /* 字体大小 32px */
p { font-size: 1em; } /* 字体大小 32px */

上面代码中，html是div的父元素，所以div的1em是基于html计算的，因此2em字体大小等于32px。另一方面，div是p的父元素，所以p的1em实际上也是32px。

除了字体大小，其他许多属性也可以使用em，比如margin和padding，相当于间接由font-size决定。

.header {
  font-size: 16px;
  padding: 0.5em 0.75em; /* 相当于 8px 12px */
  background: #7F7CFF;
}

上面代码中，.header元素的字体大小是16px，因此1em等于16px，所以padding就相当于8px 12px。

这里比较混淆的是，如果font-size也使用em，两者的计算基点是不一样的。

h1 {
  font-size: 2em; /* 1em = 16px */
  padding： 1em;  /* 1em = 32px */
}

上面代码中，font-size是基于父元素计算的，如果父元素的字体大小是16px，那么font-size就是32px；padding是基于font-size计算的，由于h1的font-size是32px，所以padding就是32px。

由于以上的累积效应和计算基点差异的原因，造成em不容易精确控制，实际开发中往往改用rem。

rem

rem单位与em几乎完全一致，只有一个差异，它总是等于根元素<html>的font-size大小，与当前元素或父元素的设置无关，这就避免了em的缺陷。

h1 {
  font-size: 2rem; /* 1rem = 16px */
  margin-bottom: 1rem;
}

p {
  font-size: 1rem; /* 1rem = 16px */
  margin-bottom: 1rem;
}

上面代码中，不管<h1>和<p>在什么位置，1rem的大小总是不变的。

那么，何时使用rem，何时使用em呢？一个规则是字体大小font-size属性使用rem，其他必须等比例缩放的属性使用em。下面是一个例子。

button {
  font-size: 0.875rem;
  padding: .5em 1em;
  border: .125em solid #e3e3e3;
  @media (min-width: 48rem){ /* min-width: 768px */
    font-size: 1.125rem;
  }
  @media (min-width: 62rem){ /* min-width: 992px */
    font-size: 1.375rem;
  }
}

上面代码中，随着屏幕宽度的变化，字体大小会跟着改变，padding和border会始终保持比例关系。

vh，vw

vh表示百分之一的浏览器视口高度，vw表示百分之一的浏览器视口宽度。每当视口的高度和宽度发生变化，它们就会自动重新计算。

html { font-size: 3vw; }

上面代码中，如果视口宽度增加，字体大小也会增加；视口宽度减小，字体大小也会减小。但是，如果宽度太小（比如320px），这样算出来的字体会太小（3px）；如果宽度太大（比如1440px），字体又会太大（43px）。因此，可以考虑使用calc函数。

html { font-size: calc(18px + 0.25vw); }

vmin，vmax

vmin表示vh与vw之中较短的那个单位，vmax则表示较长的那个单位。

一般来说，PC的屏幕是屏宽大于屏高，手机的屏幕是屏高大于屏宽。所以，很可能会出现，某一个区域在PC屏幕中宽度较小，在手机屏幕中宽度较大。这时，这两个单位就可以派上用处了。

h1 {
  font-size: 20vmin;
}

注意，上面的h1使用vmin单位时，当宽屏设备的视口宽度缩小时，它的字体大小是不变的，因为视口的高度没有改变。

ch

ch表示多少个字符。

width: 40ch;

上面代码表示宽度为40个字符。

calc()

calc方法用于计算值，常用于两种不同的单位之间的计算（比如百分比和绝对长度）。

实例1。每行放置4张图片，可以采用如下的代码。

img {
  float: left;
  width: calc(25% - 20px);
  margin: 10px;
}

实例2。动态排列图片，可以配合media query。


img {
  float: left;
  margin: 10px;
  width: calc(100% * 1 / 4 - 20px);
}

@media (max-width: 900px) {
  img {
    width: calc(100% * 1 / 3 - 20px);
  }
}

@media (max-width: 600px) {
  img {
    width: calc(100% * 1 / 2 - 20px);
  }
}

@media (max-width: 400px) {
  img {
    width: calc(100% - 20px);
  }
}

attr()

attr()用于读取网页元素的属性值。

div[data-line]:after { 
	content: "[line " attr(data-line) "]"; 
}

图像处理

filter

filter命令支持以下函数。

url()：使用svg滤镜
blur()：高斯模糊
brightness()：亮度
contrast()：对比度
drop-shadow()：阴影
grayscale()：灰度
hue-rotate()：色调旋转
invert()：色调分离
opacity()：透明
saturate()：饱和度
sepia()：加入褐色色调

filter: saturate(200%);
filter: sepia(100%);
filter: opacity(50%);
filter: url(resources.svg#c1);
filter: blur(5px);
filter: invert(100%);
filter: hue-rotate(90deg);
filter: brightness(0.5);
filter: contrast(200%);
filter: grayscale(50%);
filter: grayscale(0.5) blur(10px);
filter: drop-shadow(16px 16px 10px black);

字体

字体文件类型

内嵌OpenType（Embedded OpenType，.eot）。在使用@font-face时，Internet Explorer 8及之前的版本仅支持内嵌OpenType。内嵌OpenType是Microsoft的一项专有格式，它使用数字版权管理技术防止在未经许可的情况下使用字体。

font-size

font-size属性用于设置网页的字体大小。

下面是设置网页根字体大小的例子。

:root {
  font-size: 16px;
}

/* 也可以针对 html 元素设置
html {
  font-size: 16px;
}

然后，每个一级区块的font-size采用rem单位，内部属性使用em单位。这时，em的大小是基于rem设置的。

button {
    font-size: 0.875rem;
    // All the internal/external value use in 'em'
    // This value use of your "font-size" as the basic font size
    // And you will not have any problem with the font size of the container ( Example bottom )
    padding: .5em 1em;
    border: .125em solid #e3e3e3;
    @media (min-width: 48rem){ // min-width: 768px
      font-size: 1.125rem;
    }
    @media (min-width: 62rem){ // min-width: 992px
      font-size: 1.375rem;
    }
}

font-smoothing

font-smooth属性主要用于控制浏览器对字体的渲染。比如，下面的设置可以减少字体渲染出现锯齿。

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

font-display

有时，样式表指定的字体需要下载（称为 web font），font-display属性用于控制浏览器在下载字体时的渲染行为。

@font-face {
  font-family: 'my-font';
  font-display: optional;
  src: url(my-font.woff2) format('woff2');
}

display 属性

display: none;会从文档流移除该元素及其子元素，仿佛它们是不存在的。它们占据的空间会释放出来。

display: inline;产生行内元素，没有自己的高度和宽度，由容器决定，前后不会产生换行。

display: block;产生块级元素，会占据一行，占满容器的宽度。

display: list-item;将元素渲染为一个列表项，行首产生一个列表标记，可以用list-style定制样式。

display: inline-block;产生行内的块级元素，有自己的高和宽，但是前后不会产生换行。

表格相关的设置

table 对应<table>元素
table-header-group 对应<thead>
table-row 对应<tr>
table-cell 对应<td>
table-row-group 对应<tbody>
table-footer-group 对应<tfoot>
table-column-group 对应<colgroup>
table-column 对应<col>
table-caption 对应<caption>
inline-table 将一个表格渲染具有inline-block的形式

表格显示

div {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}

flexbox

display: flexbox;是一维布局，定义沿着一根直线的布局。这根直线可以折行。

grid

display: grid;是二维布局。

direction

direction命令指定元素的排列方向，默认是从左到右ltr，可以设置为从右到左rtl。


direction: rtl;

CSS 动画

timer

linear：线性运行，各个时刻速度都一样。
ease: 快速加速，然后逐渐减速，CSS 的默认值。
ease-in：逐渐加速，结尾时变快，适用于退出页面显示的元素。
ease-out：开始时速度最快，然后逐渐慢下来，适用于进入页面显示的元素。
ease-in-out：主键加速然后变慢，与ease相似，但开始时加速较慢，适合那些在页面有着明确开始和结束的动画。

transition

transition属性定义元素状态变化的过渡。

transition: [*property] [*transition-duration] [transition-timing-function] [transition-delay];

transition属性一共有四个参数。

*property：元素的哪一个 CSS 属性需要过渡效果，该参数必需。
*transition-duration：过渡效果的持续时间，该参数必需。
transition-timing-function：定时函数，默认是ease。
transition-delay：过渡从多少秒以后开始，默认是0。

/*1*/ transition: background-color 2s;
/*2*/ transition: background-color 2s 0.5s;
/*3*/ transition: background-color 2s ease-in;
/*4*/ transition: background-color 2s ease-out 0.5s;
/*5*/ transition: background-color 2s, height 1s ease-in-out;
/*6*/ transition: all 1s ease-out;

animation

animation属性用来指定元素的动画效果。

animation: [*animation-name] [*animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

*animation-name：关键帧的名字，该参数必需。
*animation-duration：动画持续的时间，该参数必需。
animation-timing-function：定时器函数，默认是ease。
animation-delay：动画效果多少秒后开始，默认为0。
animation-iteration-count：动画重复的次数，可以指定为一个整数，表示多少次，默认值是infinite关键字，表示无限次。
animation-direction：动画方向，可能的值为forward、backward或alternating，默认值为normal。
animation-fill-mode：默认值为none。
animation-play-state：动画默认是否生效，默认值为running。

@keyframes bounce {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
.ball {
  animation: bounce 2s infinite;
}

keyframes

首先，需要使用keyframes定义一个动画。

keyframes rotation {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(450deg);
  }
}

上面代码中，keyframes关键字后面是动画名称（上例是rotation），大括号内部是关键帧，from表示起始帧，to表示结束帧，其他帧由浏览器自动计算出来。

另一种定义方法是使用百分比，定义关键帧，from就是0%，to就是100%。

@keyframes color {
  0% {
    fill: #99002f
  }
  50% {
    fill: #ffc426
  }
  100% {
    fill: #99002f
  }
}

使用的时候，通过animation属性将动画赋给指定元素即可。

.second {
  animation: rotation 60s steps(60) infinite;
  transform-origin: 100% 50%;
}

自定义属性

CSS 提供的属性（比如font-weight、line-height）都是标准给定的，但是 CSS 也允许用户自定义属性，这又称为“CSS 变量”。

自定义属性跟普通属性一样，也是定义在某个选择器里面，而且只对该选择器有效。因此自定义属性所在区块，相当于变量的作用域。

:root选择器之中，可以设置全局的自定义属性。

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

变量也可以在行内定义。

<html style = "--color: red;">

所有自定义属性都必须以两个连词线开头，并且大小写敏感。

使用时，通过var()函数取出变量。

img {
  padding: var(--spacing);
  background: var(--base);
  -webkit-filter: blur(var(--blur));
  filter: blur(var(--blur));
}

var()函数接受第二个参数，指定默认值。如果某个自定义属性没有设置，默认值就会生效。

width: var(--custom-width, 20%);

下面是另一个例子。

foo {
  padding: var(--gutter, 10px 0 0 5px);
}

如果默认值包含逗号，那么var()会将第一个逗号后面的所有值，当作默认值。

.someElement {
  font-family: var(--main-font, "lucida grande" , tahoma, Arial);
}

上面代码中，--main-font的默认值是"lucida grande" , tahoma, Arial。

var()内部还可以使用var()。

.someElement {
  background-color: var(--first-color, var(--second-color, white));
}

上面代码中，如果没有设置--first-color，默认值var(--second-color, white)就会生效。如果--second-color也没有设置，那么white就会生效。

自定义属性可以是全局的，也可以是局部的。在:root选择器里面定义的，就是全局变量，可以在任何其他选择器里面读取。而在其他选择器里面定义，就是局部变量，只能在该选择器里面读取。

属性选择器

[attribute] 匹配指定属性，不论具体值是什么
[attribute="value"] 完全匹配指定属性值
[attribute~="value"] 属性值是以空格分隔的多个单词，其中有一个完全匹配指定值
[attribute|="value"] 属性值以value-打头
[attribute^="value"] 属性值以value开头，value为完整的单词或单词的一部分
[attribute$="value"] 属性值以value结尾，value为完整的单词或单词的一部分
[attribute*="value"] 属性值为指定值的子字符串

修饰符

属性修饰器支持i修饰符，表示不区分大小写。

[class=foo i] {
  color: red;
}

上面代码中，属性名foo后面的i，表示不区分foo的大小写，所以下面几个 class 都会匹配。

<div class="foo">...</div>
<div class="Foo">...</div>
<div class="fOo">...</div>

伪类选择器

伪元素（pseudo-element）是 HTML 中并不存在的元素。例如，定义第一个字母或第一行文字时，并未在HTML中作相应的标记。

伪类（pseudo-class）是浏览器根据网页元素的状态，自动提供的 CSS 类，无需在 HTML 代码显式标记这些类。例如，使用:first-child可以选择某元素的第一个子元素，你就不用写成class=“first-child”。更多关于伪类的内容。

伪元素有四个。

::first-line
::first-letter
::before
::after

伪类

:first-child
:link：新的、未访问的链接
:visited：访问过的链接
:focus：链接获得焦点（如通过Tab键）
:hover：当访问者将鼠标指针停留在链接上时
:active: 当访问者激活链接时
:empty：空选择器

新的、未访问的链接显示为红色；访问过的链接变为橙色；

常见操作

响应式布局：media query

响应式布局（responsive）的含义是，网页会根据不同的媒介，自动采用不同的 CSS 规则。它主要通过 media 命令实现。

media命令用来规定 CSS 规则生效的媒介。@media命令后面使用关键词，指定生效的条件。

@media print {
   …
}

@media screen {
   …
}

上面代码中，打印和显示屏分别使用不同的 CSS 规则。

媒介名称之前，还可以使用not和only关键字。

@media not screen {
   …
}

@media only screen {
   …
}

@media还允许使用表达式，指定 CSS 生效的条件。表达式可以放在圆括号之中。

@media (min-width: 800px) {
  p {
    font-size: 18px;
  }
}

上面代码中，media命令规定，只有在屏幕宽度大于等于800px时，p元素的大小才等于18px。

如果同时需要满足多个条件，可以使用and关键字。下面的例子是为不同的设备指定不同的背景图片。

/* default is desktop image */
.someElement { background-image: url(sunset.jpg); }

@media only screen and (max-width : 1024px) {
  .someElement { background-image: url(sunset-small.jpg); }
}

下面是另一个例子。

.component__header {
  font-size: 2rem;
  @media (min-width: 1200px) {
    font-size: 3rem
  }
}

@media only screen
  and (max-width : 603px)
  and (max-height : 966px) {
  /* Styles here */
}

垂直置中

（1）方法一

原理：子元素的 top, right, bottom, left, margin, and padding属性，针对的是父元素的维度；transform针对的子元素本身的维度。

父元素、子元素需有明确高度，不能是auto。


.children{
	background: #ffdb4c;
	height: 300px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

（2）方法二


.parent { position: relative; }

.child {
    position: absolute;

    left: 50%;
    top: 50%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

（3）方法三

.parent { display: table; }

.child {
  display: table-cell;
  vertical-align: middle;
}

（5）行内置中

.parent { line-height: 500px; }

.child {
    display: inline-block;
    vertical-align: middle;
}

（6）方法四（只对图片有效）

.thumb {
  background-image: url(my-img.jpg);
  background-position: center;
  /* is this supported by IE8? I don't know */
  background-size: cover;

  height: 0;
  overflow: hidden;
  padding-bottom: 50%;
  width: 50%;
}

（7）方法五

.children {
  margin-top: calc(50% - 12.5%);
}

（8）方法六

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

清理浮动


.clearfix:after{
  visibility:hidden;
  display:block;
  font-size:0;
  content:" ";
  clear:both;
  height:0;
}

.clearfix{
  zoom:1; /* for IE6 IE7 */
}