css的世界-张鑫旭老师

css的世界-张鑫旭老师

参考文献：https://juejin.cn/post/6844903894313598989

注意：每一个图片都是可点击的超链接

• css的世界-张鑫旭老师
• 1. 基本概念与元素
  • 基本概念
  • 流
  • 块级元素和内联元素
  • 元素属性
  • css权重和超越!important
  • CSS继承性
• 2. 盒模型
  • 分为w3c标准模型和IE模型
• 3. 层叠规则
• 4. 文本控制
• 5. 元素的显示与控制
• 6. 弹性布局/网格布局
  • 弹性布局
  • 网格布局
• 7. css3动画元素

1. 基本概念与元素

基本概念

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

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

流

“流”又叫文档流，是css的一种基本定位和布局机制。流是html的一种抽象概念，暗喻这种排列布局方式好像水流一样自然自动。默认自上而下（块级元素如div）从左到右（内联元素如span）堆砌的布局方式。

块级元素和内联元素

块级元素：

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

内联元素：

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

元素属性

用来设置元素的各种样式，例如布局定位属性、尺寸属性、文本属性、背景属性等。

css权重和超越!important

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
css选择器权重列表如下：

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(内容) - 盒子的内容，显示文本和图像

• 二维视图：
  
  

• 三维视图：
  

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

3. 层叠规则

层叠规则指的是当网页中的元素发生层叠时的表现规则。
层叠上下文好像是一个结界，层叠上下文内的元素如果跟层叠上下文外的元素发生层叠，则比较该层叠上下文和外部元素的层叠上下文的层叠水平高低。
创建一个层叠上下文的方法就是给position值为relative/aboslute/fixed的元素设置z-index不为auto的值，或者float。

4. 文本控制

1. ::first-letter 选中首个字符
2. text-transform
   • 假设有个输入框只能输入大写字母，那么如下设置，输入小写字母出现的却是大写字母，可用于身份证输入框或验证码输入框等：
3. word-spacing 空格间隙
   • 设定空格间隙是20px，也就是说空格现在占据的宽度是原有的空格宽度+20px的宽度
4. white-space 空白处理
   1. 如果在html中输入多个空白符，默认会被当成一个空白符处理
   2. normal：合并空白符和换行符；
   3. nowrap：合并空白符，但不许换行；
   4. pre：不合并空白符，并且只在有换行符的地方换行；
   5. pre-wrap：不合并空白符，允许换行符换行和文本自动换行；
5. text-align: justify
   • text-align: justify为两端对齐（对尾行无效且子元素之间必须有空格或换行符）。除了实现文字的两端对齐，还能用来做一些两端对齐的布局。

5. 元素的显示与控制

元素隐藏方法总结：

1. 如果希望元素不可见、不占据空间、资源会加载、DOM 可访问： display: none；
2. 如果希望元素不可见、不能点击、但占据空间、资源会加载，可以使用： visibility: hidden；
3. 如果希望元素不可见、不占据空间、显隐时可以又transition淡入淡出效果：visibility: hidden；
4. 如果希望元素不可见、可以点击、占据空间，可以使用： opacity: 0；
5. 如果希望元素不可见、可以点击、不占据空间，可以使用： opacity: 0; position: absolute；
6. 如果希望元素不可见、不能点击、占据空间，可以使用： position: relative; z-index: -1；
7. 如果希望元素不可见、不能点击、不占据空间，可以使用： position: absolute ; z-index: -1；

6. 弹性布局/网格布局

弹性布局

弹性布局是指display: flex或display: inline-flex的布局。注意，设为弹性布局以后，子元素的float、clear、vertical-align属性都会失效。

网格布局

网格布局非常类似于表格布局，它们都是通过定义n行m列，来将容器划分为n*m个单元格，指display: grid。
grid 布局则是将容器划分成不同的“行”和“列”，产生单元格，让和指定“项目所在单元格”，可以看作是二维布局。
网格布局（Grid）是最强大的 CSS 布局方案，Grid布局远比Flex布局更强大，网格布局将网页划分成一个个网格，可任意组合不同的网格，能轻松做出如下布局效果

小游戏

7. css3动画元素

动画(animation)是CSS3中具有颠覆性的特征之一，可通过多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。制作动画分为两步：

1. 先用关键字@keyframes定义动画；
2. 再调用动画；
   
   
   示例

分享一些CSS3动效网站：

1. https://animate.style/
2. http://ianlunn.github.io/Hover/
3. https://elrumordelaluz.github.io/csshake/#
4. https://www.jq22.com/demo/magic-master-150413221542/
5. http://www.imagehover.io/