HTML是网页内容的载体,CSS样式是表现,JavaScript是用来实现网页上的特效效果与交互。总结自己遇到的一些知识点,查漏补缺,学习犹如逆水行舟,不进则退

本章内容:

1.HTML的音视频
2.css知识点补充
3.display与visibility
4.多媒体查询
5.flex弹性布局★★

1.HTML的音视频

1.1 HTML视频Video播放

最好的 HTML 解决方法:以下实例中使用了 4 种不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 <embed> 元素。

HTML5 + <object> +<embed>mp3文件路径为相对路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--创建固定宽高的播放器标签-->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
```

#### 1.2 audio音频文件的播放设置
src:MP3文件为相对路径
```html
<audio controls style="height:100px; width=100px">
<source src="../static_audio/yiluxiangbei.mp3" type="audio/mpeg">
<source src="../static_audio/yiluxiangbei.ogg" type="audio/ogg">
<embed height="50" width="100" src="../static_audio/yiluxiangbei.mp3">
</audio>

<audio>标签的属性值有:

  • autoplay:如果设置该属性,音频将自动播放,值为:autoplay;
  • controls:如果设置该属性,则显示音频控件(播放/暂停按钮),值:controls;
  • loop:如果设置该属性,则音频重复播放,值为:loop;
  • muted:如果设置该属性,则音频输出为静音,值:muted;
  • preload:规定当网页加载时,音频是否默认被加载以及如何被加载。值:auto/metadata/none;
  • src:规定音频文件的地址;

2.css知识点补充

文本格式:

  • text-align:center,right,justify :文本对齐方式
  • text-decoration :none 主要是用来删除链接的下划线
  • text-transform:uppercase,lowercase,capitalize 所有字句变成大写,小写或首字母大写
  • text-indent:50px 用来指定文本的第一行的缩进

css边框属性:

  • border: 边框样式的简写,可同时包含颜色,宽度,样式
  • border-width :属性为边框指定宽度
  • border-color :设置边框的颜色
  • border-style: 定义边框样式(可以使得四个边框分别由四个不同样式,满足上右下左四个次序)
  • border-(top,right,bottom,left)-style: 设置某一边的具体属性
  • border-radius :用于创建边框圆角(拓:四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。)
  • box-shadow: 在div中添加阴影属性,并设置阴影的颜色(10px 10px 5px #888888)



css渐变属性:

  • background-image:linear-gradient(direction,color1,color2… ):线性渐变(linear-gradient(to bottom right, red , yellow)从左上方开始渐变)
  • background-image:radial-gradient(direction,color1,color2… ):径向渐变

css的透明度:

  • rgba(a,b,c,d):rgba 是 CSS3 中的属性。rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值(0-255),最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1,越接近 1,代表透明度越低。
  • opacity: 0-1 设置透明度(<body>标签里面是不能直接设置背景图片的透明度的,要利用<div>标签)
  • filter:alpha(opacity=10-100) IE和更早的版本使用

css的超出部分显示省略号(…):

  • 文字不换行,超出部分显示…
1
2
3
4
5
.father-div {
overflow:hidden;
text-overflow:ellipsis; /*超出文本用省略号显示*/
white-space:nowrap; /*nowrap:只保留一个空白,文本不会换行*/
}
  • div内文字显示N行,超出N行部分省略号显示
1
2
3
4
5
6
7
8
/*使用了WebKit的CSS扩展属性,该方法适用于【WebKit浏览器及移动端】*/
.father-div{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2; /*必须结合的属性,限制在一个块元素显示的文本的行数*/
-webkit-box-orient: vertical; /*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
}

3.display与visibility

display通常可以设置为none、inline、block

visibility通常可以设置为hidden、visible

visibility:hidden 相当于display:none,能把元素隐藏起来,但是两者的区别在于:

  • display:none 不显示对应的元素,在文档布局中不再分配空间(回流+重绘)

  • visibility:hidden 隐藏对应元素,在文档布局中仍保留原来的空间(重绘)

display会将元素隐藏掉,并且位置不再被占据,释放空间,而visibility则会依旧占据原来的位置

2020-4-20:关于display属性的补充
之前我们已经在博客上大致描述了display属性(display与visibility

        所有主流浏览器都支持 display 属性。其次,我们都知道display 属性规定元素应该生成的框的类型,我们常用的display属性值有:

  • inline(默认值)
  • block
  • inline-block
  • none

要先弄明白display,先要清楚行内元素与块级元素:

行内元素特点
    1、和其他元素都在一行上;

    2、元素的高度、宽度、行高及顶部和底部边距不可设置;

    3、元素的宽度就是它包含的文字或图片的宽度,不可改变。 

块级元素特点
    1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,
      一个块级元素独占一行)

    2、元素的高度、宽度、行高以及顶和底边距都可设置。

    3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),
       除非设定一个宽度。

        在html中,a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span, strike , strong , sub , sup ,textarea , tt , u , var就是典型的行内元素(inline)元素。

        块级元素是可以设置宽高的,但是它的实际宽高是本身宽高+padding。block元素要单独占一行。内联元素不单独占一行,给他设置宽高是没有用的。

        在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素,从页使用a元素具有块状元素特点。

重点:

在上面,我们已经阐述了行内元素是不独占一行的,更不可以设置宽高,那么为什么img、input等却可以设置宽高?

这就涉及到一个新概念:置换元素(替换元素)和非置换元素(不可替换元素)

置换元素

一个内容不受CSS视觉格式化模型控制,CSS渲染模型不考虑对其内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。

浏览器会根据元素的标签和属性,来决定置换元素的具体显示内容。

它们所具有的特征为:在不使用css修饰时,元素的标签和属性也会影响元素的显示。

例如,浏览器会根据标签的src属性的值来读取图片信息并显示出来,而如果查看html代码,则看不到图片的实际内容;<input>标签的type属性决定是显示输入框,还是单选按钮等。

html5中的置换元素有 <img>、<input>、<textarea>、<select>、<object>、<iframe> 和 <canvas> 等。

置换元素在其显示中生成了框,这就是有些内联元素能够设置宽高的原因。

4.多媒体查询

针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。多媒体查询可以做很多的事情,例如:

  • viewport(视窗) 的宽度与高度
  • 设备的宽度与高度
  • 朝向 (智能手机横屏,竖屏) 。
  • 分辨率

多媒体查询基本语法:

1
2
3
@media  and|not|only   mediaType (media feature) {
CSS-Code;
}

对各个含义分析:

  • not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。

  • only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

  • mediaType:多媒体类型,有如下四种:all(所有多媒体设备),print(打印机设备),screen(用于电脑屏幕,平板,智能手机等。),speech(用于屏幕阅读器)

举例说明:

  1. 在屏幕可视窗口尺寸小于480像素时修改背景颜色为lightgreen
1
2
3
4
5
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
  1. 屏幕可视窗口尺寸大于480像素时修改背景色为orange
1
2
3
4
5
@media screen and (min-width: 480px) {
body {
background-color: orange;
}
}

5.flex弹性布局★★★

关于flex布局

我们知道当并列书写多个div标签,它们会纵向向下排位,如果我们想将多个div并列成一排,就得借助position,float,或display属性,这便是传统的盒模型做法

flex布局则是一种新的布局方案,通过修改父div的display属性,让父元素成为一个flex容器,从而可以自由的操作容器中子元素(项目)的排列方式

例如我们让多个div横向排列,传统做法是使用浮动,但浮空后因为脱离文档流的缘故,父元素会失去高度,这又涉及了清除浮动等一系列的问题。

而flex布局相对简单很多,修改父元素display:flex,你会发现div自动就排列成了一行,而且没有浮动之后的副作用,从回流角度考虑,flex的性能更优于float;随着浏览器不断兼容以及旧版本的淘汰,flex布局注定会成为更为流行的布局方案。

Webkit 内核的浏览器,必须加上-webkit前缀。

1
2
3
4
.box{
display: -webkit-flex; /* Safari */
display: flex;
}

注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

容器属性

注:下述的子元素项目为同一概念

flex-direction

用于控制子元素的排列方向与顺序

取值 描述
row 子元素横向排列(默认)
row-reverse 子元素横向排列,但顺序倒序
column 子元素纵向排列
column-reverse 子元素纵向排列,但顺序倒序

flex-wrap属性

取值:nowrap(默认) | wrap | wrap-reverse

用于控制项目是否换行,nowrap表示不换行

justify-content属性

取值:flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

用于控制项目在横轴的对齐方式:默认flex-start即左对齐、center为居中、flex-end为右对齐、space-between为左右两端对齐,即左右两侧项目都紧贴容器,且项目之间间距相等

align-items属性

取值:flex-start | flex-end | center | baseline | stretch(默认)

用于控制项目在纵轴排列方式,默认stretch即如果项目没设置高度,或高度为auto,则占满整个容器,下面第一张图的项目没设置高度,其余图片中均为60px

align-content

取值:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

用于控制多行项目的对齐方式,如果项目只有一行则不会起作用;默认stretch,即在项目没设置高度,或高度为auto情况下让项目填满整个容器,与align-items类似。注意,如下演示的12个项目我均没有设置高度。

子元素设置

上述我们已经阐述了容器属性,容器属性相当于我们给父元素设置flex布局后,其一级子元素会按照设置的容器属性布局,是将所有的一级子元素作为一个整体布局。这时候我们想要子元素个性化布局时,就需要给子元素设置margin属性

因此我们需要铭记:容器属性是整体打包设置子元素,margin属性设置各个子元素

div标签里的子div标签左对齐,右对齐,全局居中:当margin属性设置为auto,排序与实际相反

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#content {
display: flex;
height: 80px;
}
.box{
width: 80px;
height: 80px;
margin: auto;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div id="content">
<div class="box" style="background-color: blueviolet;"></div>
<div class="box" style="background-color: aquamarine;">
<span>Hello</span>
</div>
<div class="box" style="background-color: brown;"></div>
<div class="box" style="background-color: burlywood"></div>
</div>
</body>
</html>

参考文献


 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议