CSS基础汇总

CSS

1. 选择器

1. 标签选择器

   通过标签名找标签（把指定的样式应用到某一个、组、类标签上）

2. id选择器

   通过id属性值找标签，关键符号#id值{样式}

3. 复合选择器

   1、并列选择器：关键符号，用法：选择器1，选择器2{样式}

   2、后代选择器：符号空格，用法：选择器1空格选择器2

   3、属性选择器：选择器[属性=属性值]{样式}

   4、筛选：用法：选择器class选择器

   选择器的优先级：1、内联

   　　　　　　　　2、id选择器

   　　　　　　　 3、class选择器

   　　　　　　　　4、标签选择器

   　　　　　　　　5、通用选择器

2. 文字

1、有关字体的设置: 1.font-family:

字体的设置，其中需要注意的是一般我们会设置一到多个不同的字体，应包含多个字体确保在 不同浏览器、操作系统上的兼容性，以想用的字体开始，以通用系列字体结束；如果一个字体名称由多个单词组成的话，必须使用双引号 " ",字体的设置需要注意先后顺序。多个字体间用都逗号分隔开。

2.字体样式： ​ font-style：指定斜体文本

font-style有三个值：normal（正常显示）、italic（文本以斜体显示）、oblique（文本为倾斜，与italic相似，但支持较少）

font-weight：指定字体的粗细

属性值；normal、blod（加粗）

font-variant：字体变体

可以看作是小型大写字母，比原始大写字母字体小

属性值：small-caps、normal

3.字体大小 ​ 1.font-size: ​ (1)使用px

可以看作是小型大写字母，比原始大写字母字体小

(2)使用em设置字体大小（仍然是使用font-size）

1em等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

(3)百分比与em结合使用 ​ (4)vw:可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（"viewport width"）。

文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放。

2.font：属性简写

注意：font-size和 font-family的值是必需的。如果缺少其他值之一，则会使用其默认值。

所有CSS字体属性：

2、有关文字格式的几个元素以及属性设置： 1.text-align属性：（水平对齐方式）

center、right、left、justify（两端对齐）

2.vertical-align属性：（可设置图片等垂直对齐方式）

middle、bottom（默认）、top

3.文本方向：

direction、Unicode-bidi

例：

p{
    direction:rtl;
    unicode-bidi:bidi-override;
}

//这样可以使文字往左书写（反向）

3、文字的装饰： 1.text-decoration

有四个属性：none（常用在超链接中使文字不带下划线）、overline（上划线）、line-through（删除线）、underline（下划线）

注:建议不要在非链接目标下添加文本的下划线，以免文章内容显示较为混乱。

4、字母的大小写转换： text-transform

有三个属性：uppercase（大写）、lowercase（全小写）、capitalize（首字母大写）

5、文字间距： text-indent：

用于指定文本第一行的缩进，属性值：num px；可正可负。可以理解为首行缩进或悬挂缩进

letter-spacing：

文本中字符的间距，同样可正可负。

word-spacing：

文本中单词之间的间距，同样可正可负

line-height：

用于指定行之间的间距（行间距），属性值也是可正可负。

white-space：

指定元素内部空白的处理方式，属性值：nowrap；可以起到禁用元素内的文本换行。

6、文本阴影： 1.text-shadow:()

CSS文本属性：

3. 盒子

1.盒子的组成：

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内 容）。会发现 margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则HTML 元素的内容。

2.盒子的大小：

盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性，然而默认情况下width和 height属性只是设置content（内容）部分的宽和高。盒子真正的宽和高按下面公式计算：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
​
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
​
也可以这么认为：
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
​
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

另外一种情况下，width和height属性设置的就是盒子的宽度和高度。盒子的宽度和高度的计算方式由box-sizing属性控制。

box-sizing属性值
​
content-box：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。
​
border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。
​
inherit：规定应从父元素继承box-sizing属性的值。

当box-sizing：content-box时，这种盒子模型成为标准盒子模型，当box-sizing: border-box时，这种盒子模型称为IE盒子模型。

3.盒子成分分析：

margin

margin，盒子的外边框，他是完全透明的，开发者只可以设置它的边距。

margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

1. margin-top：上边距

2. margin-buttom：下边距

3. margin-left：左边距

4. margin-right：右边距

可以直接使用简写属性margin同时设置四条边的宽度。

/*margin属性后只跟一个值，同时设置四条边的边距相等*/
margin: 10px;
/*margin属性后跟两个值，第一个值设置上下边距，第二个是设置左右边距*/
margin: 10px 20px;
/*margin属性后跟三个值，第一个值设置上边距，第二个是设置左右边距，第三个值设置下边距*/
margin: 10px 20px 30px;
/*margin属性后跟四个值，第一个值设置上边距，第二个是设置右边距，第三个值设置下边距，第四个值设置左边距*/
margin: 10px 20px 30px 40px;
​
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
​

padding

padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。

与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。

1. padding-top：上部填充

2. padding-bottom：下部填充

3. padding-left：左部填充

4. padding-right：右部填充

可以直接使用简写属性padding同时设置四条边的宽度。这一部分的用法与上面的margin类似，可以参考margin的四个实例。

border

border表示盒子的边界，它可以设置成可见的，样式多样的。

最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。

1. border-top：上边界

2. border-bottom：下边界

3. border-left：左边界

4. border-right：右边界

注：当border属性的色值不明确指定时，如border: 1px solid，边框颜色与当前元素的字体颜色color相同。

border例：

/*使用简写属性，同时设置四条边界，四条边界的宽度、样式和颜色都是一样的*/
border: 2px solid green;
/*下面的样式与上面的样式等价*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;

可以单独对每一条边进行样式设置之外，还可以分别对边界的宽度、样式和颜色进行设置（下面的属性会对四条边进行设置），同样可以使用简写属性border进行设置。

1. border-width：边界宽度

2. border-style：边界样式

3. border-color：边界颜色

border-sytle属性可取值：
​
    none：定义无边框。
    hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
    dotted：定义点状边框。在大多数浏览器中呈现为实线。
    dashed：定义虚线。在大多数浏览器中呈现为实线。
    solid：定义实线。
    double：定义双线。双线的宽度等于 border-width 的值。
    groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。
    ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。
    inset：定义 3D inset 边框。其效果取决于 border-color 的值。
    outset：定义 3D outset 边框。其效果取决于 border-color 的值。
    inherit：规定应该从父元素继承边框样式。

border例：

/*使用简写属性设置宽度、样式和颜色，同时作用于四条边*/
border: 2px dotted green;
/*下面的样式与上面的样式等价*/
border-width: 2px;
border-style: dotted;
border-color: green;

可以对单独一条边界单独设置宽度、样式或颜色。以上两组属性都可以作为下面属性的简写属性。

border-top-width：上边界宽度 ​ border-top-style：上边界样式 ​ border-top-color：上边界颜色 ​ border-bottom-width：下边界宽度 ​ border-bottom-style：下边界样式 ​ border-bottom-color：下边界颜色 ​ border-left-width：左边界宽度 ​ border-left-style：左边界样式 ​ border-left-color：左边界颜色 ​ border-right-width：右边界宽度 ​ border-right-style：右边界样式 ​ border-right-color：右边界颜色

border-image-repeat 该属性设置图片在边框的填充方式。值的个数可以是一个或两个，一个值时设置所有的边框，两个值时分别设置水平与垂直的边框。它具有下面的值：

stretch：拉伸图片以填充边框。 repeat：平铺图片以填充边框。 round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。 space：平铺图像 。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像） inherit：继承父级元素的计算值。

border-image-width 设置图形边界的宽度。当border-image-width的值大于border-width时，图形不会向margin方向扩展，而是会向padding和content方向扩展，覆盖。

border-image-width属性的值可以是长度或百分数，以及auto。值的个数为1-4个，其规则与margin、padding等属性的规则一致。

border-image-outset 该属性设置边框图像可超出边框盒的大小。讲的通俗一点，就是在图像和padding之间增加一些填充，将边框图像往外挤。它的值可以是长度或百分数，值的个数为1-4个，其规则与margin、padding等属性的规则一致。

盒子阴影 在盒子的组成成分之外，CSS3给盒子添加了阴影。盒子的阴影由box-shadow属性控制，阴影的轮廓与盒子边界border的轮廓一样。该属性的正规语法如下：

none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

inset：默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。 offset-x, offset-y：这是头两个长度值，用来设置阴影偏移量，相对于border外边线开始计算。offset-x 设置水平偏移量，如果是负值则阴影位于元素左边。offset-y 设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是0，那么阴影位于元素后面。这时如果设置了 blur-radius 或 spread-radius 则有模糊效果。 blur-radius：这是第三个长度值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。 spread-radius：这是第四个长度值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。 color：如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。

设置多个阴影时，使用逗号将每个阴影的值隔开。前面的阴影会在后面阴影之上，如果上层有透明度较低的部分，会与下层的颜色重叠，合成新颜色。例：

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* 多个阴影*/
box-shadow: 3px 3px red, -1em 0 0.4em olive, 5px 10px 5px 5px green;

/*全局关键字*/
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

4. 布局

布局就是控制元素位置、大小；常见布局有 标准流布、浮动布局、定位布局、弹性布局等。

1.标准布局：

“标准文档流”简称为“标准流”，默认按照文档的顺序从上到下，从左到右，遇块(块级元素)换行。

1.块级元素block，独占一行可以设置宽高，适用于垂直布局；

2.行内元素inline，与其他元素共享一行，不可以设置宽高，宽度由内容决定，适用于水平布局；（注：img是一个特殊的行内元素可设 置宽高） ​ 3.标准流的定位离不开两个属性margin & padding ，margin 影响相邻元素之间的距离，padding 影响边框和内容之间的空白区域； ​ 4.text-align 设置文本对齐方式，line-height 是行内元素用来调整行间距的，都可继承；（注：在一些安卓手机 line-height 会失效）

2.浮动布局：

float 浮动布局， 默认 none 关闭浮动，取 left/right 该元素就会向其容器元素的左/右边框平移，当碰到另外一个浮动的元素时停止平移，超出容器会自动换行，不可以继承。 （1）理解浮动 float存在多层结构布局里，可以理解为在原来页面上面多了一层放浮动的元素，但float只能左右移动不能上下移动。

• 脱离文档流，浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去，块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素；

• 行内元素不填充空位，有空隙就会插入；

• 不脱离文本流/不遮挡文本，有文字环绕效果；

（2）高度塌陷 当浮动元素高度超出容器元素的时候，容器高度不会自动拉伸来闭合浮动元素。

解决方法：

• 创建BFC给父元素设置 overflow 值为 visible 或 clip，为 auto、scroll、hidden

• 通过伪元素选择器给父元素后追加内容，清除浮动

 			div::after{
 	          content: "";/*在父元素和子元素之间加入空内容，把他们间隔开*/
 	          clear: both;
 	          display: block;
 			}

3.定位布局：

position 定位布局，有5个值，通过四个方向 top，right，bottom 和 left 决定元素位置。

1.static 静态定位（默认），不脱离文档流，不能使用left…定位，一般用margin定位。

2.relative 相对定位，不脱离文档流，根据本身的位置/当前元素所在位置进行定位。

3.fixed 固定定位，完全脱离文档流(浮起来)不占据屏幕空间，可以对文本进行遮挡（可与float的特性对比学习），根据浏览器视口定位。

4.absolute 绝对定位，完全脱离文档流，不占据屏幕空间，可以对文本进行遮挡，兄弟级的两个元素都设置绝对定位元素，会进行层级叠加，同时设置margin: 0 auto;失效，float不能使用，若父元素有定位属性relative或fixed或absolute，那么根据父元素进行定位，反之根据浏览器定位。

5.sticky 粘性定位，可以被认为是相对定位和固定定位的混合。

4.弹性布局(Flex)：

Flex 是 Flexible Box 的缩写，意为"弹性布局"，由容器和项目组成，容器为父元素，项目为容器成员这里是子元素。容器有两个轴线：主轴和交叉轴呈90度关系。容器通过容器属性控制项目在两个轴线之间的排列，项目通过项目属性控制自身顺序和大小。给父元素设置 display:flex 变成弹性盒子容器。 容器属性：

项目属性:

5. 动画

1.@keyframes规则

如果在@keyframes规则中指定了css样式，动画将在特定时间逐渐从当前样式更改为新样式。 要使动画生效，必须将动画绑定到某个元素。

例：下面的例子将 “example” 动画绑定到 < div > 元素。动画将持续 4 秒钟，同时将 < div > 元素的背景颜色从 “red” 逐渐改为 “yellow”。

 <style>
        /* 动画代码 */
        @keyframes example {
            from {
                background-color: red;
            }
            to {
                background-color: yellow;
            }
        }
        /* 向此元素应用动画效果 */
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            //动画名称
            animation-name: example;
            //动画持续四秒
            animation-duration: 4s;
        }
    </style>

注意：animation-duration属性定义需要多长时间才能完成动画，若未指定这个属性，则动画不会发生，因为默认值为0（0S）。

2.延迟动画-animation-delay

animation-delay 属性规定动画开始的延迟时间。

下面的例子在开始动画前有 2 秒的延迟：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  //动画时长
  animation-duration: 4s;
  // 这个属性规定动画开始的延迟时间
  animation-delay: 2s;
}
负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。
在下面的例子中，动画将开始播放，就好像它已经播放了 2 秒钟一样：
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

3.设置动画应运行多少次animation-iteration-count

animation-iteration-count 属性指定动画应运行的次数。

下面的例子在停止前把动画运行 3 次：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}
下面的例子使用值 "infinite" 使动画永远持续下去：
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

4.反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。 animation-direction 属性可接受以下值： 1，normal - 动画正常播放（向前）。默认值 2，reverse - 动画以反方向播放（向后） 3，alternate - 动画先向前播放，然后向后 4，alternate-reverse - 动画先向后播放，然后向前

下例将以相反的方向（向后）运行动画：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}
下面的例子使用值 "alternate" 使动画先向前运行，然后向后运行：
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}
下面的例子使用值 "alternate-reverse" 使动画先向后运行，然后向前运行：
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

5.指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。 animation-timing-function 属性可接受以下值： ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认） linear - 规定从开始到结束的速度相同的动画 ease-in - 规定慢速开始的动画 ease-out - 规定慢速结束的动画 ease-in-out - 指定开始和结束较慢的动画 cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

例：

下面这些例子展示了可以使用的一些不同速度曲线：
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

6.指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。 在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值： none - 默认值。动画在执行之前或之后不会对元素应用任何样式。 forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。 backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。 both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

下面的例子让 <div> 元素在动画结束时保留来自最后一个关键帧的样式值：
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
下面的例子在动画开始之前（在动画延迟期间）使 <div> 元素获得由第一个关键帧设置的样式值：
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}
下面的例子在动画开始之前使 <div> 元素获得第一个关键帧设置的样式值，以及在动画结束时保留最后一个关键帧的样式值：
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

7.动画简写属性（六种动画属性）

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
使用简写的 animation 属性也可以实现与上例相同的动画效果：
div {
  animation: example 5s linear 2s infinite alternate;
}

8.总结

CSS动画属性：