《Web前端开发精品课 HTML与CSS进阶教程》---笔记

HTML进阶

语义化

学习HTML的重点不在于掌握了多少标签，而是在于掌握标签的语义，在你需要的地方能否用到正确的语义标签。

在实际开发中，上图下文字的样式，一般使用figure和figcaption两个元素来增强图片的语义化。

		<figure>
			<img src="img/3.1@2x.png" >
			<figcaption>文字描述</figcaption>
		</figure>

figure元素 用于包含 图片和图注文字
figcaption元素 用于表示图注文字

label标签，用于显示在输入控件旁边的说明性文字。也就是将某个表单元素和某段说明文字关联起来

<br/>标签，仅用于段落中的换行，也就是只适用于p标签内部换行

在实际开发中，大多数情况下都是使用无序列表<ul>，极少情况下会使用有序列表<ol>

一张图片的显示，有两种方式：一种是使用img标签，一种是使用背景图片
如果图片作为HTML的一部分，并且想被搜索引擎识别，则使用img标签
如果图片仅仅是起到装饰作用，并且不想被搜索引擎识别，则应该使用背景图片

---

CSS进阶

CSS的相对单位：

CSS特性

CSS两大特性：继承性、层叠性

在CSS中，具有继承性的属性，有三大类：
文本相关属性
列表相关属性
颜色相关属性

层叠，其实指的就是样式的覆盖。当样式的覆盖发生冲突时，以优先级高的为准。

指定样式冲突

当直接指定的样式发生冲突时，样式权值高者获胜


当继承样式和指定样式发生冲突时，指定样式获胜

CSS优先级，两个定律：

• 优先级高的样式覆盖优先级低的样式
• 同一优先级样式，后定义的覆盖先定义的，即后来者居上

CSS的层次选择器：

书写规范

CSS属性书写顺序：

• 影响文档流属性（布局属性）
• 自身盒模型属性
• 文本性属性
• 装饰性属性
• 其他属性

display属性

如果向要将元素从一个类型转换为另外一个类型，可以使用display
display: 属性值;
属性值一般有：
block 块元素
inline 行内元素
inline-block元素

block

1. 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素
2. 块元素内部可以容纳其他块元素或者行元素
3. 可以定义宽度、高度
4. 可以定义四个方向的margin

inline

1. 可以与其他行内元素位于同一行
2. 行内内部可以容纳其他行内元素，但不可以容纳块元素
3. 无法定义宽和高
4. 可以定义margin-left和margin-right，无法定义margin-top和margin-bottom

inline-block

1. 可以定义width和height
2. 可以与其他行内元素位于同一行

常见的inline-block元素有两个:img元素和input元素

display: none

隐藏元素，被隐藏的元素不占据原来的位置空间

text-align对：文字、inline元素（行内元素）、inline-block元素（行内块元素，img属于inline-block）其作用，但对块元素不起作用

line-height

vertical-align属性，对块元素无效

浮动布局

float属性只有三个取值：left、right、none
当一个元素定义了float:left或float:right，不管这个元素之前是inline、inline-block或者其他类型，都会变成block类型

浮动的影响

1. 对自身的影响
2. 对父元素的影响
3. 对兄弟元素的影响
4. 对子元素的影响

1.1 对自身的影响

转化为块元素，也就是display属性值为block

1.2 对父元素的影响

如果浮动元素的高度大于父元素的高度，或者父元素没有定义高度，则浮动会脱离父元素，或者称为“父元素高度塌陷”

如果为父元素定义了高度，而且父元素高度大于子元素高度，则父元素把子元素包起来

1.3 对兄弟元素的影响

1.3.1 兄弟元素是浮动元素

分两种情况讨论：
同一方向的兄弟元素
相反方向的兄弟元素

同一方向的兄弟元素，这些元素会从左到右、从上到下，一个接一个紧挨着排列
当一个浮动元素，碰到相反方向的兄弟元素时，这两个元素会向两边移动

1.3.2 兄弟元素不是浮动元素

浮动元素会脱离文档流，覆盖兄弟元素

1.4 对子元素的影响

如果一个元素是浮动元素，并且它的子元素也是浮动元素，则这个浮动元素会自适应地包含该子元素

浮动的负作用

• 父元素高度塌陷，从而导致边框不能撑开，背景色无法显示
• 页面布局错乱

清除浮动

常见的清除浮动的方法有三种：

1. clear: both
2. overflow: hidden
3. ::after 伪元素

clear: both
clear的属性取值有三种：left、right、both，一般用both即可

clear属性不是应用于浮动元素本身，而是应用于浮动元素后面的元素
但，多了一个div标签

overflow: hidden，应用于浮动元素的父元素，而不是当前的浮动元素

定位布局

position: absolute会将元素转换为 块元素

子绝父相

z-index

z-index，来控制z轴的大小，从而控制元素的堆叠顺序
z-index，只有在position: relative或absolute或fixed时，才有作用

z-index的属性值：

性能优化

可读性、可维护性、高性能

大约有八个方面：

1. 属性缩写
2. 语法压缩
3. 图片压缩
4. 选择器优化
5. CSS模块化
6. 压缩工具
7. CSS Sprite技术
8. 性能评估

padding: 20px;表示4个方向的内边距都是20px
padding: 20px 40px;表示上下内边距是20px，左右内边距40px
padding: 20px 40px 60px 80px;上、右、下、左的顺序，顺时针顺序
margin也是一样

• 浏览器对选择器规则是从右到左进行解析的
• 书写的最右边的选择器，被称为关键选择器