HTML学习6-盒模型

1、盒子模型

  （1）内容区（content）：width设置内容区宽度，height设置内容区高度。

   （2）内边距（padding）：纸盒子的内容区与边框之间的距离

   （3）边框（border）

         为元素设置边框必须指定三个样式：

          border-width：边框的宽度 。如果指定了四个值，会分别设置给上  右  下  左；如果指定了三个值，设置给上  左右  下 ；如果两个值，设置给上下  左右。

          border-color：边框的颜色  。 规则同（border-width）

          border-style：边框的样式（none没有边框     solid实线    dotted点状边框   dashed虚线     dobble双线）

    （4）外边距（margin）                                                          

           1、  如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值；垂直设置为auto，则外边距默认为0。

          2、垂直外边距的重叠：在网页中垂直方向的相邻外边距会发生外边距重叠，取外边距中的最大值。

2、溢出值（overflow）

  子元素默认在父元素内容区，如果子元素的大小超过了父元素内容区，则超过的部分会在父元素以外的位置显示，超过的那那内容，称为溢出内容，（默认在父元素外边显示）

    可选值： visible：默认值，不会对溢出部分做处理。

                   hidden：溢出的部分，会被修剪，不会显示。

                   scroll：会为父元素添加滚动条，通过滚动来查看完整内容（不论是否溢出，都会添加水平、垂直方向上的滚动条）

                   auto：会根据需求自动添加滚动条。

3、浮动（float）

      （1）  块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以是块元素脱离文档流。当为一个元素设置浮动之后，元素会立即脱离文档流，其下边的元素会立即向上移动，直到遇到父元素的边框或者其他浮动元素停止。如果浮动元素上边是一个没有浮动的元素，则不会超过块元素。浮动元素不会超过他的兄弟元素，最多一边齐。

    可选值：none：默认值，元素默认在文档流中排列

                   left：元素会立即脱离文档流，向页面左侧浮动

                   right：元素会立即脱离文档流，向页面右侧浮动

      （2）浮动的元素不会盖住文字，文字会环绕在浮动元素的周围

      （3）块元素脱离文档流后，高度宽度都会被内容撑开，内联元素脱离文档流后，会变成块元素。

 4、高度塌陷

     在文档流中，父元素默认被子元素内容撑开，但是当子元素设置浮动时，导致父元素高度塌陷，由于父元素高度塌陷，父元素下的所有元素都会向上移动，导致页面布局混乱。

  解决:根据W3C的标准，在页面中元素都有一个隐含属性叫做Block Formatting  Context简称BFC，该属性可以设置打开或者关闭。当开启元素的BFC以后，元素会有以下特性：

      1、父元素的垂直外边距不会和子元素重叠。

      2、开启BFC的元素不会被浮动元素所覆盖

      3、开启BFC的元素可以包含浮动的子元素

5、文本输入项

   （1）密码输入项  <input   type="password"  name="  "/>

   （2）单选按钮     <input  type="radio"  name="  "  value="  "  checked="  "/>

     (3) 多选按钮   <input type="checkbox"  name="  " value="  "  checked="  "/>

     (4) 下拉列表   <select name="   ">

                                <option  value="  "  selected="  ">北京</option>

                               <option>上海</option>

                           </select>

    （5）文本上传项   <input type="file"  name="  "/>

      (6)  文本输入域   <textarea  name="  "><textarea>

    （7）提交按钮  <input  type="submit"  value="  "/>

      (8)普通按钮  <input type="button" value="  "/>

     (9)重置按钮<input  type="reset"  value=" "/>

     (10)隐藏项<input  type="hidden" name=" "/>