程序员经验分享-hwhale

前端追梦人CSS教程

2023-11-15

一. 基础概念

1.1 什么是CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

1.2 语法

选择器 {
	color: blue;
  font-size: 12p;
}

1.3 选择器

根据规则选取页面中的dom元素, 包含以下选择器分类:

.class .intro 选择所有class=“intro”的元素 1
#id #firstname 选择所有id=“firstname”的元素 1
* * 选择所有元素 2
element p 选择所有元素 1
element,element div,p 选择所有元素和元素 1
element element div p 选择元素内的所有元素 1
element>element div>p 选择所有父级是元素的元素 2
element+element div+p 选择所有紧接着元素之后的元素 2
[attribute] [target] 选择所有带有target属性元素 2
[attribute=value] [target=-blank] 选择所有使用target=“-blank”的元素 2
[attribute~=value] [title~=flower] 选择标题属性包含单词”flower”的所有元素 2
[attribute =language] [lang =en]
:link a:link 选择所有未访问链接 1
:visited a:visited 选择所有访问过的链接 1
:active a:active 选择活动链接 1
:hover a:hover 选择鼠标在链接上面时 1
:focus input:focus 选择具有焦点的输入元素 2
:first-letter p:first-letter 选择每一个元素的第一个字母 1
:first-line p:first-line 选择每一个元素的第一行 1
:first-child p:first-child 指定只有当元素是其父级的第一个子级的样式。 2
:before p:before 在每个元素之前插入内容 2
:after p:after 在每个元素之后插入内容 2
:lang(language) p:lang(it) 选择一个lang属性的起始值=“it”的所有元素 2
element1~element2 p~ul 选择p元素之后的每一个ul元素 3
[attribute^=value] a[src^=“https”] 选择每一个src属性的值以”https”开头的元素 3
[attribute$=value] a[src$=“.pdf”] 选择每一个src属性的值以”.pdf”结尾的元素 3
[attribute*=value] a[src*=“axihe”] 选择每一个src属性的值包含子字符串”axihe”的元素 3
:first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素 3
:last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素 3
:only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素 3
:only-child p:only-child 选择每个p元素是其父级的唯一子元素 3
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 3
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 3
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 3
:last-child p:last-child 选择每个p元素是其父级的最后一个子级。 3
:root :root 选择文档的根元素 3
:empty p:empty 选择每个没有任何子级的p元素（包括文本节点） 3
:target #news:target 选择当前活动的#news元素（包含该锚名称的点击的URL） 3
:enabled input:enabled 选择每一个已启用的输入元素 3
:disabled input:disabled 选择每一个禁用的输入元素 3
:checked input:checked 选择每个选中的输入元素 3
:not(selector) :not§ 选择每个并非p元素的元素 3
::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分 3
:out-of-range :out-of-range 匹配值在指定区间之外的input元素 3
:in-range :in-range 匹配值在指定区间之内的input元素 3
:read-write :read-write 用于匹配可读及可写的元素 3
:read-only :read-only 用于匹配设置 “readonly”（只读） 属性的元素 3
:optional :optional 用于匹配可选的输入元素 3
:required :required 用于匹配设置了 “required” 属性的元素 3
:valid :valid 用于匹配输入值为合法的元素 3
:invalid :invalid 用于匹配输入值为非法的元素 3

1.4 插入样式表的方法

插入样式表的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

1.5 样式优先级

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

优先级逐级增加的选择器列表:

  • 通用选择器（*）
  • 元素(类型)选择器
  • 类选择器
  • 属性选择器
  • 伪类
  • ID 选择器
  • 内联样式

经验法则:

  • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
  • Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
  • Never 永远不要在全站范围的 css 上使用!important
  • Never 永远不要在你的插件中使用 !important

权重的计算

img

<html>
  <head>
    <style type="text/css">
        #redP p {
             /* 权值 = 100+1=101 */
             color:#F00;  /* 红色 */
        }
 
        #redP .red em {
             /* 权值 = 100+10+1=111 */
             color:#00F; /* 蓝色 */
 
        }
 
        #redP p span em {
             /* 权值 = 100+1+1+1=103 */
             color:#FF0;/*黄色*/
        }
    </style>
  </head>
  <body>
     <div id="redP">
        <p class="red">red
           <span><em>em red</em></span>
        </p>
        <p>red</p>
     </div>
  </body>
</html>

二. 常用属性

2.1 background

background的值的顺序是background-color，background-image，background-repeat，background-attachment，background-position,background-size。

如果用background-size,一定要用/分隔

定义背景效果

background 复合属性。设置对象的背景特性。 1
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。 1
background-color 设置或检索对象的背景颜色。 1
background-image 设置或检索对象的背景图像。 1
background-position 设置或检索对象的背景图像位置。必须先指定background-image属性。 1
background-repeat 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。 1
background-clip 指定对象的背景图像向外裁剪的区域。 3
background-origin S设置或检索对象的背景图像计算background-position时的参考原点(位置)。 3
background-size 检索或设置对象的背景图像的尺寸大小。 3

2.2 文本属性

color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

2.3 字体Font

2.3.1 CSS字形

Serif vs. Sans-serif

Scans-serif: 无衬线

Serif: 有称线

  • 通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
  • 特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）
Serif Times New Roman Georgia Serif字体中字符在行的末端拥有额外的装饰
Sans-serif Arial Verdana "Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace Courier New Lucida Console 所有的等宽字符具有相同的宽度

2.3.2 字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”

p{font-family:"Times New Roman", Times, serif;}

2.3.3 字体样式

  • 正常（normal） - 正常显示文本
  • 斜体(italic) - 以斜体字显示的文字
  • 倾斜的文字(oblique) - 文字向一边倾斜（和斜体非常类似，但不太支持）

2.3.4 字体大小

绝对大小：

  • 设置一个指定大小的文本
  • 不允许用户在所有浏览器中改变文本大小
  • 确定了输出的物理尺寸时绝对大小很有用

相对大小：

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器中改变文字大小
font 在一个声明中设置所有字体属性 1
font-family 规定文本的字体系列 1
font-size 规定文本的字体尺寸 1
font-style 规定文本的字体样式 1
font-variant 规定文本的字体样式 1
font-weight 规定字体的粗细 1
@font-face 一个规则，允许网站下载并使用其他超过”Web- safe”字体的字体 3
font-size-adjust 为元素规定 aspect 值 3
font-stretch 收缩或拉伸当前的字体系列 3

2.4 边框 (Border) 和 轮廓 (Outline)

border 复合属性。设置对象边框的特性。 1
border-bottom 复合属性。设置对象底部边框的特性。 1
border-bottom-color 设置或检索对象的底部边框颜色。 1
border-bottom-style 设置或检索对象的底部边框样式。 1
border-bottom-width 设置或检索对象的底部边框宽度。 1
border-color 置或检索对象的边框颜色。 1
border-left 复合属性。设置对象左边边框的特性。 1
border-left-color 设置或检索对象的左边边框颜色。 1
border-left-style 设置或检索对象的左边边框样式。 1
border-left-width 设置或检索对象的左边边框宽度。 1
border-right 复合属性。设置对象右边边框的特性。 1
border-right-color 设置或检索对象的右边边框颜色。 1
border-right-style 设置或检索对象的右边边框样式。 1
border-right-width 设置或检索对象的右边边框宽度。 1
border-style 设置或检索对象的边框样式。 1
border-top 复合属性。设置对象顶部边框的特性。 1
border-top-color 设置或检索对象的顶部边框颜色 1
border-top-style 设置或检索对象的顶部边框样式。 1
border-top-width 设置或检索对象的顶部边框宽度。 1
border-width 设置或检索对象的边框宽度。 1
outline 复合属性。设置或检索对象外的线条轮廓。 2
outline-color 设置或检索对象外的线条轮廓的颜色。 2
outline-style 设置或检索对象外的线条轮廓的样式。 2
outline-width 设置或检索对象外的线条轮廓的宽度。 2
border-bottom-left-radius 设置或检索对象的左下角圆角边框。 提供 2 个参数，2 个参数以空格分隔， 每个参数允许设置 1 个参数值， 第 1 个参数表示水平半径，第 2 个参数表示垂直半径， 如第 2 个参数省略，则默认等于第 1 个参数 3
border-bottom-right-radius 设置或检索对象的右下角圆角边框。 3
border-image 设置或检索对象的边框样式使用图像来填充。 3
border-image-outset 规定边框图像超过边框的量。 3
border-image-repeat 规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。 3
border-image-slice 规定图像边框的向内偏移。 3
border-image-source 规定要使用的图像，代替 border-style 属性中设置的边框样式。 3
border-image-width 规定图像边框的宽度。 3
border-radius 设置或检索对象使用圆角边框。 3
border-top-left-radius 定义左上角边框的形状。 3
border-top-right-radius 定义右上角边框的形状。 3
box-decoration-break 规定行内元素被折行 3
box-shadow 向方框添加一个或多个阴影。 3

2.5 动画属性

@keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。 3
animation 复合属性。检索或设置对象所应用的动画特效。 3
animation-name 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 3
animation-duration 检索或设置对象动画的持续时间 3
animation-timing-function 检索或设置对象动画的过渡类型 3
animation-delay 检索或设置对象动画的延迟时间 3
animation-iteration-count 检索或设置对象动画的循环次数 3
animation-direction 检索或设置对象动画在循环中是否反向运动 3
animation-play-state 检索或设置对象动画的状态 3

2.6 内边距

padding 在一个声明中设置所有填充属性 1
padding-bottom 设置元素的底填充 1
padding-left 设置元素的左填充 1
padding-right 设置元素的右填充 1
padding-top 设置元素的顶部填充 1

2.7 链接样式

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

顺序规则：

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

2.8 列表样式(ul)

CSS列表属性作用如下：

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

在HTML中，有两种类型的列表：

  • 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
  • 有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

2.8.1 作为列表项标记的图像

ul {
            list-style: disc inside url(http://img5.imgtn.bdimg.com/it/u=2916716554,654971401&fm=26&gp=0.jpg);
        }

2.8.2 所有的CSS列表属性

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

2.9 CSS Table(表格)

2.9.1 表格边框

table, th, td {
    border: 1px solid black;
}

2.9.2 折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

table{
    border-collapse:collapse;
}
table,th, td{
    border: 1px solid black;
}

2.9.3 表格宽度和高度

table 
{
    width:100%;
}
th
{
    height:50px;
}

2.9.4 表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左，右，或中心：

td {
    text-align:right;
}

垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

td {
    height:50px;
    vertical-align:bottom;
}

2.9.5 表格填充

td {
    padding:15px;
}

2.9.6 表格颜色

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

2.10 CSS 盒子模型

在HTML中的每个element(元素)都可以看作一个矩形的盒子，矩形从内到外依次由元素的内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。

在CSS的布局中，元素的矩形被称为"Box Model"，即盒子模型。在浏览器渲染页面时，盒子模型决定了元素的大小和位置。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hnrCsB3E-1604913788979)(https://a.axihe.com/img/css/box-model.gif)]

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

2.10.1 元素的宽度和高度

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

2.10.2 浏览器的兼容性问题

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

2.10.3 获取DOM元素宽高的属性

在DOM中，获取元素高宽有以下属性：clientWidth/clientHeight、offsetWidth/offsetHeight、scrollWidth/scrollHeight

clientWidth、clientHeight:

说明：包含内边距、内容区域的宽度、高度；若含有滚动条，将会减去滚动条的宽度、高度。

公式：

element.clientWidth = padding-left + width + padding-right
element.clientHeight = padding-top + height + padding-bottom

offsetWidth、offsetHeight:

说明：包含了边框、内边距、内容区域以及滚动条等范围的宽度、高度。

公式：

element.offsetWidth = border-left + padding-left + width + padding-right + border-right
element.offsetHeight = border-top + padding-top + height + padding-bottom + border-bottom

scrollWidth、scrollHeight

说明：与clientWidth、clientHeight类似(包含内边距、内容区域，但不包括滚动条)，不同的是scrollWidth、scrollHeight与元素的overflow样式属性息息相关：

当块级元素的内容超出元素大小时，其内容会根据overflow设定的值出现滚动条或内容溢出，scrollWidth、scrollHeight包含了这些不可见的内容区域。

2.10.4 box-sizing

属性值 属性含义
Content-box 说明：表示CSS中的width和height属性的值只会应用到元素的内容区域。将采用标准模式****解析计算，也是默认模式
Border-box 表示元素的边框和内边距的范围包含在CSS中的width、height内。将采用怪异模式进行计算

注意： 两种盒子模型都不将margin计算在内

2.10.5 jQuery中元素宽度(高度)

$(element).width()：获取元素content(内容)区域的宽度。若元素的含有 box-sizing: border-box ，会减去相应的padding、boder。

$(element).innerWidth()：获取元素 content区域 + padding 的宽度。

$(element).outerWidth()：获取元素 content区域 + padding + boder 的宽度。

$(element).outerWidth(true)：获取元素 content区域 + padding + boder + margin 的宽度。

2.11 CSS margin(外边距)

margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

2.11.1 CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

2.11.2 BFC

**Box：**CSS渲染的时候是以Box作为渲染的基本单位。Box的类型由元素的类型和display属性决定，box的类型分为block-level box 和inline-level box（不包括css3的时候）。不同类型的box参与不同类型的formatting context布局。

所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。

它是页面中的一块渲染区域，并且有一套渲染规则.
它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素，反之也如此。

1 内部的盒子会在垂直方向，一个个地放置；
  2 BFC是页面上的一个隔离的独立容器；
  3 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ；
  4 计算BFC的高度时，浮动元素也参与计算
  5 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
  6 BFC的区域不会与float重叠；

那么如何触发 BFC呢？只要元素满足下面任一条件即可触发 BFC 特性：

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

2.11.3 BFC的特性及应用

  1. 同一个 BFC下外边距 会发生折叠
<head>
.p {  
  width:200px;  
  height:50px;  
  margin:50px 0;  
  background-color:red;  
}  
</head>

<body>
   <div class="p"></div>  
   <div class="p"></div>  
</body>

盒子垂直方向的距离由margin决定，
属于 同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠
上文的例子 之所以发生外边距折叠，是因为他们 同属于 body这个根元素， 所以我们需要让 它们 不属于同一个BFC，就能避免外边距折叠：

<div class="p"></div>  

<div class="wrap">  
  <div class="p"></div>  
</div>  

wrap {  
  overflow:hidden;  

.p {  
  width:200px;  
  height:50px;  
  margin:50px 0;  
  background-color:red; 
  }

  1. BFC可以包含浮动的元素（清除浮动）

    <div style="border: 1px solid #000;">
    <div style="width: 50px; height: 50px; background: #eee;
               float: left;">
    </div>
</div>

    外层的div会无法包含 内部浮动的div，效果见下图：

    但如果我们 触发外部容器的BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部div容器就可以包裹着浮动元素，所以只要把代码修改如下：

    <div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

    就可以完成以下效果：
    tu2

    1. BFC可以阻止元素被浮动元素覆盖

      <div class="aside"></div>  
<div class="main"></div>  

div {  
  width:300px;  
}  
.aside {  
  width: 100px;  
  height: 150px;  
  float: left;  
  background: black;  
}  
.main {  
  height:200px;  
  background-color:red;  
}

之所以是这样，是因为上文的 规则5： 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

所以要想改变效果，使其互补干扰，就得利用规则6 ：BFC的区域不会与float重叠，
让 `` 也能触发BFC的性质，即：

.main {  
  overflow:hidden;  
  height:200px;  
  background-color:red;  
}

通过这种方法，就能 用来实现 两列的自适应布局。

2.13.4 IFC

Inline Formatting Contexts，也就是“内联格式化上下文”。

符合以下任一条件即会生成一个IFC

  • 块级元素中仅包含内联级别元素

形成条件非常简单，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC，这里不做过多介绍。

IFC布局规则

  • 子元素水平方向横向排列，并且垂直方向起点为元素顶部。
  • 子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
  • 在垂直方向上，子元素会以不同形式来对齐（vertical-align）
  • 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
  • IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
  • IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
  • 当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
  • 当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 oxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。

2.12 CSS padding（填充）

padding 使用简写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充

2.13 CSS 尺寸 (Dimension)

height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

2.14 CSS Display(显示) 与 Visibility（可见性）

隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

2.15 CSS里常见的块级元素和行内元素

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

内联元素（行内元素）内联元素(inline element)

  • a - 锚点
  • abbr - 缩写
  • acronym - 首字
  • b - 粗体(不推荐)
  • bdo - bidi override
  • big - 大字体
  • br - 换行
  • cite - 引用
  • code - 计算机代码(在引用源码的时候需要)
  • dfn - 定义字段
  • em - 强调
  • font - 字体设定(不推荐)
  • i - 斜体
  • img - 图片
  • input - 输入框
  • kbd - 定义键盘文本
  • label - 表格标签
  • q - 短引用
  • s - 中划线(不推荐)
  • samp - 定义范例计算机代码
  • select - 项目选择
  • small - 小字体文本
  • span - 常用内联容器，定义文本内区块
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • textarea - 多行文本输入框
  • tt - 电传文本
  • u - 下划线
  • var - 定义变量

块元素(block element)

  • address - 地址
  • blockquote - 块引用
  • center - 举中对齐块
  • dir - 目录列表
  • div - 常用块级容易，也是css layout的主要标签
  • dl - 定义列表
  • fieldset - form控制组
  • form - 交互表单
  • h1 - 大标题
  • h2 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • isindex - input prompt
  • menu - 菜单列表
  • noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
  • noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
  • ol - 排序表单
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表

可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。

  • applet - java applet
  • button - 按钮
  • del - 删除文本
  • iframe - inline frame
  • ins - 插入的文本
  • map - 图片区块(map)
  • object - object对象
  • script - 客户端脚本

2.16 CSS Position(定位)

2.16.1 定位类型

position 属性的五个值：

  • static HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

    静态定位的元素不会受到 top, bottom, left, right影响。

  • relative 相对定位元素的定位是相对其正常位置。

    h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

  • fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

  • absolute 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

  • sticky 粘性定位 依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

    它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
   <header>header</header>
   <nav>
       <ul>
           <li>nav-item1</li>
           <li>nav-item2</li>
           <li>nav-item3</li>
           <li>nav-item4</li>
           <li>nav-item5</li>
       </ul>
   </nav>
   <main>
       main content 
   </main>
</body>
</html>

    header {
    border-bottom: 1px dashed #555;
    text-align: center;
}
nav {
    position: sticky;
    top: 20px;
}
ul {
    list-style: disc;
}
ul li {
    display: inline-block;
    background-color: antiquewhite;
}

main {
    height: 800px;
    background-color: aqua;
}

元素可以使用的顶部top，底部bottom，左侧left和右侧right属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

2.16.2 z-index

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序

img {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

2.16.3 所有的CSS定位属性

bottom 定义了定位元素下外边距 边界与其包含块下边界之间的偏移。 autolength % inherit 2
clip 剪辑一个绝对定位的元素 shape autoinherit 2
cursor 显示光标移动到指定的类型 url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help 2
left 定义了定位元素左外边距边界 与其包含块左边界之间的偏移。 auto length % inherit 2
overflow 设置当元素的内容溢出 其区域时发生的事情。 auto hidden scroll visible inherit 2
overflow-y 指定如何处理顶部/底部 边缘的内容溢出元素的内容区域 auto hidden scroll visible no-display no-content 2
overflow-x 指定如何处理右边/左边 边缘的内容溢出元素的内容区域 auto hidden scroll visible no-display no-content 2
position 指定元素的定位类型 absolute fixed relative static inherit 2
right 定义了定位元素右外边距边界 与其包含块右边界之间的偏移。 auto length % inherit 2
top 定义了一个定位元素的上外边距 边界与其包含块上边界之间的偏移。 auto length % inherit 2
z-index 设置元素的堆叠顺序 number auto inherit 2

2.17 CSS Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

overflow属性有以下值：

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

**注意:**overflow 属性只工作于指定高度的块元素上。

2.18 CSS Float（浮动）

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

float语法：
float : none | left |right

参数值：
none : 　对象不浮动
left : 对象浮在左边
right : 对象浮在右边

一个例子

<div class="divcss5"> 
    <div class="divcss5_left">布局靠左浮动</div> 
    <div class="divcss5_right">布局靠右浮动</div> 
    <div class="clear"></div><!-- html注释：清除float产生浮动 --> 
</div> 

.divcss5{ width:400px;padding:10px;border:1px solid #F00} 
.divcss5_left{ float:left;width:150px;border:1px solid #00F;height:50px} 
.divcss5_right{ float:right;width:150px;border:1px solid #00F;height:50px} 
.clear{ clear:both}

2.18.1 清除浮动的方法（最常用的4种）

  1. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    }
    .footer{
        width: 900px;
        height: 100px;
        background: darkslateblue;
    }
    .clear{
        clear:both;
    }
    </style>
</head>
<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer"></div>
</body>
</html>

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

不建议使用。

  1. 父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

通过触发BFC方式，实现清除浮动

    .fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

不推荐使用

  1. 使用after伪元素清除浮动（推荐使用）
    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

推荐使用

  1. 使用before和after双伪元素清除浮动

         .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
 
 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

    优点：代码更简洁

    缺点：用zoom:1触发hasLayout.

    推荐使用

2.19 CSS 居中

  1. text-align:center方式

    <div class="center">
　　<span class="center_text">
    123
　　</span>
</div>

    center{
　　text-align:center;
}
center_text{
　　display:inline-block;
　　width:500px
}

    这种方式可以水平居中块级元素中的行内元素，如inline，inline-block；

    但是如果用来居中块级元素中的块级元素时，如div中的div，一旦内层的div有自己的宽度，这种方法就会失效。只能让里面div的文字等内容居中，而div仍然是左对齐的。

  2. margin:0 auto方式

    <div class="center">
　　<span class="center_text">
    我是块级元素，我是块级元素，我给自己设了display：block
　　</span>
</div>

    center_text{
　　display:block;
　　width:500px;
    margin：0 auto；
}

    这种对齐方式要求内部元素(.content_text)是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。

  3. 脱离文档流的居中方式。
    这种通常应用在自定义弹框当中，把背景层设置成透明灰色，内容居中显示在最前面。

    <div class="mask">
　　<div class="content"><br>　　　　我是要居中的板块
　　</div>
</div>

    .mask{
　　display: block;
　　position: fixed;
　　top: 0;
　　left: 0;
　　width: 100%;
　　height: 100%;
　　background: #000;
　　filter: alpha(opacity=30);
　　-ms-filter: "alpha(opacity=30)";
　　opacity: .3;
　　z-index: 10000;
}
.center{
    display: block;
    position: fixed;
    _position: absolute;
    top: 50%;
    left: 50%;
    width: 666px;
    height:400px;
    margin-left: -333px;
    margin-top: -200px;
    z-index: 10001;
    box-shadow: 2px 2px 4px #A0A0A0, -2px -2px 4px #A0A0A0;
    background-color: #fff;
}

    这种居中方式，把内部div设置宽高之后，再设置top、left各为50%，设置完之后，这里是按照左端居中的，接着我们使用负边距的方式调整，将margin-top设置为负的高度的一半，margin-left设置为负的宽度的一半，就可以居中了。

    这种方式还有一种居中方法就是设置margin：-（内部div高度的一半） auto；这用就不用设置left的值了。

    1. display:table-cell
      display:table-cell配合width，text-align:center,vertical-align:middle让大小不固定元素垂直居中,这个方式将要对其的元素设置成为一个td，float、``absolute等属性都会影响它的实现，不响应margin属性;

      <div>
    <span>hello</span>
  </div>
</body>

      div {
    display: table;
    width: 300px;
    height: 200px;
    text-align: center;
    background-color: aqua;
}

div span {
    display: table-cell;
    vertical-align: middle;
}

    2. 垂直居中
      行内元素的垂直居中把height和line-height的值设置成一样的即可。

      <div class="center">
　　<span class="center_text">
　　　　我是要居中的内容　　
    </span>
</div>

      center {
　　height：40px;
　　line-heigth: 40px; 
}

    3. 使用css3的translate水平垂直居中元素

      <div class="center">
　　<div class="center_text">
　　　　我是要居中的内容　
    </div>
</div>

      .center {
    position: relative;
    height: 500px;
}
.center_text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 600px;
}

      这种方式将脱离文档流的元素，设置top：50%，left：50%，然后使用transform来向左向上偏移半个内元素的宽和高。

    4. 使用css3计算的方式居中元素calc

      <div class="center">
　　<div class="center_text">
　　　　我是要居中的内容
	  </div>
</div>

      .center {
    position: relative;
    height: 300px;
    width: 1000px;
    border: 1px solid #ccc;
}
.center_text{
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 150px);
    width: 300px;
    height: 100px;
    border: 1px solid #000;
}

2.20 CSS 伪类

CSS伪类是用来添加一些选择器的特殊效果。

语法

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

2.20.1 anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

**注意：**伪类的名称不区分大小写。

2.20.2 伪类和CSS类

伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}
 
<a class="red" href="css-syntax.html">CSS 语法</a>

2.20.3 CSS :first-child 伪类

您可以使用 :first-child 伪类来选择父元素的第一个子元素。

注意：在IE8的之前版本必须声明<!DOCTYPE> ，这样 :first-child 才能生效。

匹配第一个 <p> 元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的

元素：

p:first-child{
    color:blue;
}

匹配所有 <p> 元素中的第一个 <i> 元素

在下面的例子中，选择相匹配的所有

元素的第一个 元素：

p > i:first-child {
    color:blue;
}

匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的

元素中的所有 元素：

p:first-child i {
    color:blue;
}

CSS - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则

注意：IE8必须声明 <!DOCTYPE>才能支持;lang伪类。

在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：

q:lang(no) {quotes: "~" "~";}

所有CSS伪类/元素

:checked input:checked 选择所有选中的表单元素
:disabled input:disabled 选择所有禁用的表单元素
:empty p:empty 选择所有没有子元素的p元素
:enabled input:enabled 选择所有启用的表单元素
:first-of-type p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
:in-range input:in-range 选择元素指定范围内的值
:invalid input:invalid 选择所有无效的元素
:last-child p:last-child 选择所有p元素的最后一个子元素
:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(selector) :not§ 选择所有p以外的元素
:nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素
:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素
:only-child p:only-child 选择所有仅有一个子元素的p元素
:optional input:optional 选择没有”required”的元素属性
:out-of-range input:out-of-range 选择指定范围以外的值的元素属性
:read-only input:read-only 选择只读属性的元素属性
:read-write input:read-write 选择没有只读属性的元素属性
:required input:required 选择有”required”属性指定的元素属性
:root root 选择文档的根元素
:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
:valid input:valid 选择所有有效值的属性
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个元素的第一个字母
:first-line p:first-line 选择每个元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的元素
:before p:before 在每个元素之前插入内容
:after p:after 在每个元素之后插入内容
:lang(language) p:lang(it) 为元素的lang属性选择一个开始值

2.21 CSS 伪元素

CSS伪元素是用来添加一些选择器的特殊效果。

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

:first-line 伪元素

“first-line” 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化：

p:first-line {    color:#ff0000;    font-variant:small-caps;}

注意：“first-line” 伪元素只能用于块级元素。

注意： 下面的属性可应用于 “first-line” 伪元素：

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

:first-letter 伪元素

“first-letter” 伪元素用于向文本的首字母设置特殊样式：

p:first-letter {    color:#ff0000;    font-size:xx-large;}

注意： “first-letter” 伪元素只能用于块级元素。

注意： 下面的属性可应用于 “first-letter” 伪元素：

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if “float” is “none”)
  • text-transform
  • line-height
  • float
  • clear

伪元素和CSS类

伪元素可以结合CSS类：

p.article:first-letter {color:#ff0000;}<p class="article">文章段落</p>

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

多个伪元素

可以结合多个伪元素来使用。

在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。

段落中的其余文本将以默认字体大小和颜色来显示：

p:first-letter{    
  color:#ff0000;    
  font-size:xx-large;
}
p:first-line {    
  color:#0000ff;    
  font-variant:small-caps;
}

CSS - :before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个

元素前面插入一幅图片：

h1:before { 
 content:url(smiley.gif);
}

CSS - :after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个

元素后面插入一幅图片：

h1:after { 
  content:url(smiley.gif);
}

所有CSS伪类/元素

选择器 示例 示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个元素的第一个字母
:first-line p:first-line 选择每个元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个元素之前插入内容
:after p:after 在每个元素之后插入内容
:lang(language) p:lang(it) 为元素的lang属性选择一个开始值

2.22 CSS 导航栏

作为标准的HTML基础一个导航栏是必须的

。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用

  • 和
  • 元素非常有意义：

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

现在，让我们从列表中删除边距和填充：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

例子解析：

  • list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
  • 移除浏览器的默认设置将边距和填充设置为0

上面的例子中的代码是垂直和水平导航栏使用的标准代码。

2.22.1 垂直导航栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./test.css">
</head>

<body>
  <ul class="vertical">
    <li><a href="#">技术01</a></li>
    <li><a href="#">技术02</a></li>
    <li><a href="#">技术03</a></li>
    <li><a href="#">技术04</a></li>
    <li><a href="#">技术05</a></li>
    <li><a href="#">技术06</a></li>
    <li><a href="#">技术07</a></li>
    <li><a href="#">技术08</a></li>
    <li><a href="#">技术09</a></li>
    <li><a href="#">技术10</a></li>
    <li><a href="#">技术11</a></li>
    <li><a href="#">技术12</a></li>
    <li><a href="#">技术13</a></li>
    <li><a href="#">技术14</a></li>
    <li><a href="#">技术15</a></li>
    <li><a href="#">技术16</a></li>
    <li><a href="#">技术17</a></li>
    <li><a href="#">技术18</a></li>
    <li><a href="#">技术19</a></li>
    <li><a href="#">技术20</a></li>
  </ul>

</body>

</html>

* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
    overflow: hidden;
}

ul.vertical {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    height: 100%;
    overflow: auto;
    background-color: #f1f1f1;
}

ul.vertical li a {
    display: block; 
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    text-align: center;
}
ul.vertical li {
    border-bottom: 1px solid #555;
}
ul.vertical li:last-child {
    border-bottom: none;
}

ul.vertical li a:hover {
    background-color: #555;
    color: #fff;
}

.active {
    background-color: #4CAF50;
}

2.22.2 水平导航栏

有两种方法创建横向导航栏。使用**内联(inline)或浮动(float)**的列表项。

这两种方法都很好，但如果你想导航链接具有相同的大小，你必须使用浮动的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            height: 100%;
            overflow: auto;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: #333;
            overflow: hidden;
            width: 100%;
            position: fixed;
            top: 0;
        }

        ul li {
            float: left;
            border-right: 1px solid #bbb;
        }

        ul li:last-child {
            border-right: none;
        }

        ul li a {
            display: block;
            height: 60px;
            box-sizing: border-box;
            padding: 0 16px;
            line-height: 60px;
            color: white;
            text-decoration: none;
        }

        .content {
            height: 2000px;
            background-color: #bbb;
            margin-top: 60px;
        }

        .active {
            background-color: #4caf54;
        }
    </style>
</head>
<body>
  <ul>
      <li><a href="#">导航项01</a></li>
      <li><a href="#">导航项02</a></li>
      <li><a href="#">导航项03</a></li>
      <li><a href="#">导航项04</a></li>
      <li style="float: right;"><a class="active" href="#">导航项05</a></li>
  </ul>
  <div class="content">
    content
  </div>
</body>
</html>

2.23 CSS 下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown .dropdown-content {
            visibility: collapse;
            position: absolute;
            background-color: #f9f9f9;
            width: 100%;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, .2);
            text-align: center;
            z-index: 1;
        }
        .dropdown:hover .dropdown-content {
            visibility: visible;
        }

        .dropdown .dropdown-content ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .dropdown .dropdown-content ul li {
            cursor: pointer;
        }

        .dropdown .dropdown-content ul li:hover {
            color: blue;
            text-decoration: underline;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            var lis = document.getElementsByTagName('li')
            for (const li of lis) {
                li.addEventListener('click', () => {
                    alert(li.textContent)
                })
            }
        })
    </script>
</head>
<body>
    <div class="dropdown">
        <button>悬浮我</button>
        <div class="dropdown-content">
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
                <li>item5</li>
                <li>item6</li>
            </ul>
        </div>
    </div>
</body>
</html>

2.24 CSS 提示工具(Tooltip)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 60px;
        }
        div {
            margin: 20px;
        }
        /* Tooltip 容器 */
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
        }
         
        /* Tooltip 文本 */
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;
         
            /* 定位 */
            position: absolute;
            z-index: 1;
        }
         
        /* 鼠标移动上去后显示提示框 */
        .tooltip:hover .tooltiptext {
            visibility: visible;
        }

        .tooltip.right .tooltiptext {
            top: -5px;
            left: 105%; 
        }

        .tooltip.left .tooltiptext {
            top: -5px;
            right: 105%; 
        }

        .tooltip.top .tooltiptext {
            width: 120px;
            bottom: 100%;
            left: 50%; 
            margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
        }

        .tooltip.bottom .tooltiptext {
            width: 120px;
            top: 100%;
            left: 50%; 
            margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
        }

        /* 顶部提示框/底部箭头 */
        .tooltip.top .tooltiptext::after {
            content: " ";
            position: absolute;
            top: 100%; /* 提示工具底部 */
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }

        /* 底部提示框/顶部箭头 */
        .tooltip.bottom .tooltiptext::after {
            content: " ";
            position: absolute;
            bottom: 100%;  /* 提示工具头部 */
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent black transparent;
        }
        /* 右侧提示框/左侧箭头 */
        .tooltip.right .tooltiptext::after {
            content: " ";
            position: absolute;
            right: 100%;
            top: 50%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent black transparent transparent;
        }
        /*  左侧提示框/右侧箭头 */
        .tooltip.left .tooltiptext::after {
            content: " ";
            position: absolute;
            top: 50%;
            left: 100%; /* 提示工具右侧 */
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent black;
        }

        .tooltip .tooltiptext {
            opacity: 0;
            transition: opacity 1s;
        }
        .tooltip:hover .tooltiptext {
            opacity: 1;
        }

        </style>
</head>
<body>
    <div class="tooltip top">顶部提示框
        <span class="tooltiptext">提示文本</span>
    </div> 
    <div class="tooltip bottom">底部提示框
        <span class="tooltiptext">提示文本</span>
    </div>    
    <div class="tooltip right">右侧提示框
        <span class="tooltiptext">提示文本</span>
    </div> 
    <div class="tooltip left">左侧提示框
        <span class="tooltiptext">提示文本</span>
    </div> 
</body>
</html>

2.25 CSS 图像透明/不透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            opacity: 0.5;
            filter: alpha(opacity=50); /*for ie8 and earlier*/
            border-radius: 5px;
            transition: ease opacity 1s;
        }
        img:hover {
            opacity: 1;
            filter: alpha(opacity=100); /*for ie8 and earlier*/
        }
    </style>
</head>
<body>
    <figure>
        <figcaption>
            <h1>带有透明效果的图片</h1>
        </figcaption>
        <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" alt="">
    </figure>
</body>
</html>

2.26 CSS 精灵图/雪碧图

精灵图/雪碧图就是图像拼合也就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量，并节省带宽。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #navlist {
            position: relative;
        }
        #navlist li {
                margin: 0;
                padding: 0;
                list-style: none;
                display: inline-block;
                height: 44px;
                line-height: 44px;
                text-align: center;
                cursor: pointer;
        }
        #navlist a {
            height: 44px;
            width: 46px;
            display: block;
        }

        ul > li:nth-child(1) {
            background: url('./img_navsprites.gif') 0 0;
        }

        ul > li:nth-child(1):hover {
            background: url('img_navsprites_hover.gif') 0 -45px;
        }
        ul > li:nth-child(2) {
            background:url('img_navsprites.gif') -47px 0;
        }
    </style>
</head>
<body>
    <nav id="navlist">
        <ul>
            <li>
                <a>1</a>
            </li>
            <li>
                <a>2</a>
            </li>
            <li>
                <a>3</a>
            </li>
            <li>
                <a>4</a>
            </li>
        </ul>
    </nav>
</body>
</html>

2.27 CSS 媒体类型@media 规则

在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体：

@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}

其他媒体类型

all 用于所有的媒体设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示，比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv 用于电视机类型的设备。

三. CSS3新增特性总结

1.CSS3简介

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块

2.过渡

过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！

引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。

2-1语法

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码

栗子1

/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition：width,.5s,ease,.2s复制代码

栗子2

/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/
transition：all,.5s
复制代码

上面栗子是简写模式，也可以分开写各个属性（这个在下面就不再重复了）

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
复制代码

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 文本颜色过渡 */
        p {
            transition-property: color;
            transition-delay: 0ms;
            transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
            transition-duration: 1s;
        }

        p:hover {
            color: aqua;
        }
    </style>

    <style>
        /* 导航栏下拉菜单过滤 */
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .demo-ui > li {
           float: left; 
           background-color: antiquewhite;
           text-align: center;
           position: relative;
           cursor: pointer;
           min-width: 120px;
        }

        .demo-ui > li:hover >ul {
            transform: scaleY(1);
        }

        .demo-ui > li > ul {
            position: absolute;
            transition: all .5s;
            transform-origin: 0 0;
            transform: scaleY(0);
        }
    

        .demo-ui > li > ul > li {
            display: block;
            padding: 12px 16px;
            background-color: #fff;
            border-color: #000;
            border-width: 1px;
            border-style: dashed;
        }
    </style>
</head>

<body>
    <section>
        <h1>文本颜色过渡效果</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Et dignissimos tempore fugiat natus ipsa
            voluptatibus, repellendus similique. Quisquam iste, ut animi recusandae illum vero fugiat molestiae
            voluptatem magnam culpa tenetur.Deserunt, dolorum. Facere non et consectetur modi maiores, mollitia,
            molestias excepturi architecto tenetur laborum quae obcaecati? Placeat ratione, ipsa possimus voluptatum
            quam sed maiores exercitationem, eius fugit sit sint voluptatem.
        </p>
    </section>

    <section>
        <h1>下拉菜单过渡效果</h1>
        <ul class="demo-ui">
            <li>
                nav1
                <ul>
                    <li>child-nav1</li>
                    <li>child-nav2</li>
                    <li>child-nav3</li>
                </ul>
            </li>
            <li>
                nav2
                <ul>
                    <li>child-nav1</li>
                    <li>child-nav2</li>
                    <li>child-nav3</li>
                </ul>
            </li>
            <li>
                nav3
                <ul>
                    <li>child-nav1</li>
                    <li>child-nav2</li>
                    <li>child-nav3</li>
                </ul>
            </li>
        </ul>
            
    </section>
</body>

</html>

3.动画

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬！

3-1.语法

animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）复制代码

栗子1

/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear;复制代码

栗子2

/*2秒后开始执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear 2s;复制代码

栗子3

/*无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画*/
animation: logo2-line 2s linear alternate infinite;复制代码

还有一个重要属性

animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。    
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。    
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 
both：向前和向后填充模式都被应用。  */      复制代码

3-2.logo展示动画

img

这个是我用公司logo写的动画，没那么精细

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">
</head>
<style>
.logo-box{
    width: 600px;
    margin: 100px auto;
    font-size: 0;
    position: relative;
}
.logo-box div{
    display: inline-block;
}
.logo-box .logo-text{
    margin-left: 10px;
}
.logo-box .logo1{
    animation: logo1 1s ease-in 2s;
    animation-fill-mode:backwards;
}
.logo-box .logo-text{
    animation: logoText 1s ease-in 3s;
    animation-fill-mode:backwards;
}
.logo-box .logo2{
    position: absolute;
    top: 20px;
    left: 20px;
    animation: logo2-middle 2s ease-in;
}
.logo-box .logo2 img{
    animation: logo2-line 2s linear;
}
@keyframes logo1 {
    0%{
        transform:rotate(180deg);
        opacity: 0;
    }
    100%{
        transform:rotate(0deg);
        opacity: 1;
    }
}
@keyframes logoText {
    0%{
        transform:translateX(30px);
        opacity: 0;
    }
    100%{
        transform:translateX(0);
        opacity: 1;
    }
}
@keyframes logo2-line {
    0% { transform: translateX(200px)}
    25% { transform: translateX(150px)}
    50% { transform: translateX(100px)}
    75% { transform: translateX(50px)}
    100% { transform: translateX(0); }
}

@keyframes logo2-middle {
    0% { transform: translateY(0);     }
    25% { transform: translateY(-100px);     }
    50% { transform: translateY(0);     }
    75% { transform: translateY(-50px);     }
    100% { transform: translateY(0); }
}
</style>
<body>
<div class="logo-box">
<div class="logo1"><img src="logo1.jpg"/></div>
<div class="logo2"><img src="logo2.jpg"/></div>
<div class="logo-text"><img src="logo3.jpg"/></div>
</div>

<div class="wraper"><div class="item"></div></div>

</body>
</html>

下面让大家看一个专业级别的

img

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
        overflow: hidden;
        background: #fff;
    }

    .center {
        margin: 80px auto;
    }

    .so {
        display: block;
        width: 500px;
        height: 156px;
        background: #ffffff;
    }
    .so .inner {
        width: 500px;
        height: 156px;
        position: absolute;
    }
    .so .inner * {
        position: absolute;
        animation-iteration-count: infinite;
        animation-duration: 3.5s;
    }
    .so .inner .name {
        position: absolute;
        font-size: 54px;
        left: 130px;
        top: 95px;
    }
    .so .inner .name .b {
        font-weight: bold;
    }
    .so .inner .stack-box {
        top: 100px;
        width: 115px;
        height: 56px;
    }
    .so .inner .box {
        width: 115px;
        height: 56px;
        left: 0px;
    }
    .so .inner .box div {
        background: #BCBBBB;
    }
    .so .inner .box .bottom {
        bottom: 0px;
        left: 0px;
        width: 115px;
        height: 12px;
    }
    .so .inner .box .left {
        bottom: 11px;
        left: 0px;
        width: 12px;
        height: 34px;
    }
    .so .inner .box .right {
        bottom: 11px;
        left: 103px;
        width: 12px;
        height: 34px;
    }
    .so .inner .box .top {
        top: 0px;
        left: 0px;
        width: 0;
        height: 12px;
    }
    .so .inner .stack {
        left: 22px;
        top: 22px;
    }
    .so .inner .stack .inner-item {
        background: #F48024;
        width: 71px;
        height: 12px;
    }
    .so .inner .stack .item {
        transition: transform 0.3s;
        width: 291px;
    }
    .so .inner .stack div:nth-child(1) {
        transform: rotate(0deg);
    }
    .so .inner .stack div:nth-child(2) {
        transform: rotate(12deg);
    }
    .so .inner .stack div:nth-child(3) {
        transform: rotate(24deg);
    }
    .so .inner .stack div:nth-child(4) {
        transform: rotate(36deg);
    }
    .so .inner .stack div:nth-child(5) {
        transform: rotate(48deg);
    }
    .so .inner .box {
        animation-name: box;
    }
    .so .inner .box .top {
        animation-name: box-top;
    }
    .so .inner .box .left {
        animation-name: box-left;
    }
    .so .inner .box .right {
        animation-name: box-right;
    }
    .so .inner .box .bottom {
        animation-name: box-bottom;
    }
    .so .inner .stack-box {
        animation-name: stack-box;
    }
    .so .inner .stack {
        animation-name: stack;
    }
    .so .inner .stack .inner-item {
        animation-name: stack-items;
    }
    .so .inner .stack .item:nth-child(1) {
        animation-name: stack-item-1;
    }
    .so .inner .stack .item:nth-child(2) {
        animation-name: stack-item-2;
    }
    .so .inner .stack .item:nth-child(3) {
        animation-name: stack-item-3;
    }
    .so .inner .stack .item:nth-child(4) {
        animation-name: stack-item-4;
    }
    .so .inner .stack .item:nth-child(5) {
        animation-name: stack-item-5;
    }
    @keyframes stack {
        0% {
            left: 22px;
        }
        15% {
            left: 22px;
        }
        30% {
            left: 52px;
        }
        50% {
            left: 52px;
        }
        80% {
            left: 22px;
        }
    }
    @keyframes stack-item-1 {
        0% {
            transform: rotate(12deg * 0);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 0);
        }
    }
    @keyframes stack-item-2 {
        0% {
            transform: rotate(12deg * 1);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 1);
        }
    }
    @keyframes stack-item-3 {
        0% {
            transform: rotate(12deg * 2);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 2);
        }
    }
    @keyframes stack-item-4 {
        0% {
            transform: rotate(12deg * 3);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 3);
        }
    }
    @keyframes stack-item-5 {
        0% {
            transform: rotate(12deg * 4);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 4);
        }
    }
    @keyframes stack-items {
        0% {
            width: 71px;
        }
        15% {
            width: 71px;
        }
        30% {
            width: 12px;
        }
        50% {
            width: 12px;
        }
        80% {
            width: 71px;
        }
    }
    @keyframes box {
        0% {
            left: 0;
        }
        15% {
            left: 0;
        }
        30% {
            left: 30px;
        }
        50% {
            left: 30px;
        }
        80% {
            left: 0;
        }
    }
    @keyframes box-top {
        0% {
            width: 0;
        }
        6% {
            width: 0;
        }
        15% {
            width: 115px;
        }
        30% {
            width: 56px;
        }
        50% {
            width: 56px;
        }
        59% {
            width: 0;
        }
    }
    @keyframes box-bottom {
        0% {
            width: 115px;
        }
        15% {
            width: 115px;
        }
        30% {
            width: 56px;
        }
        50% {
            width: 56px;
        }
        80% {
            width: 115px;
        }
    }
    @keyframes box-right {
        15% {
            left: 103px;
        }
        30% {
            left: 44px;
        }
        50% {
            left: 44px;
        }
        80% {
            left: 103px;
        }
    }
    @keyframes stack-box {
        0% {
            transform: rotate(0deg);
        }
        30% {
            transform: rotate(0deg);
        }
        40% {
            transform: rotate(135deg);
        }
        50% {
            transform: rotate(135deg);
        }
        83% {
            transform: rotate(360deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
<body>
<div class="so center">
    <div class="inner">
        <div class="stack-box">
            <div class="stack">
                <div class="item">
                    <div class="inner-item"></div>
                </div>
                <div class="item">
                    <div class="inner-item"></div>
                </div>
                <div class="item">
                    <div class="inner-item"></div>
                </div>
                <div class="item">
                    <div class="inner-item"></div>
                </div>
                <div class="item">
                    <div class="inner-item"></div>
                </div>
            </div>
            <div class="box">
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
                <div class="top"></div>
            </div>
        </div>
        <div class="name">
            stack<span class="b">overflow</span>
        </div>
    </div>
</div>
</body>
</html>

3-3.loading效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .loading-box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            overflow: hidden;
            background-color: #ddd;
        }
        .loading-box .loading-dot {
            height: 12px;
            width: 12px;
            opacity: 0;
            border-radius: 50%;
            background: #666;
            background-color: #4b9cdb;
            display: inline-block;
            margin: 0 10px;
            animation-name: loading;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-timing-function: ease;
            transform: translateX(-300px);
        }

        .loading-box .loading-dot:nth-child(1) {
            animation-delay: .8s;
        }
        .loading-box .loading-dot:nth-child(2) {
            animation-delay: .7s;
        }
        .loading-box .loading-dot:nth-child(3) {
            animation-delay: .6s;
        }
        .loading-box .loading-dot:nth-child(4) {
            animation-delay: .5s;
        }
        .loading-box .loading-dot:nth-child(5) {
            animation-delay: .4s;
        }
        .loading-box .loading-dot:nth-child(6) {
            animation-delay: .3s;
        }
        .loading-box .loading-dot:nth-child(7) {
            animation-delay: .2s;
        }
        .loading-box .loading-dot:nth-child(8) {
            animation-delay: .1s;
        }

        @keyframes loading {
            40% {
                transform: translateX(0);
                opacity: .8;
            }
            100% {
                transform: translateX(300px);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="loading-box">
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
    </div>
</body>
</html>

css3-loading

3-4.音乐震动条

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>纯CSS3模拟跳动的音符效果</title>
  <style>
    *{margin:0;padding:0;list-style: none;}
    body{background-color: #efefef;}
    .demo-music {
      position: absolute;
      width: 100%;
      height: 200px;
      top: 120px;
      zoom: 1.5;
    }

    .demo-music .music {
      width: 80px;
      height: 50px;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-40px, -25px);
      transform: translate(-40px, -25px);
      position: absolute;
    }

    .demo-music #waves {
      width: 80px;
      height: 50px;
      position: absolute;
      top: 12px;
      left: 12px;
    }

    .demo-music #waves li {
      position: relative;
      float: left;
      height: 100%;
      width: 12%;
      overflow: hidden;
      margin-right: 1px;
    }

    .demo-music #waves li span {
      position: absolute;
      bottom: 0;
      display: block;
      height: 100%;
      width: 100px;
      background: #09f;
    }

    .demo-music #waves .li1 span {
      animation: waves 0.8s linear 0s infinite alternate;
      -webkit-animation: waves 0.8s linear 0s infinite alternate;
    }

    .demo-music #waves .li2 span {
      animation: waves 0.9s linear 0s infinite alternate;
      -webkit-animation: waves 0.9s linear 0s infinite alternate;
    }

    .demo-music #waves .li3 span {
      animation: waves 1s linear 0s infinite alternate;
      -webkit-animation: waves 1s linear 0s infinite alternate;
    }

    .demo-music #waves .li4 span {
      animation: waves 0.8s linear 0s infinite alternate;
      -webkit-animation: waves 0.8s linear 0s infinite alternate;
    }

    .demo-music #waves .li5 span {
      animation: waves 0.7s linear 0s infinite alternate;
      -webkit-animation: waves 0.7s linear 0s infinite alternate;
    }

    .demo-music #waves .li6 span {
      animation: waves 0.8s linear 0s infinite alternate;
      -webkit-animation: waves 0.8s linear 0s infinite alternate;
    }
    @-webkit-keyframes waves {
      10% {
        height: 20%;
      }
      20% {
        height: 60%;
      }
      40% {
        height: 40%;
      }
      50% {
        height: 100%;
      }
      100% {
        height: 50%;
      }
    }

    @keyframes waves {
      10% {
        height: 20%;
      }
      20% {
        height: 60%;
      }
      40% {
        height: 40%;
      }
      50% {
        height: 100%;
      }
      100% {
        height: 50%;
      }
    }
  </style>
</head>
<body>
  <div class="demo-music">
    <div class="music">
      <ul id="waves" class="movement">
        <li class="li1"><span class="ani-li"></span></li>
        <li class="li2"><span class="ani-li"></span></li>
        <li class="li3"><span class="ani-li"></span></li>
        <li class="li4"><span class="ani-li"></span></li>
        <li class="li5"><span class="ani-li"></span></li>
        <li class="li6"><span class="ani-li"></span></li>
      </ul>
      <div class="music-state"></div>
    </div>
    </div>
</body>
</html>

4.形状转换

这一部分，分2d转换和3d转换。

rotate判断：

正向轴对着眼睛，顺时针则旋转角度为正，逆时针则旋转角度为负。

或者用左手法则也行：伸出左手，大拇指指向正轴方向，四个手指的指向即是旋转正向，但务必记住是左手！

注：rotate后三维坐标轴也会跟着改变

旋转的动画效果

http://www.100sucai.com/demos.php?id=1551760986

4-1.语法

transform:适用于2D或3D转换的元素
transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)

4-2.实例

transform:rotate(30deg); 旋转30弧度

transform:translate(30px,30px); 平移x: 30px ,y: 30px

transform:scale(.8); 缩放0.8倍

transform: skew(10deg,10deg); 倾斜x轴方向: 10弧度， y方向10弧度

transform:rotateX(180deg); 沿x方向旋转180弧度

transform:rotateY(180deg); 沿y轴方向旋转180弧度

transform:rotate3d(10,10,10,90deg); 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px

画一个立方体

<!DOCTYPE html>
<html>
<head>
<style> 
.main{
	height: 500px;
	width: 500px;
	position: absolute;
	left: 50%;
	top: 50%;
	border:0px solid black;
	transform: translate(-50%,-50%) rotateX(45deg) rotateY(45deg);
	transform-style: preserve-3d;
}
 
.main div{
	position: absolute;
	left: 50%;
	top: 50%;
	height: 250px;
	width: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 60px;
	font-weight: bold;
}
 
.main:hover{
	transform: translate(-50%,-50%)  rotateX(145deg) rotateY(45deg) rotateZ(105deg);
	transition: all 5s;
}
 
.face1{
	background-color: pink;
	transform:translate(-50%,-50%) translateY(-125px) rotateX(90deg);
}
 
.face2{
	background-color: red;
	transform:translate(-50%,-50%) translateX(-125px) rotateY(90deg);
}
 
.face3{
	background-color: blue;
	transform:translate(-50%,-50%) translateZ(-125px);
}
 
.face4{
	background-color: yellow;
	transform:translate(-50%,-50%) translateY(125px) rotateX(90deg);
}
 
.face5{
	background-color: green;
	transform:translate(-50%,-50%) translateX(125px) rotateY(90deg);
}
 
.face6{
	background-color: orange;
	transform:translate(-50%,-50%) translateZ(125px);
}
 
</style>
</head>
<body>
	<div class="main">
		<div class="face1">1</div>
		<div class="face2">2</div>
		<div class="face3">3</div>
		<div class="face4">4</div>
		<div class="face5">5</div>
		<div class="face6">6</div>
	</div>
</body>
</html>

上述效果更复杂的例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ul {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            -webkit-
        }

        #ul li {
            width: 200px;
            height: 200px;
            position: absolute;
            text-align: center;
            line-height: 200px;
            font-size: 80px;
            font-weight: bold;
            color: #fff;
        }

        li:nth-child(1) {
            background: rgba(255, 0, 0, 1);
            -webkit-transform: rotateX(90deg) translateZ(100px);
        }

        li:nth-child(2) {
            background: rgba(0, 255, 255, 1);
            -webkit-transform: rotateX(270deg) translateZ(100px);
        }

        li:nth-child(3) {
            background: rgba(255, 0, 255, 1);
            -webkit-transform: rotateY(90deg) translateZ(100px);
        }

        li:nth-child(4) {
            background: rgba(0, 255, 0, 1);
            -webkit-transform: rotateY(270deg) translateZ(100px);
        }

        li:nth-child(5) {
            background: rgba(200, 200, 0, 1);
            -webkit-transform: translateZ(-100px);
        }

        li:nth-child(6) {
            background: rgba(0, 0, 255, 1);
            -webkit-transform: translateZ(100px);
        }

        .button {
            width: 200px;
            margin: 20px auto;
            position: relative;
        }

        input {
            width: 50px;
            height: 30px;
            position: absolute;
            cursor: pointer;
        }

        input:nth-child(1) {
            left: 100px;
            top: 0;
        }

        input:nth-child(2) {
            left: 200px;
            top: 50px;
        }

        input:nth-child(3) {
            left: 0px;
            top: 50px;
        }

        input:nth-child(4) {
            left: 100px;
            top: 100px;
        }

        input:nth-child(5) {
            left: 100px;
            top: 50px;
        }

        @keyframes run {
            0% {
                -webkit-transform: rotateX(0deg) rotateY(0deg);
            }

            100% {
                -webkit-transform: rotateX(360deg) rotateY(360deg);
            }

        }
    </style>
</head>

<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="button">
        <input type="button" value="上">
        <input type="button" value="右">
        <input type="button" value="左">
        <input type="button" value="下">
        <input type="button" value="重置">
    </div>

    <script>
        var ul = document.getElementById('ul');
        var inputs = document.getElementsByTagName('input');
        var x = 0, y = 0;
        function run() {
            ul.style.webkitTransition = '-webkit-transform 3s linear';
            if (inputs[0] == this) {
                x += 90;
            }
            if (inputs[1] == this) {
                y += 90;
            }
            if (inputs[2] == this) {
                y -= 90;
            }
            if (inputs[3] == this) {
                x -= 90;
            }
            if (inputs[4] == this) {
                x = 0;
                y = 0;
                ul.style.webkitTransition = '-webkit-transform 0.1s linear';
            }
            ul.style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg)"; //变换效果（沿X轴和Y轴旋转）
        }
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].onclick = run;
        }
        document.addEventListener('keydown', function (e) {
            ul.style.webkitTransition = '-webkit-transform 3s linear';
            switch (e.keyCode) {
                case 37: y -= 90;    //左箭头
                    break;
                case 38: x += 90;    //上箭头
                    break;
                case 39: y += 90;    //下箭头
                    break;
                case 40: x -= 90;    //右箭头
                    break;
                case 13: x = 0; y = 0;    //回车 （当回车时，迅速转回初始状态）
                    ul.style.webkitTransition = '-webkit-transform 0.1s linear';
                    break;
            }
            ul.style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg)"; //变换效果（沿X轴和Y轴旋转）
        }, false);

    </script>
</body>

</html>

4.3 三维透视距离perspective属性

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

perspective CSS属性确定了z=0平面与用户之间的距离，以便为3d定位的元素提供一些透视图。每个带有z>0的三维元素变得更大;每个z<0的3d元素变得更小。效果的强度由该属性的值决定。

**注释：**perspective 属性只影响 3D 转换元素。

**提示：**请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

perspective: number|none;
值 描述
number 元素距离视图的距离，以像素计。
none 默认值。与 0 相同。不设置透视。

5.选择器

css3提供的选择器可以让我们的开发，更加方便！

参见1.3节或者https://www.w3school.com.cn/cssref/css_selectors.asp

6.阴影

以前没有css3的时候，或者需要兼容低版本浏览器的时候，阴影只能用图片实现，但是现在不需要，css3就提供了！

6-1.语法

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;

6-1.栗子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    width:300px;
    height:100px;
    background:#09f;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

7.边框

7-1.边框图片

7-1-1.语法

border-image 属性是一个简写属性，用于设置以下属性：

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 
/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

7-1-2.栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 15px solid transparent;
            border-image: url(https://www.runoob.com/images/border.png) 27 round;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

7-2.边框圆角

7-2-1.语法

border-radius: n1,n2,n3,n4;
border-radius: n1,n2,n3,n4/n1,n2,n3,n4;
/*n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。*/
复制代码

7-2-2.栗子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    text-align:center;
    width:300px;
    border-radius:25px 0 25px 0;
}
</style>
</head>
<body>
<div>border-radius</div>
</body>
</html>

8.背景

这一块主要讲css3提供背景的三个属性

background-clip

background-clip CSS属性设置元素的背景是否扩展到其边框框、填充框或内容框之下。

border-box
背景延伸到边界的外部边缘(但在z顺序中是在边界下面)。
padding-box
背景延伸到填充的外部边缘。边界下面没有背景。
Content-box
背景是在内容框内绘制的。
text
背景是在前景文本中绘制的。

background-origin

background-origin CSS属性设置背景的原点:从边框开始，在边框内，或在填充内

border-box
背景位置相对于边框框。
padding-box
背景位置相对于填充框。
content-box
背景位置相对于内容框。

background-size

background-size CSS属性设置元素背景图像的大小。图像可以保留其自然大小、拉伸或约束以适应可用空间。

contain
在不裁剪或拉伸图像的情况下，使图像尽可能大。
cover
在不拉伸图像的情况下，将图像缩放到尽可能大的尺寸。如果图像的比例与元素不同，它会被垂直或水平裁剪，这样就不会留下空白。
auto
将背景图像按相应的方向缩放，以保持其固有比例。

将相应维度中的图像拉伸到指定的长度。不允许有负值。
< percentage>百分比
将相应尺寸的图像拉伸到背景定位区域的指定百分比。背景定位区域由background-origin的值(默认情况下，填充框)决定。但是，如果背景的background-attachment值是固定的，那么定位区域就是整个视口。不允许有负值。

多张背景图

栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 600px;
            height: 600px;
            border: 15px solid rgba(0,0,0,.3);
            padding: 20px;
            background: top / contain no-repeat url(https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg),
            bottom / contain no-repeat url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg);
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
</body>
</html>

9.倒影box-reflect

比如我们要实现下述效果

在早前要实现这样的效果我们都必须借助于类似于Photoshop这样的制作图软件来实现，然后通过引入一张image。那么除了图片，我们有没有别的方法能实现呢？值得庆幸的是，到目前为之，CSS3有一个属性box-reflect可以实现。那么今天我们要给大家介绍的就是这个属性的应用。

9.1 语法

box-reflect：none | <direction> <offset>? <mask-box-image>?

由于此属性并不是W3C标准属性，在具体使用之时，还是需要添加浏览器的私有属性，根据浏览器的兼容性，使用box-reflect时需要添加-webkit和前缀：

-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?
box-reflect：none | <direction> <offset>? <mask-box-image>?

可惜的是在Firefox下并不支持这个属性，不过值得庆幸的是，在Firefox下可以通过-moz-element()来模拟实现

其主要包括以下几个属性值：

  • **none

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

css

前端追梦人CSS教程 的相关文章

  • iPad Safari 100% 高度问题

    我的页面上有一个模态 div 它使背景变灰 如果我将overlay div的高度设置为100 它在IE 桌面 上工作正常 但在iPad Safari上 完整的高度不会变灰 究竟是什么问题 这与固定位置 视口有关吗 请帮忙 下面是相同的 CS

  • TYPO3 显示子页面的内容，包括 css 类

    使用以下打字稿 我从一页上的子页面获取所有内容 lib allPid COA lib allPid 10 HMENU 10 special directory special value 2 1 TMENU 1 expAll 1 NO do

  • 如何使用 jQuery 在按下按钮后保持按钮处于活动状态

    我见过一些非常相似的问题 但一直无法找到我正在寻找的答案 我已经确定了解决方法 但想知道执行该任务的正确方法 我想要的是单击按钮并使活动状态保持不变 下一次单击将切换状态 这是所需的 我真正需要知道的是如何解决 uiButton activ

  • 如何在 HTML 表格上使用分页？

    我正在尝试使用这个分页library http flaviusmatis github io simplePagination js 在我的 HTML 表格页面 特别是浅色主题 中 但不知何故 我无法理解如何在我的 HTML 页面中以这种方

  • IE8 中空 div 层的 z-index 问题

    我在 IE8 中遇到 z index 问题 其他尚未测试 以下 JS 创建一些 html css document write img src border 0 document write div style background col

  • iOS 键盘显示后分屏宽度

    我刚刚开始研究 Cordova 应用程序对分屏多任务处理的支持 到目前为止 该应用程序在模拟器中的 iPad 上显示和调整大小都很好 但是当我单击编辑字段并显示软件键盘时 100 宽度的值开始返回整个屏幕 而不是给出的窗口 初始显示 到目前

  • 如何使用CSS将文本放在“框”的右上角或右下角

    我怎样才能得到here and and here位于右侧 与 lorem ipsums 位于同一行 请参阅以下内容 Lorem Ipsum etc here blah blah blah blah lorem ipsums and here

  • CSS：理解和调整字体的行距/行高

    有人问了一个非常相似的问题here https stackoverflow com questions 13701110 css remove line height leading on larger text但确实回答得足够了 CSS

  • 响应式2列2行布局

    我一直在试图弄清楚如何创建这个布局 我有一个 2 列布局 左列有 1 行 右侧有 2 行 我试图让它流畅地调整 我遇到的问题是 我希望右侧顶部图像的顶部与左侧图像的顶部对齐 而底部图像的底部与左侧图像的底部保持对齐 我应该使用桌子吗 这是我

  • 在桌面和移动设备上编写 2 列和 3 列的 Flexbox 代码（换行）

    我真的很难弄清楚这个 CSS flexbox 解决方案 基本上有两个问题 一个是 2 列布局 另一个是 3 列布局 2 列 我认为这可能非常简单 3 列 这可能更高级一些 容器类是 嗯 container 而孩子们只是 left right

  • 手机上猫头鹰轮播的高度

    我有一个使用 Owl Carousel 覆盖桌面上整个屏幕的图像 当我在手机设备上查看相同的图像时 它仅占用屏幕尺寸的三分之一 我如何调整高度 使其比手机上当前的高度更高 我读过一些帖子 但作为猫头鹰旋转木马的新手 我不确定我是否做错了什么

  • jquery 文本旋转

    我在 div 中有一个简单的文本 如下所示 div div This is an example text div div 我希望 div 内的文本旋转 20 30 度 我已经找到了this https stackoverflow com

  • JavaFX 中的 -fx-background-radius 和 -fx-background-insets

    我正在使用 JavaFX 我想自定义一个按钮 我看到了几个可以设计的特征 其中我发现了两个我不认识的人 button fx padding 5 22 5 22 fx border color 121212 fx border width 2

  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备？

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g

  • 编辑角度材质的表格单元格填充

    当我使用开发人员工具检查该元素时 它显示零填充 但是当我查看它并将鼠标悬停在它上面时 它非常清楚地在单元格内具有填充 我不知道这是从哪里来的 并且设置td padding 0 important 什么也没做 感知到的填充是由以下原因引起的d

  • Chrome 中的错误或 CSS 错误？ （隐藏可见性的锚点）

    在任何 HTML 中测试这个简单的行 a href anything span insible text here span a 您可以直接从这里测试 http jsfiddle net wqS3E http jsfiddle net wq

  • css 字体 twitter 像关闭按钮一样，我错过了什么？

    twitter 有一个关闭按钮 它是单个字符 x 我需要类似的东西 但是在我检查之后 span x span 我按照 firebug 告诉我的那样创建 css 规则 close button font family Tahoma Arial

  • 底部页脚的 css 布局，动态 ajax 内容更改页面高度

    Update 实际上 我现在通过放弃固定页脚设计来解决这个问题 动态内容移动页脚并适当调整容器大小似乎没有问题 除非页脚最初固定在浏览器底部 我希望其他人最终能够提供一个兼具两全其美的出色解决方案 I spent all day tryin

  • 带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误

    Safari 和 Chrome 以及 Opera 和 Firefox 都可以处理 hover伪类和相邻兄弟选择器 a hover div 这有效 但是 当添加另一个相邻兄弟时 div hover a div Webkit 崩溃了 但是 如果

  • MVC4 捆绑：由于 css3 功能而缩小失败？

    我想使用 MVC4 捆绑和缩小 但我总是在未缩小的 css 文件中收到此错误消息作为注释 Minification failed Returning unminified contents 534 29 run time error CSS

随机推荐

  • Kafka实战——简单易懂的生产者消费者demo

    单线程版本适合本地调试 多线程版本适合做压测 1 引入maven依赖

  • 泊松分布的矩母函数与特征函数

    矩母函数与特征函数 矩 母 函 数 与 特 征 函 数

  • 【企业了解】人人都是产品经理、鸟哥笔记、CSDN、稀土掘金（2020年11月稀土掘金被字节跳动，金融与科技）

    企业了解 人人都是产品经理 鸟哥笔记 CSDN 稀土掘金 前言 今天早上看 今日热榜官网 的时候 被一篇文章吸引 中国成功学迭代史 内容挺有意思的 然后发现这篇文章来自一个网站 人人都是产品经理 和我上次写 企业分析 鸟哥笔记 一样 我因为

  • Hive三种不同的数据导出的方式

    Hive三种不同的数据导出的方式 1 导出到本地文件系统 insert overwrite local directory home anjianbing soft export data app order city d row form

  • 2021-09-22

    linux防火墙查看状态 操作防火墙的命令 查看防火墙状态 systemctl status firewalld 让防火墙可用 systemctl enable firewalld 让防火墙不可用 systemctl disable fir

  • 信号——产生、处理、捕捉、接收、阻塞

    一个信号是一条小消息 它通知系统进程中发生了一个某种类型的事件 提供了一种处理异步事件的方法 每一种信号都有一个名字 在头文件

  • 用Matlab作函数的图像

    函数简介 1 作图函数是plot 其调用格式如下 plot y plot x y plot x y LineSpec plot x1 y1 s1 x2 y2 s2 x3 y3 s3 说明 1 plot y 绘出以向量y为纵坐标 y的个元素的

  • IPV6基本报头

    version 版本号 值为6 与ipv4作用相同 4bit Traffic class 流分类 相当于ipv4的TOS字段 用于qos 表示报文的类或者优先级 8bit Flow label 流标签 用于区分实时流量 标签 源地址可以确定

  • 使用vue-amap实现地图经纬度显示、具体地址显示、卫星图、路网路况、在鼠标按下的地方添加标注点和添加多个标注点

    文章目录 写在开头 一 本文目的 二 版本信息 三 在App vue中调用其他 vue文件 四 点击地图显示经纬度和具体地址 五 添加卫星图和路网路况 六 在鼠标按下的地方添加标注点 七 在地图上显示多个标注点 写在最后 写在开头 我的上篇

  • LeetCode每日一题之209长度最小的子数组

    文章目录 问题描述 方法一 暴力求解 方法二 滑动窗口 问题描述 方法一 暴力求解 暴力求解法 时间复杂度O n 2 空间复杂度O 1 暴力求解法的思想 每一次遍历数组 然后更新result的值 一个for循环作为起始位置 一个for循环作

  • 使用JavaScript实现MQTT客户端的创建

    随着物联网的快速发展 实现设备之间的可靠和高效通信变得至关重要 MQTT作为一种轻量级的 开放的消息传输协议 被广泛应用于物联网领域 本文将为您介绍如何使用MQTT实现物联网设备之间的通信 MQTT基本概念 MQTT是一种基于发布 订阅模型

  • Qt modbus slave 从站 封装好的类直接使用

    实现基本的功能 QT serialport serialbus modbusSlove h ifndef MODBUSSLOVE H define MODBUSSLOVE H include

  • 【UE4源代码观察】观察DDC（DerivedDataCache）

    UE4源代码观察 观察DDC DerivedDataCache YakSue的博客 CSDN博客 概念 DDC 全名DerivedDataCache 派生数据缓存 很早就知道UE4里存在DDC这个概念 也发现了DDC占用了很多磁盘空间 也遇

  • WebSocket -- 扫盲篇

    一 WebSocket是HTML5出的东西 协议 也就是说HTTP协议没有变化 或者说没关系 但HTTP是不支持持久连接的 长连接 循环连接的不算 首先HTTP有1 1和1 0之说 也就是所谓的keep alive 把多个HTTP请求合并为

  • 剑指 Offer 31. 栈的压入、弹出序列—思路和心得

    思路来自于 LeetCode力扣刷题 剑指Offer 31 栈的压入 弹出序列 哔哩哔哩 https b23 tv mvsIvAi import java util Stack class Solution 思路 模拟一个栈进行相应的弹出操

  • java实现冒泡排序

    冒泡排序 算法重复走访要排序的数列 一次比较两个元素 如果它们顺序错误就交换它们的位置 这样最大的数就到了最后 重复操作即可得到有序数列 冒泡排序算法运行 1 比较相邻的元素 如果第一个比第二个大 就交换他们两个 2 对每一对相邻元素作同样

  • STM32之flash的读写

    文章目录 一 创建STM32CUBEMX工程 二 KEIL下的配置 三 参考 一 创建STM32CUBEMX工程 芯片选择F103C8 配置定时器 打开外部时钟 配置时钟 配置PC13为output对应板子上的LED 设置堆栈大小为4K 导

  • Css Pc端默认样式（适用于大部分项目开发）

    5b8b 4f53 yh Microsoft Yahei body textarea input select option font size 14px color 333 font family Hiragino Sans GB Mic

  • C++期末作业翻牌消消乐小游

    C 期末作业翻牌消消乐小游戏 适合初学者学习使用 附答辩PPT和项目报告 详细情况请看下图 点我下载资源 点我下载资源

  • 前端追梦人CSS教程

    一 基础概念 1 1 什么是CSS 层叠样式表 英文全称 Cascading Style Sheets 是一种用来表现HTML 标准通用标记语言的一个应用 或XML 标准通用标记语言的一个子集 等文件样式的计算机语言 1 2 语法 选择器

热门标签