百度前端课学习笔记1：HTML、CSS 基础

marsCatXDU_李经纬
876 阅读11分钟

百度前端课学习笔记1：HTML、CSS 基础

内容全部整理自 西安电子科技大学 2020双创周的百度前端课程，感谢组织课程的百度技术学院。感谢百度的工程师张老师和蔡老师的讲解，内容非常精彩，此为课程链接： mbd.baidu.com/webpage?typ…

该笔记基本按课程顺序记录，由于时间精力紧张，不会对本文进行全面的结构及内容整理
插图全部来自课堂直播画面

HTML 文档整体结构样例：

<html>		
    <head>
        <!--这里的内容不会被显示在正文中-->
        <!--包含字符集、标题、类别样式表等信息-->
    </head>

    <body>
        <!--...会被显示在正文中-->
    </body>
</html>

HTML 标签

标签（一个标签代表一个 element）中可以添加属性（Attribute），可以通过添加属性来调整其功能等

属性由属性名和属性值组成，其描述其所在的 HTML 标签上的特性，写在标签中，值只能为字符串。写法如：<标签名 属性名="属性值">

（注意要与 property 相区别，property 是 DOM 中的属性，其是 JS 中的对象）

<input>：基本的输入标签

type属性

默认属性 type="input"，还有其他一些强大的type：

file 选择文件的按钮

radio 单选框

range 可拖动的范围选择控件

placeholder 可以提供给用户的提示

<textarea>：多行文本控件

可以通过拖动右下角的标识来调整大小。其有rows和cols属性，值可以控制其默认尺寸

<textarea name="story" rows="5" cols="20">
	this is a text area
</textarea>

标签语义化

要给文本结构选择合乎语义的标签，这样可以：有助爬虫解析、开发者阅读、辅助屏幕阅读器等功能

实例

H5 提供了不少标签，可以描述网页。比如下面这些其实都是有的

  • section 可以用来放提纲
  • aside 可用于放与文章相关性不强的东西
  • footer 可以放与网站相关的内容

CSS

CSS 的长度单位（列举）

  • 绝对长度单位：px 像素

  • 相对长度单位

    • rem：相对于根元素字体大小进行调整。比如给 html 的字体设置为 16px，那么 1rem=16px。后面所有宽度都可以根据这个进行设置。比如 160px = 16rem；

    • 百分比：相对于当前元素的父元素的宽度取比例；

    • 视口 viewport：目前最为流行，可以真正适配所有屏幕宽度。

      • 桌面端的视口就是浏览器的可视区域

      • 移动端视口，是布局视口而非视觉视口
        视口单位有四种：vw（视口宽度的1%）、vh（视口高度的百分比）、vmin（当前vw、vh中较小的值）、vmax（大尺寸的百分比）

CSS 的引用

外部引用

在 <head> 中加入 <link> 标签，href 属性填写要引入的外部 css 文件地址，如上图红框

内部引用

在 <head> 中使用内联样式表，直接写在其中即可，如上图蓝框

标签中的 style（不推荐）

直接跟在标签后面，如上图绿框

CSS 的结构

  • 选择器（Element Selector）是一个表达式，我们用它来选中要被更改样式的元素（上图中直接修改 p 也就是 <p>）
  • 声明描述目标元素的 attribute ，每个声明使用分号隔开

选择器

  • 选择器可以直接选择标签，也可以选择 class（称为类选择器，以 . 开头），也可以选择 id（称为 id 选择器，以 # 开头）。当 id 选择器、 class 选择器同时存在时，前者优先级更高

  • 属性选择器：当标签属性存在时，应用样式。写法如下

  • 伪类选择器

  • 伪元素选择器，可以在已有元素后面加东西

  • 后代选择器，可以实现：选中所有被某个标签包着的子标签。写法如下图，被包含的写在包含其的标签后面，中间用一个空格隔开

此外还有相邻选择器、兄弟选择器等。

常见 CSS 样式

  • 应用于文字的样式，常见如下

  • 颜色以及背景色设置，当同一属性有多个值时，后面的优先级更高（如下图所示）

  • 边框常用的

  • 变化动画 transition、（伪类选择器）hover

  • 阴影和旋转

  • 一个巨强的网站。。。。

CSS 基础框盒模型（CSS Basic box model）

浏览器的渲染引擎会将根据该模型，将所有元素表示为一个个的矩形盒子。我们可以通过 CSS 来决定这些盒子的大小、位置及属性，每个盒子都包括：

实例以及对应关系如下图。width 描述的就是 content 的宽度。

盒模型的 margin 折叠

文档流中相邻的两个盒子会出现边距（margin）折叠的问题——两盒子之间的实际距离等于两个盒子各自 margin 中值更大的那个

该问题可以使用 “块格式化上下文（BFC）” 来解决

BFC Block Formatting Context

其是一个渲染区域，有自己的渲染规则，决定了它的子元素将如何定位，以及与其他元素之间的关系和相互之间的作用。

这个区域是相对文档中其他区域独立的，里面的元素出不去外面的元素进不来，无法相互影响

CSS 实现页面布局

默认的元素布局方式

文档流：从上到下、从左到右输出文档的内容。

块级元素通常独占一行，可以定义自己的宽高；

行内元素无法控制自己的宽高，而是由自己的内容填充而来。但其可以与其他行内元素处于同一个块级元素之内；

行内块级元素，可以定义自己的宽高，也可以和其他行内元素处在一行中。

布局实例

直接使用 display: inline-block 属性可以将这几个盒子变成行内块级盒子，排在同一行里面

vertical-align

  • top：左侧的盒子在下面，这是因为其当前的对齐方式是【基线对齐】，这个小盒子和其父元素（即，body）中间的基线对齐。想要让它飘到最顶端，可以通过在其上添加 vertical-align=top 属性来实现，该属性让其所在元素对齐当前行中最高的元素的顶部

  • center：让该元素对齐父元素中中央的“基线”

    此处看着不明显，是因为该 div 的父元素 body 高度太大了

上面的宽度都是写死的，这样麻烦而且不能适应多变的页面尺寸变化需要，因此我们可以理用盒子的一些特性来实现自适应布局

多列自适应布局

  • 利用块级元素自身能够占满当行容器的特性来实现多列自适应布局

    右侧盒子不设置宽度，能够自动填满页面剩余宽度

    两边设置宽度，中间自适应

块格式化上下文BFC （Block Formatting Context）

通过红框中的三行，实现了 BFC

其实一个渲染区域，有自己的渲染规则，决定了它的子元素将如何定位，以及与其他元素之间的关系和相互之间的作用。这个区域是相对文档中其他区域独立的，里面的元素出不去外面的元素进不来，无法相互影响。

定位布局 ：position 属性

position 定位布局让元素从正常的文档流中本应该在的位置，移动到其他的位置。我们可以通过定位，来实现如上图这样的丰富的布局效果。

position: relative		// 相对定位
position: absolute		// 绝对定位
position: fixed			// 固定定位

relative

元素相对于元素在文档流中所在的位置进行偏移。也就是基于其本应在的位置进行移动

fixed

针对整个浏览器“视口”进行偏移，和页面其他元素无关，不受页面控制。即使是直接用 html 元素加限制也是控制不了的。即使页面整个在滚动的时候也不会影响其位置，其位置仅与视口有关。

absolute

相对于其父元素中 position 属性不为 static（默认值）的元素进行偏移。关于 absolute 有以下的示例进行解释：

没有其他元素设置为 position: relative 时，position 值为 absolute 的 son 元素算作页面的根元素，相对于整个页面进行定位

将 grandfather 设置为 position: relative 时，son 便开始相对 grandfather 进行定位

当直接包裹 son 的 father 元素添加 position: relative 属性后，son 便相对于 father 进行定位。也就是说被设置为 position: absolute 的元素会相对于距离其最近的 position 值不为默认值的元素进行定位

实例：水平垂直居中布局

  • 将左右 margin 设置为 auto 即可。因为父级容器的宽度等于内部子元素宽度加子元素 margin 宽度的整体宽度，如果元素没有宽度就默认占满一行。而当边距为 auto 时，就会左边距= 右边距，如此，盒子就被推到了中间
  • 但垂直居中就无法通过上面的方法实现，因为容器的高度不固定且容器不会自动占满页面的100%。
  • transform: translateY(-50%) 意思是让它在 Y 轴上移动其自身高度的 50%。其他的很简单在此不再赘述

Flex 布局

横轴是【主轴】，纵轴是【交叉轴】

常用属性：

flex-direction		// 决定容器内各个元素的排列方向
flex-wrap
justify-content
align-items
flex-grow

flex-direction：排列方向

  • 默认是沿着主轴顺序排列

  • flex-direction: row-reverse 方向反过来

  • flex-direction: column 可以变成交叉轴顺序排列，加上 reverse 就会同样纵向逆序排列

flex-warp

当我们不进行任何设置时，父容器宽度压缩时，item 宽度也会随之伸缩，不会被挤到下一行之类的

实现定宽换行：（同样有 reverse ）

justify-content 决定 item 在主轴上的对齐方式

  • flex-end 主轴末尾对齐。flex-start 同理，是左侧

  • flex-center 在主轴中间

  • space-between 两边对齐，中间等宽

  • space-around 每个 item 之间的间距相等，item 与边框的间距是 item 之间间距的一半。

align-items 交叉轴上的属性

  • align-items: center ：以中间线对齐分布

  • flex-start 以交叉轴起始对齐。flex-end 同理

  • baseline 基线，包含文字的最底部的横线。以文字最底部对

flex-grow：定义 flex 中每个 item 的放大比例

  • 默认值为 0，如果设置为1，则其中元素总是等分容器内部空间

  • 给某个元素增加一个 flex-grow 属性，就会修改其占有的父容器的比例。如下图，无论页面宽度如何变化，占的宽度比总是 1：2：1

flex 实现水平垂直居中

直接将整个页面设置为 flex 容器。这样元素作为 item 就会自动走到该容器的中间

flex 实现双飞翼

  • 最外层的容器作为 flex 容器包含其余元素

  • flex-basis 定义【分配多余空间前，该 item 在主轴上占据的宽度】，浏览器会根据 flex-basis 来确认主轴上是否还有多余的空间，如果有，则按照 flex-grow: 1 来让中间的元素自动填满剩余空间

CSS 的移动端适配

方案如下：

  • 设置 meta 标签

    控制好页面的宽度，防止样式错乱

  • 媒体查询（核心）

    • 针对不同的屏幕尺寸，设置对应的样式。使用 50% 规定宽度，可控制总占页面宽度 50%

  • 百分比布局

  • rem 布局

  • 视口单位：vh、vw

  • 响应式布局的成型方案：flex（最强大）

浏览器的渲染原理

下载到 HTML、CSS 文件后解析生成两个树，两个树结合为渲染树。渲染树的位置信息通过布局进行添加，布局时从渲染树的根节点开始遍历，在每个节点查找该元素的宽高位置等信息，这样浏览器就确定了各个元素的位置等信息，进行绘制显示

每次对 DOM、CSS 的修改，都会引起浏览器的彻底重新计算和页面绘制，会影响页面性能。需要想办法降低 CSS 修改对于浏览器性能的影响。

avatar
文章
阅读
粉丝