标签: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=" "/>
标签:w3c idt 特性 多选 add 密码 over 高度宽度 width
原文地址:https://www.cnblogs.com/dixingchen/p/12273744.html