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

AsiaSun. 2022-06-23 15:52:45 阅读数:682

前端Web开发精品精品课

HTML进阶

语义化

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

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

 <figure>
<img src="img/[email protected]" >
<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:leftfloat: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也是一样

  • 浏览器对选择器规则是从右到左进行解析的
  • 书写的最右边的选择器,被称为关键选择器
版权声明:本文为[AsiaSun.]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/IOSSHAN/article/details/125372002