码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习6-盒模型

时间:2020-02-08 17:36:35      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:w3c   idt   特性   多选   add   密码   over   高度宽度   width   

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=" "/>

 

HTML学习6-盒模型

标签:w3c   idt   特性   多选   add   密码   over   高度宽度   width   

原文地址:https://www.cnblogs.com/dixingchen/p/12273744.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!