HTML5 CSS3_网页设计答辩-CSDN博客

本文链接：https://blog.csdn.net/kingrome2017/article/details/84062276

HTML5 中新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

HTML 5 拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true，拖动什么 - ondragstart 和 setData()ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。 dataTransfer.setData() 方法设置被拖数据的数据类型和值，在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")，放到何处 - ondragover如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法，进行放置 - ondrop当放置被拖数据时，会发生 drop 事件，调用 preventDefault() 来避免浏览器对数据的默认处理

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

HTML 5 Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

HTML5 内联 SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

Canvas 与 SVG 的比较

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储当用户关闭浏览器窗口后，数据会被删除

em与rem的区别

px绝对长度单位 em相对长度单位
浏览器默认字体都是16px 那么1em=16px 以此类推 10px=0.625em
为了简化font-size的换算我们在body中写入下面的代码

body{font-size:62.5%}

缺点：
em会继承父级元素的大小所有字体都是相对于父元素的大小决定，如果一个设置了font-size:1.2em的元素在另一个设置了font-size:1.2em的元素里，那么最后的计算结果是1.2x1.2em

rem是相对长度那么10px=0.625rem 为了简化换算

html{font-size:62.5%}

rem是相对于根元素不想em一样使用级联的方式计算

css优先级算法

！important > 内联样式 > id > class > 标签 > 通配符 > 继承 > 默认

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表标签选择器和伪元素选择器，如div p，权值为0001。
第五等：通用选择器（*），子选择器（>），相邻同胞选择器（+），权值为0000

CSS等高布局

table元素中的table-cell元素默认就是等高的
flex布局flex为1
左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

flex弹性布局的应用场景

flex-direction决定主轴方向
flex-wrap是否换行
justify-content主轴上的对齐方式
align-items交叉轴上如何对

网格布局、圣杯布局、固定底栏布局、流式布局、悬挂式布局

瀑布流布局

因为图片的尺寸或者比例各不相同。所以想要不同尺寸的图片有好的显示效果，你就需要找到适合的方式

而瀑布流布局目前有两种形式：一是等宽型，二是等高型。我们先来说说等宽型。

利用绝对定位：
首先设置列宽度，然后计算能够展示的列数。
把图片设置为绝对定位，然后计算出每个图片的top，left值。
先把第一行图片排好，top 为 0，left 为列的索引*列宽。
每渲染一张都会计算一次 top，left 值。而且图片的顺序是打乱的

CSS3 column 属性：
column-count：指定列数
column-gap: 设置列之间的间距
图片的顺序是从上向下排列的，这个要看业务需求允不允许了。另外列数固定

二是等高型

Flex布局：
首先给图片一个固定高度，然后利用flex-grow的比例分配的特性
给图片设定object-fit属性让其保持比例充满容器

假如最后一行只有一张图片的话，他会被缩放到充满一行，导致图片只会显示非常小的一部分内容。所以，我们最后一行的图片不进行缩放处理即可。只需要添加以下css属性即可。

<style lang="scss" scoped>
	.waterfall-height-css {
	  &:after {
	    content: '';
	    display: block;
	    flex-grow: 99999;
	  }
	}
</style>

CSS选择符有哪些？哪些属性可以继承？

1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul > li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[rel = “external”]） 9.伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color
不可继承的样式：border padding margin width height;

清除浮动的方法

clear:both
父元素设置 overflow：hidden
父元素设置display:table

css伪元素与伪类

伪类用来添加一些选择器的特殊效果，比如：hover，：active ：link ：first-child :focus :lang
伪元素需要创建通常不存在于文档中的元素比如：before ：after

元素垂直居中

1、flex display:flex align-items:center
2、display:table 给外层的div设置display为table 当前div设置display:table-cell vertacal-align:moddle
3、用绝对定位，父元素设置relative,子元素添加absolute,如果元素高度不确定使用transform:translateY(-50%)

移动端1px

1px边框在高清屏下移动端的1px会很粗
ios给出的方案是写成0.5px但是安卓不支持
使用边框图片、使用伪元素、使用box-shadow实现

padding、margin百分比依据
一律参考包含盒的宽度
如果父元素宽度是200，那么子元素的margin：20% 就是 200X20%=40px

扩展知识

1.img是什么元素？

我第一反应是行内元素。判断一个元素是行内元素，还是块元素，无非就是看它是否是独占一行。img标签显然没有独占一行，固它是行内元素。这没有问题。

2.既然img是行内元素，那为什么可以通过CSS设置框高呢？

这一问，给我问住了，确实之前没有想过这个问题，翻了一下资料，大概比较好的解释就是:

尽管img是行内元素，但同时它也是置换元素，置换元素一般内置框高属性，因此可以设置其框高。

3.引申问题：那么什么又是“置换元素”呢？

置换元素就是会根据标签属性来显示的元素。反之就是非置换元素了。

比如img根据src属性来显示，input根据value属性来显示，因此可知道img和input是置换元素，当然同理textarea, select,也是置换元素

CSS3 2D 转换

translate() 方法
通过 translate(x , y) 方法，元素根据给定的 left（x 坐标）和 top（y 坐标）位置参数从其当前位置移动，x为正值向右移动，为负值向左移动；y为正值向下移动，为负值向上移动
rotate() 方法
控制元素顺时针旋转给定的角度。为正值，元素将顺时针旋转。为负值，元素将逆时针旋转。
scale() 方法
根据给定的宽度（X 轴）和高度（Y 轴）参数，控制元素的尺寸的增加、减少。
**skew() 方法 **
根据给定的水平线（X 轴）和垂直线（Y 轴）参数设置元素翻转给定的角度。