HTML学习6-盒模型
2021-04-18 08:29
标签：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）密码输入项 （2）单选按钮 (3) 多选按钮 (4) 下拉列表 （5）文本上传项 (6) 文本输入域 （7）提交按钮 (8)普通按钮 (9)重置按钮 (10)隐藏项 HTML学习6-盒模型 标签：w3c idt 特性 多选 add 密码 over 高度宽度 width 原文地址：https://www.cnblogs.com/dixingchen/p/12273744.html
下一篇：C#设计模式之1：策略模式