git使用教程-CFANZ编程社区

css的世界-张鑫旭老师

注意：每一个图片都是可点击的超链接
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xIKqiPmb-1687854784102)(image-7.png)]

1. 基本概念与元素

基本概念

CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

流

“流”又叫文档流，是css的一种基本定位和布局机制。流是html的一种抽象概念，暗喻这种排列布局方式好像水流一样自然自动。默认自上而下（块级元素如div）从左到右（内联元素如span）堆砌的布局方式。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rrQLcN1q-1687854784103)(image-10.png)]

块级元素和内联元素

块级元素：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；

内联元素：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CAA3LKey-1687854784103)(image-4.png)]

元素属性

用来设置元素的各种样式，例如布局定位属性、尺寸属性、文本属性、背景属性等。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kHj6PboG-1687854784103)(image-5.png)]

css权重和超越!important

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
css选择器权重列表如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nGaXXFao-1687854784103)(image-6.png)]

CSS继承性

继承属性是从DOM树的父节点传递到后代节点。（顺序：由上至下继承）

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。

2. 盒模型

分为w3c标准模型和IE模型

元素的内在盒子是由margin、border、padding、content组成的盒模型。
W3C盒子模型的范围包括： margin、border、padding、content，并且 content 部分不包含其他部分；
IE盒子模型的范围也包括：margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding；

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

二维视图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H5dfFYiZ-1687854784103)(image-9.png)]
三维视图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ylVpVsn-1687854784104)(image-8.png)]

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为 content-box（W3C盒子模型）、border-box（IE盒子模型）。

3. 层叠规则

层叠规则指的是当网页中的元素发生层叠时的表现规则。
层叠上下文好像是一个结界，层叠上下文内的元素如果跟层叠上下文外的元素发生层叠，则比较该层叠上下文和外部元素的层叠上下文的层叠水平高低。
创建一个层叠上下文的方法就是给position值为relative/aboslute/fixed的元素设置z-index不为auto的值，或者float。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tGuOOZnn-1687854784104)(image-11.png)]