H5C3和Html，css相比有什么变化
Html5和Html的变化：
- 文档声明的区别:html5的文档声明书写方便,精简,只有<!DOCTYPE html>
- 结构语义的区别:html5增添了许多具有语义化的标签,如:
<article>表示页面中一块与上下文不相关的独立内容。比如一篇文章。
<aside>表示article元素内容之外的、与article元素内容相关的辅助信息
<header>表示页面头部<footer>表示页面底部
4.绘图区别:
HTML：指可伸缩矢量图形，用于定义网络的基于矢量的图形。
HTML5：HTML5的canvas元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布每一个像素。
5.音频和视频的支持
HTML如果不使用Flash播放器支持，它不支持音频和视频。HTML5使用<audio>和<video>标签来支持音频和视频控制。
6.语法的处理HTML无法处理不准确的语法；HTML5能够处理不准确的语法。
css和css3的区别
......
box-sizing(控制盒模型的组成模式) content-box border-box
.......
标签元素分类，和特点
行内元素 常见的有<a><span><b><i><strong>...
- 宽度和高度由其内容自动填充，不可设置宽高
- 相邻的行内元素或行内块元素在同一行显示
- 只可容纳行内元素与内容
- 水平方向上的内外边距可以设置，垂直方向无效
块状元素<div><p><h1-h6><ul><li><footer><section><nav>....
- 有默认的宽高,宽是父元素的100%,高是内容撑起来的
- 宽高和内外边距的四个方向都可以设置
- 独占一行
- 可以容纳任何元素(h1,p元素不能容纳块状元素)
行内块元素<img><input><option><video><audio><button>...
- 有默认的宽高,是元素本身的宽高
- 宽高和内外边距的四个方向都可以设置
- 相邻的行内元素或行内块元素在同一行显示
- 一般不容纳其他元素
display:block；(将元素变为块级元素)
display:inline； (将元素变为行级元素)
display：inline-block；（将元素变为行级块元素）
圣杯布局（双飞翼布局）有哪几种实现方式
| （1）calc ：中间盒子宽度设置为width：calc(100%-两边宽度之和),左中右三个盒子都 设置为float：left |
| （2）浮动：左中两个盒子分别设置为float：left/float：right， 右边盒子设置左右内边 距padding； |
| （3）定位position：左右两个盒子设置为position：absolute；top：0； left：0/right:0; 中间盒子设置左右内边距padding； |
| （4）弹性布局扩张因子：左右两个盒子设置固定宽度；body设置display：flex； 中间 盒子设置flex-grow：1； |
弹性盒模型有哪些属性和属性值，什么效果
| display:flex | 当前的容器时弹性父容器 |
| flex-directionsh设置项目排列方向（主轴） | Row默认值从左向右 Row-reverse从右向左 Column从上到下 Column-reverse从下向上 |
| justify-content设置项目在主轴方向上的对齐方式 | flex-start（默认值）：左对齐； flex-end：右对齐； center： 居中； space-between：两端对齐，项目之间的间隔都相等； space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍； |
| align-items设置项目在交叉轴方向上对齐方式 | stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 |
| flex-warp设置超出容器的项目是否换行 | nowrap（默认值）：项目显示在一行中，默认情况下会缩小它们以适应Flex容器的宽度; wrap：如果需要，从左到右和从上到下，弹性项目将显示在多行中; wrap-reverse：如果需要，从左到右和从下到上，弹性项目将显示在多行中; |
| align-content设置项目换行的对齐方式 | flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。 |
常见的盒子模型有哪些，有什么区别
| "box-sizing：content-box；（普通盒模型、默认） | 标准盒模型：设置的宽度就等于内容的宽度 |
| box-sizing：border-box；（怪异盒模型、IE盒模型） | 怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度" |
说一下对浮动的理解，（什么是浮动，有什么用，怎么用，有什么问题，怎么清除浮动）
浮动：元素脱离标准流，漂浮到指定位置的过程，设置浮动的初衷是实现文字环绕图片的效果
有什么用: 块级元素相邻
怎么用：float：left左浮动right右浮动
问题：添加浮动后的子元素撑不开父元素的高度（因为浮动不占位置）
清除浮动：
（1）额外标签法：给子元素添加额外的兄弟元素（不规范。不够语义化）
（2）为父级元素添加overflow：hidden；（有时会隐藏了不需要隐藏的元素）
（3）伪元素清除浮动,父元素的类名:after
content: "";
display: block;
height: 0;
clear:both;
父元素的类名：*zoom: 1;/*ie6清除浮动的方式 只有IE6-IE7执行，其他浏览器不执行*/
（4）双伪元素清除浮动、父元素的类名:after,父元素的类名:before{
content: "";
display: table;}
父元素的类名:after{
clear: both;
}
父元素的类名：*zoom: 1;/*ie6清除浮动的方式 只有IE6-IE7执行，其他浏览器不执行*/
伪类有哪些，作用和书写顺序
| ：link | 未访问的链接 |
| ：visited | 已访问的链接 |
| ：hover | 鼠标移入时 |
| ：active | 鼠标移出时 |
书写顺序：:link :visited :hover :active
a标签可以全部用,普通标签只能用鼠标移入和移出
如何去掉相邻两个图片中间的白边
(1)转为块级元素在浮动
(2)为父元素添加font-size：0；
如何实现文字垂直水平居中，盒子垂直水平居中
文字垂直居中：设置line-height的值和为div盒子的height值
文字水平居中：text-algin:center;
盒子垂直居中: 通过弹性布局改变主轴方向以及设置justify-content：center；
盒子水平居中: margin：auto；
单行文本溢出显示省略号，多行文本溢出显示省略号
单行：white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
多行：height:auto;
-webkit-line-clamp:3;
display:-webkit-box;
-webkit-box-orient:vertical;
Overflow:hidden;
549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
