表格+表单

Posted 2021-03-06 xsqlj

一、表格

1、表格

   thead  表头

  tbody    表体（浏览器默认加上）

   tfoot     表尾

2、<colgroup  span=" 2"> </colgroup>  把几列分成一组

3、<th> </ th>  列标题，默认文本加粗，上下居中，左右居中

4、<caption>表格标题 </caption>

二、表格属性

1、border-spacing:10px;  单元格之间的间距，必须给table标签上添加

2、border-collapse:separate/collapse;  默认值/合并边框线    在table标签上添加

3、empty-cells:show/hide;单元格无内容时显示/隐藏，有内容会默认显示

4、 table-layout:auto/fixed;  单元格宽度随内容变大，自适应，宽度不固定/ 单元格宽度不会随内容变大，固定单元格宽度（高度限制不了）

三、表单元素

1、input

          type="radio"   单选按钮，同一组的name值必须相同，才可以达到互斥效果     

          type="ckeckbox"多选框  注意：name值不需要一致

注： checked="checked" 默认选中    disabled="disabled"指禁用

2、<select>  <option ></option>  <option ></option>...</select>    下拉列表>下拉列表项      selected="selected"默认选中下拉项     

3、<textarea cols=" "  rows=" "    >             多行文本输入框

     cols="  "  改变元素宽    rows="  "改变元素高     注意：指容纳字符数，不是px为单位，但是有偏差，可以通过设置样式修改大小             resize:none;禁止拖拽（默认可以拖拽大小）

4、<input type="file">上传文件

5、<fieldset>   <legend></legend>  </fieldset>  表单字段子标题

注意：一个fieldset里面，只有一个直系lenged

6、lable  绑定选中标签

例如：<input type="radio" id="nc">  <label for="nc">男</label>

四、BFC

BFC(Block formatting context)直译为“块级格式化上下文”,是一个特殊功能的容器

1、bfc区域规则：bfc区域中的元素垂直摆放。bfc区域中的元素间距用margin实现，属于同一个BFC的两个相邻Box（元素）的margin会发生重叠（按照最大margin值设置）。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。每个元素的左外边距挨着父级元素的左边框。bfc区域不会与float元素重叠。计算bfc元素高度时，浮动元素也参与计算。

2、bfc区域触发条件：

（1）html(根元素）是一个最大的bfc区域

（2）position属性值为absolute和fixed时，是bfc区域

（3）display为inline-block    table-cell     table-inline-block,    table-cell,     table-caption,    flex,    inline-flex

时会触发bfc区域

（4）overflow不为visible

 （5）float不为none;

3、应用：两列布局（一个元素浮动，另一个元素触发为bfc区域（拉动浏览器时，一个不动，一个随之变大，bfc区域和浮动元素不重叠））

                三列布局