HTML5 CSS拓展

最新推荐文章于 2024-07-05 16:13:36 发布

扶羊人zz

最新推荐文章于 2024-07-05 16:13:36 发布

阅读量189

点赞数

文章标签： css html5

本文链接：https://blog.csdn.net/apple_58595131/article/details/130106630

版权

CSS属性 - text-overflow

BFC – Block Formatting Context

媒体查询

HTML5语义化元素

HTML5新增了语义化的元素：

<header>：头部元素
<nav>：导航元素
<section>：定义文档某个区域的元素
<article>：内容元素
<aside>：侧边栏元素
<footer>：尾部元素

Web端事实上一直希望可以 更好的嵌入音频和视频 , 特别是21世纪以来, 用户带宽的不断提高, 浏览器因为和视频变得非常容易.

在HTML5之前是通过flash或者其他插件实现的, 但是会有很多问题;
比如无法很好的支持HTML/CSS特性, 兼容性问题等等;

HTML5增加了对媒体类型的支持：

音频：<audio>
视频：<video>

Video和Audio使用方式有两个：

一方面我们可以直接通过元素使用video和autio；
另一方面我们可以通过JavaScript的API对其进行控制；

HTML5新增元素 - video

HTML <video> 元素用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。

video常见的属性:

每个视频都会有自己的格式, 浏览器的video并非支持所有的视频格式

在<video>元素中间的内容，是针对浏览器不支持此元素时候的降级处理。

内容一：通过<source>元素指定更多视频格式的源;
内容二：通过p/div等元素指定在浏览器不支持video元素的情况, 显示的内容;

HTML5新增元素 - audio

HTML <audio> 元素用于在文档中嵌入音频内容, 和video的用法非常类似

常见属性:

每个音频都会有自己的格式, 浏览器的audio并非支持所有的视频格式

具体的支持的格式可以通过下面的链接查看:

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs

在<audio>元素中间的内容，是针对浏览器不支持此元素时候的降级处理。

input元素的扩展内容

HTML5对 input元素 也进行了扩展，在之前我们已经学习过的HTML5的特性：

placeholder：输入框的占位文字
multiple：多个值
autofocus：自动聚焦

另外对于input的type值也有很多扩展：

date
time
number
tel
color
email

查看MDN文档:

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

新增全局属性 data-*

在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性:

data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到；
通常用于HTML和JavaScript数据之间的传递；

CSS属性 - white-space

white-space用于设置空白处理和换行规则

normal：合并所有连续的空白，允许单词超屏时自动换行
nowrap：合并所有连续的空白，不允许单词超屏时自动换行
pre：阻止合并所有连续的空白，不允许单词超屏时自动换行
pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行
pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行

CSS属性 - text-overflow

text-overflow通常用来设置文字溢出时的行为

clip：溢出的内容直接裁剪掉（字符可能会显示不完整）
ellipsis：溢出那行的结尾处用省略号表示

text-overflow生效的前提是overflow不为visible

常见的是将white-space、text-overflow、overflow一起使用：

CSS函数 - var

CSS中可以自定义属性

属性名需要以两个减号（--）开始;
属性值则可以是任何有效的CSS值;

我们可以通过var函数来使用:

规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)

所以推荐将自定义属性定义在html中，也可以使用 :root 选择器;

CSS函数 -calc

calc() 函数允许在声明 CSS 属性值时执行一些计算。

计算支持加减乘除的运算；

✓ + 和 - 运算符的两边必须要有空白字符。

通常用来设置一些元素的尺寸或者位置；

CSS函数 - blur

blur() 函数将 高斯模糊 应用于输出图片或者元素;

blur(radius)
radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊;

通常会和两个属性一起使用：

filter: 将模糊或颜色偏移等图形效果应用于元素;
backdrop-filter: 为元素后面的区域添加模糊或者其他效果;

CSS函数 – gradient

<gradient> 是一种 <image>CSS数据类型的子类型 ，用于表现 两种或多种颜色的过渡转变 。

CSS的<image>数据类型描述的是2D图形；
比如background-image、list-style-image、border-image、content等；
<image>常见的方式是通过url来引入一个图片资源；
它也可以通过CSS的<gradient> 函数来设置颜色的渐变；

<gradient>常见的函数实现有下面几种：

linear-gradient()：创建一个表示两种或多种颜色线性渐变的图片；
radial-gradient()：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；
repeating-linear-gradient()：创建一个由重复线性渐变组成的<image>；
repeating-radial-gradient()：创建一个重复的原点触发渐变组成的<image>；

linear-gradient：创建一个表示两种或多种颜色线性渐变的图片；

radial-gradient：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；

BFC – Block Formatting Context

FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的；

块级元素的布局属于Block Formatting Context（BFC）

也就是block level box都是在BFC中布局的；

行内级元素的布局属于Inline Formatting Context（IFC）

而inline level box都是在IFC中布局的；

MDN上有整理出在哪些具体的情况下会创建BFC：

根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、 row、tbody、thead、tfoot 的默认属性）或 inline-table）
overflow 计算值(Computed)不为 visible 的块元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
display 值为 flow-root 的元素

我们来看一下官方文档对BFC作用的描述：

简单概况如下：

在BFC中，box会在垂直方向上一个挨着一个的排布；
垂直方向的间距由margin属性决定；
在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；

那么这个东西有什么用呢？

解决margin的折叠问题；
解决浮动高度塌陷问题；

BFC的作用一：解决折叠问题（权威）

官方文档明确的有说

The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

那么如果我们让两个box是不同的BFC呢？那么就可以解决折叠问题。

给其中一个元素添加包含块（不同BFC），并添加overflow属性，值为除visible以外的值；