h5 表单居中_H5基础结构CSS3.0常用样式伸缩布局整理

一：html5的基础结构

   //文档声明类型

   //表示html文档开始，声明采用何种语言，zh-cn(简体中文)，en(英文)

   //包含元数据内容，包括link、meta、Javascript、title、style等在页面不可见的元数据

　　   //声明字符编码，告诉浏览器采用什么编码，一般来说常用utf-8

标题内容

---

二：html5 新标签  语义标记元素增加  一大特点

     结构标记的作用：

  (1) 经常使用

元素设计页面的大致布局，如页头、导航栏、主要内容部分和页脚等

             - 布局复杂时，会出现大量的

元素

             - 元素相互形成嵌套，页面会难以处理和维护

  (2) HTML5 提供了结构标记，专门用于标识常见的结构

             - 如页头，页脚等

            - 可以很方便的实现页面各个部分的划分

            - 使得文档结构更清晰明确，代码更容易阅读

     1. 

                header标签，用于定义文档的页眉

              - 通常是一些介绍信息，导航信息，站点标题或者logo 图片等

               - 可以在页面上出现多次，可以作为任何部分的头部定义

              2.            nav 元素来定义页面的导航链接部分            - 用于包含表示链接的其他元素        3.

        section 元素

        (1) 标签用于定义文档中的节         (2) 表示文档中的一个具体的组成部分                - 常用于为页面上的内容分块 ，比如定义章节、页眉、页脚或文档中的其他部分                - 可以使用元素为内容添加标题

    4.

          article 元素

      (1) 标签常用于定义独立于文档的其他部分的内容

            - 比如论坛的一个帖子、一篇报纸文章、某个博客条目或者用户评论等

   5.

         aside 元素       (1) 元素常用于定义页面的一些额外组成部分           - 如广告栏、侧边栏和相关引用信息等

    6.

    footer元素   (1) 元素常用于定义某区域的脚注信息       - 常用来定义文档的页脚，以包含友情链接、版权信息和作者信息等       - 一个页面中也可以包含多个 元素

三：html5 文字效果

text-shadow: 5px 5px 5px #FF0000;

text-shadow 文字阴影

5px 5px 5px 分别是 阴影X距离  Y距离 模糊程度

文字换行  word-wrap:break-word;

以下可以测试一下

text-justify规定当 text-align 设置为 "justify" 时所使用的对齐方法。

text-outline规定文本的轮廓。

text-overflow规定当文本溢出包含元素时发生的事情。

text-shadow向文本添加阴影。

text-wrap   规定文本的换行规则。

word-break规定非中日韩文本的换行规则。

word-wrap允许对长的不可分割的单词进行分割并换行到下一行。

CSS圆角边框

div{border-radius:5px 5px 0 0;} 

四：盒模型可以自定义计算方式

  box-sizing 是属于CSS3.0版本 样式

  box-sizing: content-box|border-box|inherit;

  box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素

content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit规定应从父元素继承 box-sizing 属性的值。

五：伸缩布局

2009年W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局)，它可以简便、完整、响应式地实现各种页面布局

 伸缩布局在每个元素上引入了主轴 和侧轴 的概念 也可以理解 X轴 Y轴

主轴、主轴方向：沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。伸缩容器额主轴，伸缩项目主要沿着这条轴进行布局。重要，它不一定是水平的，这主要取决于 flex-direction 属性。如果其取值为 column ，主轴的方向为纵向的。

主轴起点、主轴终点：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。也就是说，伸缩项目放置在伸缩容器内从主轴起点( main-start )向主轴终点( main-end )方向。

主轴长度、主轴长度属性：伸缩项目在主轴的方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是 width 或 height 属性，由哪一个对着主轴的方向决定。

侧轴、侧轴方向：与主轴垂直的轴称做侧轴，侧轴是侧轴方向的延伸。主要取决于主轴的方向。

侧轴起点、侧轴终点：伸缩项目的配置从容器的侧轴起点边开始，往侧轴终点边结束。也就是说，伸缩项目放置在伸缩容器内从侧轴起点( cross-start )向侧轴终点( cross-end )方向。

侧轴长度、侧轴长度属性：伸缩项目在侧轴的方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是 width 或 height 属性，由哪一个对着侧轴的方向决定。

通过设置 display 属性显式地给一个元素设置为 flex 或者 inline-flex ，这个容器就是一个伸缩容器。其中设置为 flex 的容器被渲染成为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。若元素的 display 的指定值是 inline-flex 且元素是一个浮动或绝对定位元素，则display的计算值是flex。

一个伸缩容器的内容具有零个以上的伸缩项目——伸缩容器的每个子元素(除了需要盒修复的元素之外)都会成为一个伸缩项目。且浏览器会将任何直接在伸缩容器里的连续文字块包起来成为匿名伸缩项目。

总结：容器默认存在两根轴：水平的主轴( main axis )和垂直的交叉轴( cross axis )。主轴的开始位置(与边框的交叉点)叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。

项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。

        display: flex;

flex-direction: column; 排列方式 从上到下

flex-direction: column-reverse; 从下到上

        flex-direction: row;

        flex-direction: row-reverse ;从右到左

        flex-wrap: wrap;自动换行

        flex-wrap: nowrap;不自动换行[默认]

        justify-content: center;所有列居中

        justify-content: flex-end;

        justify-content: flex-start;

        justify-content: space-around;同下，但两边保留一半空间

        justify-content: space-between;伸缩项目平局分布

        align-items: baseline;

        align-items:center;

        align-items:flex-end;

        align-items: flex-start;

        align-items: inherit;

1 flex-grow属性 

2 flex-shrink属性

3 flex-basis属性 

4 flex属性

5 align-self属性

6 order属性

CSS3.0 还有渐变 动画 边框圆角异形 H5表单标签的增加和用法 就不一一整理了，本整理内容讲述最常用的知识点。