记录第一次写HTML遇到的问题

公司app端最近的项目不是很紧张，后台人员工作量比较大，领导让我们研究一下react.js，要研究这个，要先学习html的知识，css知识，js知识，虽然之前都有了解，但是真到用时完全不是那么回事，所以就想着记录一下最近写页面遇到的问题，方便以后查看。

因为研究的是移动web端的页面，开始用标签写页面完全不知道怎么入手，感觉完全套在Android画界面的思想里面。各种css样式完全不知道怎么组合。后面没办法了问了一下后台人员，人给了一个思路，移动端页面用table写会比较简单，然后去用table试了一下，还真的比较好布置界面，就是代码量会比较长一点，最后想着反正能写出界面就行了。

随着慢慢的接触，网上都说现在界面基本都div布局，很少用table实现，应为table实现同一个布局估计需要100行代码，而用div实现基本50行左右就搞定了，然后又开始了div实现页面的布局。然后就有了下面的一些知识的记录：

• 首先说一下创建一个新的html页面，里面的body会有一个默认的margin值，取消的方法：

<style type="text/css">        * {            margin: 0;//把margin设置为0            padding: 0;        }    </style>

• 遇到的第二个问题，在div中设置了pading和margin值得时候，div设置width = 100%，这个div会超出页面的宽度。解决的办法：设置box-sizing,其有三个值可设置，分别如下

/***content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )*border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )inherit：规定应从父元素继承 box-sizing 属性的值。*/<style type="text/css">        * {            -webkit-box-sizing: border-box;            -moz-box-sizing: border-box;            box-sizing: border-box;        }    </style>

设置了border-box，这样可以随便设置标签的margin和pading值了。

• 下面说一下设置div中标签的摆放顺序的-伸缩盒，这个flex在css3中出现的，当时看的这个时候感觉完全是神器啊，画界面感觉简单好多呢，最后放手机上一看，完全没有在浏览器上看到的效果，最有一查才知道，flex只兼容 iOS Safari 7.0以上、Android Browser 4.4以上，Android Chrome 20.0以上。这简直。。。。。不说了，不过还是记录一下使用方法说明设置下面属性需要父类 display: flex;：

  <style type="text/css">    * {       flex-grow：<number>;//用数值来定义扩展比率。不允许负值       flex-shrink：<number>//用数值来定义收缩比率。不允许负值        flex-basis：<length> | <percentage>   | auto      | content        /*           宽度      百分比来定义宽度 无特定宽度   基于内容自动计算宽度*/         flex-flow：<' flex-direction '>       || <' flex-wrap '>;        /*          定义弹性盒子元素的排列方向     控制flex容器是单行或者多行*/        flex-direction：row   | row-reverse | column | column-reverse；        /*              左到右     右到左      上往下排    下往上排*/        flex-wrap：nowrap | wrap      | wrap-reverse；        /*          单行     多了会换行   反转wrap*/    }</style>

• 定位的问题

  /**
  static：
  对象遵循常规流。此时4个定位偏移属性不会被应用。
  relative：
  对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
  absolute：
  对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
  fixed：
  与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
  */
  position：static | relative | absolute | fixed;
  /**
  auto：
  元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。
  ：
  用整数值来定义堆叠级别。可以为负值。确定元素在当前层叠上下文中的层叠级别
  */
  z-index: auto | ;
  /**
  上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数（必须跟此标签必须要加position: absolute;）
  */
  clip：rect(| | | |)；

最后说一下浮动float，float在绝对定位和display为none时不生效。再用了float后，必须要清楚clear:both;。display常用属性：none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 inline：指定对象为内联元素。block：指定对象为块元素。list-item：指定对象为列表项目。inline-block：指定对象为内联块元素。
才接触，遇到的问题暂时就这些，在这里记录一下，方便时间久了，下次用的时候再这里查看一下