HTML5新特性header:headerfooter:footermain:mainbody注：headerfootermain语义标签在一个页面中只能出现一次。hgroup:标题组合nav:导航article:独立内容论坛postnewspaperarticleblogentryusercommentaside:辅助信息部分的内容：区域，功能和语义与div相同figure：描述图像或视频figcaption：描述图像或视频列的标题部分指定宽度和列数！当每列宽度大于100px时，会分3列显示；转换为2列；当浏览器再次收缩，2列中的每列不能再保持每列100px时，会再次转换为1列，以此类推。“100px”是不能低于每一列的宽度值，“3”表示指定要显示的列。与单独设置column-width或column-count相比，columns更加灵活。由于列属性集尚未纳入标准，因此大多数浏览器必须使用供应商前缀才能访问它。好在主流浏览器都能很好的支持。以下是各大浏览器的支持和前缀。columns是一个复合属性，包含列宽和列数的两个简写形式。意思是同时设置列数和列宽。//完整表单-webkit-columns:150px4;-moz-列：150px4；列：150px4；每列的column-rule属性设置---中间分割线column-rule:2pxdashedgray;columnedge不会影响布局，会根据布局的缩放自行调整是否显示。如果我们将页面缩放到只显示一列，它会自动消失。column-gapproperty//设置列间距-moz-column-gap:100px;任何通过CSS3弹性拉伸布局添加到父容器的容器都可以指定为Flex布局。显示：弹性；显示：内联柔性；显示：-webkit-flex；/*Safari,Chrome*/设置flex布局后，子元素的float、clear、vertical-align属性将失效。flex-direction:row;----布局的排列方向（主轴排列方向）row默认值显示为一行。Direction是当前文档的横向流向，默认是从左到右。column显示为列row-reverse显示为行。但是方向和行属性值是相反的，从右到左。column-reverse显示为列。但方向与柱子的方向相反。flex-wrap用于控制子项的整体单行显示是否换行显示。弹性包装：包装；不执行换行处理。现在包装;用于换行处理。换行；反向换行。flex-flow属性是flex-direction和flex-wrap的缩写，代表了flex布局的流动特性。第一个值表示方向，第二个值表示换行，以空格分隔。（有顺序）1.注意：默认情况下，弹性盒子里的子元素是左右排列的。2.注意事项：(1)当横轴为主轴时，不写宽高时，宽度由内容决定，高度由父容器决定。(2)当vertical为主轴时，不写width和height时，高度由content决定，width由父容器决定。3、注意：当子项的总宽度大于父容器时，会自动收缩（弹性优先大于自身固定大小）4、注意：当子项的内容已经达到父容器的最小宽度和高度，发生溢出。5、注意：elastic布局使用比较频繁的语法：6、注意：elastic布局的优点是做一维布局，grid布局做二维布局。justify-content属性决定子项在主轴方向上的对齐和分布。flex-start：子元素与起始位置对齐。flex-end：孩子们都对齐到结束位置。center：子项都居中对齐。space-between：表现两端对齐。Between表示中间，表示多余的空格只分配在元素的中间区域。space-around：around的意思是包围，意思是每个flexitem都被一个等宽的、互不干扰的空白包围起来。最后，边缘两侧的空白在视觉上只有中间空白宽度的一半。space-evenly：均匀的意思是匀称、均等。也就是说，从视觉上看，每个flexitem两边的margin是完全相等的。align-items：每行子元素的上下对齐align-items中的item指的是flex子项，所以align-items是指flex子项相对于flex容器的对齐方式在横轴的方向上。Value含义stretch默认值，flexitem被拉伸。flex-start的行为就好像它与容器的顶部对齐一样。flex-end的行为就好像容器是底部对齐的。center表现为垂直居中对齐。align-content：与justify-content相反的操作。交叉轴的对齐方式。（至少需要两行才能看到效果，因为是多行垂直对齐））默认：多行下，如果有几行，容器会分成几部分。默认是stretch的值和justify-content相同的值。添加到子容器的顺序：num可以通过设置order改变一个flex子容器的排序位置。所有flexitem的默认order属性值为0。flex-grow:num扩容（要看扩容效果，必须有空隙）0：默认值，不扩容1：要扩容，就会填补空白区域注意：子元素会按照设定的比例分配间隙，如果比例值之和小于1，那么就会有间隙，如果比例大于等于1，那么就不会有间隙。flex-shrink:1;默认值为1，属性中的shrink表示“收缩”，flex-shrink主要处理容器空间不足时单个元素的收缩比例。0表示不收缩，0.5收缩较小，2收缩较大flex-basis：定义分配剩余空间前元素的默认大小。flex-shrink是设置一个比例值，flex-basis是设置一个具体的值。flex属性是flex-grow、flex-shrink和flex-basis的缩写。弹性：1；1(flex-grow)1(flex-shrink)0(flex-basis)flex:0;0(flex-grow)1(flex-shrink)0(flex-basis)align-self:与align-items操作很相似，指的是控制单个flexitem的垂直对齐方式。响应式布局解决方案Responsivelayout?使用一套代码来适应不同的设备。它可以在PC和移动设备上运行。注：比较适合小型网站，个人博客，产品介绍页...viewport视口？PC端没有视口。viewport视口是一个只存在于移动端的概念。两个视口：视觉视口：固定大小，与移动设备相同。在上面。布局视口：大小可调，默认980，压缩到可视视口大小，下方。需要使布局视口与视觉视口大小相同？调整布局视口375->375,414->414width:414可以给定一个固定大小，99%的网站不会这样设置，因为不好适配。宽度：设备宽度动态，设备414->414设备375->375高度：不设置。初始比例：1.0最小比例：1.0最大比例：1.0用户可缩放：无no">CSS3媒体查询？媒体查询可以为不同的媒体类型定义不同的样式，实现响应式布局。您还可以为不同的分辨率设置不同的样式。1024以上分辨率：PC1024~768:padpro768~450:padmini,手机横屏450以下分辨率：手机竖屏mediaquery的语法是什么？常用媒体类型：所有用于所有设备的打印机打印和打印预览。screen用于电脑屏幕、平板电脑、智能手机等。speech适用于屏幕阅读器等发声设备。如何配置？@mediaalland(min-width:500px){}@mediaalland(min-width:500px)and(max-width:800px){}使用链接？
