CSS-表格表单_BFC

CSS-表格表单_BFC

一、表格详解

1、表格作用：表格最主要的作用就是为了将后台拿到的数据整齐划一的显示在页面中

2、表格基础语法：

<table>==================表格标签
	<tr>=================表格的行
		<td>文本</td>====表格的列
	</tr>
</table>

3、示例图片

、

4、table的标签属性

（1）宽度属性

属性取值：width="数值"
单位：取值为px
    取值不带单位时默认是像素单位
    单位可以设置百分比

（2）高度属性

属性取值：height="数值"
单位：取值为px
    取值不带单位时默认是像素单位
    高度单位不能直接设置百分比，因为设置百分比有继承性，父元素body默认是没有高度的

（3）边框属性

属性取值：border="数值"
单位：无

（4）边框颜色

属性取值：bordercolor="色值"

（5）背景颜色

属性取值：bgcolor="色值"

（6）表格水平对齐方式

属性取值：align="left/right/center"
    left------表格靠左显示
    right-----表格靠右显示
    center----表格居中显示

（7）调整单元格与单元格之间的间距

属性取值：cellspacing="数值+单位"
单位：px，取值不带单位时默认是像素单位

（8）调整单元格与内容之间的间距

属性取值：cellpadding="数值+单位"
单位：px，取值不带单位时默认是像素单位

（9）表格内部横纵边框线

属性取值：rules="group/rows/cols"
    group------显示内部横纵线
    rows-------只显示内部横线
    cols-------只显示内部纵线

（10）表格外边框线

属性取值：frame="above/below/lhs/rhs/box"
    above---------只显示上边框线
    below---------只显示下边框线
    lhs-----------只显示左边框线
    rhs-----------只显示右边框线
    box-----------显示四侧边框线

5、行tr的标签属性

（1）高度属性

属性取值：height="数值+单位"
    单位可省略，不写单位时默认为像素
    当前行设置高度后会影响这一行所有单元格的高度

（2）背景颜色

属性取值：bgcolor="色值"
    会影响这一整行中所有td的背景颜色

（3）文本水平对齐

属性取值：align="left/right/center"
    left--------文本靠左显示
    right-------文本靠右显示
    center------文本居中显示
    影响的是一整行单元格里面的文本水平对齐方式

（4）文本垂直对齐

属性取值：valign="top/bottom/middle"
    top-----------文本靠上显示
    bottom--------文本靠下显示
    middle--------文本居中显示
    影响的是一整行单元格里面的文本垂直对齐方式

6、单元格td的标签属性

（1）宽度属性

width="数值+单位"
    只要给一个单元格设置了宽度，会同时影响这一列所有单元格的宽度

（2）高度属性

height="数值+单位"
    只要给一个单元格设置了高度，会同时影响这一行所有单元格的高度

（3）背景颜色

bgcolor="色值"
    只设置这一个单元格的背景颜色

（4）文本水平对齐方式

align="left/right/center"
    left--------文本靠左显示
    right-------文本靠右显示
    center------文本居中显示
    只会影响这一个单元格的水平对齐方式

（5）文本垂直对齐方式

valign="top/bottom/middle"
    top-----------文本靠上显示
    bottom--------文本靠下显示
    middle--------文本居中显示
    只会影响这一个单元格的文本垂直对齐方式

（6）单元格的合并属性

1、水平合并
    跨列：colspan="数值"
2、垂直合并
    跨行：rowspan="数值"
数值：多少个单元格合并了则需要写几
备注：合并后的单元格需要被注释掉/删除掉

7、表格的CSS属性

（1）边框属性

属性：border
特点：只会给 table 标签最外层添加一个边框

要使内部也加边框，则需给td标签再添加一个边框（border）即可

（2）调整单元格与单元格之间的间距

属性：border-spacing
注意：当取值为0px时，边框默认是内外边框像素之和

（3）单元格边框合并

属性：border-collapse="collapse/separate"
    collapse--------代表边框线的合并
    separate--------代表默认值，即边框线不合并

（4）固定单元格宽度

属性：table-layout="auto/fixed"
    auto----自动，只要文本过多，单元格就会被撑大，灵活性比较强，但每次都会重新加载计算表格的大小
    fixed---固定，拥有一个固定的宽度，单元格不会被撑大，固定宽度不用每次加载计算表格的大小，但是不太灵活

（5）取消单元格内边距

目的：为了取消文本与单元格之间的距离
属性：padding

（6）隐藏空内容单元格

目的：定义当单元格无内容时，是否显示该单元格的边框区域
属性：empty-cells="show/hide"
    show--------显示
    hide--------隐藏

8、表格其他标签

（1）表格的标题

HTML标签：
<caption></caption>
注意事项：需要放在table标签里面，并且在第一个tr出现的位置之前

（2）表格的标题单元格

HTML标签：
<th></th>
书写位置：在tr标签内书写，替换的是td标签
效果：默认加粗并居中显示，且可以与td同时存在

（3）表格的行分组标签

HTML标签：
表格的头部----<thead></thead>
表格的主体----<tbody></tbody>
表格的尾部----<tfoot></tfoot>
书写位置：在body标签内书写
使用时注意事项：
    1.行分组标签只允许有一个头部有个尾部，但是可以有多个主体
    2.如果没有使用行分组标签的话，默认是将所有的tr分配在了对应的tbody里面
    3.如果想要使用CSS查找元素的话，则需要注意tbody

（4）表格的列分组标签

HTML标签：
<colgroup span="数字"></colgroup>
    数字代表的是让多少列划分为一组---当前是从未分组的列开始划分，已分组的列则不进入当前划分
书写位置：在body标签内书写

二、表单详解（补充）

1、表单作用：通过使用form标签来收集用户信息，然后通过地址栏传递数据，将数据上传到服务器上面

2、表单基础语法

<form action=”跳转地址” method=”提交方法”  target=”打开方式”></form>

3、表单应用场景：注册登录页面、搜索框页面等等

三、表单基础控件

表单控件分为四大类：input类型、select类型、textarea类型、其他类型

input类型:
    基本语法 : <input type=”?”> 主要研究的就是type的取值问题
select类型
    <select><option>文本</option></select>
textarea类型
    <textarea></textarea>
其他类型
    字段集和字段集标题;  引入浮动框架集

1、input类型

（1）图像域按钮

目的：让一个图片作为按钮进行显示，即本质就是一个提交按钮（图片为破损文件时，显示的是提交两个字）
基本语法：
    <input type="image" src="图片的路径">
    如果使用的是图像域按钮的话，地址栏传递的参数x,y，代表的是鼠标的坐标

（2）文件上传

可以上传多种类型的文件：txt、word、png、jpg、excel
基本语法：
    <input type="file">

（3）隐藏域

目的：会隐藏一段数据或者信息， 通过value属性直接上传到服务器上面
基本语法：
    <input type="hidden">
示例：
    隐藏数据：<input type="hidden" value="你是白雪公主">

（4）单选框

理解：即单选按钮，在多个里面选择一个                    
基本语法：
    <input type="radio">男<input type="radio">女
属性：checked，添加该属性时，表明该单选框默认选中

遇到的问题：
    共选问题，即全部都选中了
解决共选问题：
    通过name属性完成解决共选问题----让他们的name取值一致，用来分组，且相同组别必须保持一致，不同组别不能一致
示例：
    婚姻状况：<input type="radio" name="marry">已婚
              <input type="radio" name="marry" checked>未婚

（5）多选框

理解：多个里面选择多个选项
基本语法：
    <input type="checkbox">
属性：checked，添加该属性时，表明该选框默认选中
示例：
    兴趣爱好：<input type="checkbox" checked>篮球
              <input type="checkbox">足球
              <input type="checkbox" checked>羽毛球
              <input type="checkbox">瑜伽

（6）H5新增标签

目的：为了提高用户体验度，使用之后，点击文本也能选中前面的控件
基本语法：
    <input type="radio" id="值"><label for="值">文本</label>
    备注：书写时，其中两个“值”需要相等，才能将其关联起来
示例：
    性别选择：<input type="radio" name="sex" id="boy"><label for="boy">男</label>
              <input type="radio" name="sex" checked>女<br>

2、select类型

（1）标签书写格式

<select>-----------------------------下拉菜单
    <option>文本</option>------------下拉菜单选项
    <option>文本</option>
</select>

（2）select标签的属性

size="控制显示多个"
multiple="控制选中多个"----属性等于属性值，因此可以简写成 multiple

（3）option标签的属性

value属性：一般情况下，value的取值与option标签中的值一致，方便js获取里面的文本
selected属性:默认选中属性，选择多个时需要和multiple标签配合使用

（4）注意事项

1、默认加载显示的是第一个选项
2、下拉菜单默认情况下只能选择一个
3、如果只填写了multiple属性，则会加载显示4个

3、textarea类型

（1）基本语法

<textarea cols=”列” rows=”行”></textarea>

（2）textarea的html属性

1.cols------相当于列数代表的是宽度
2.rows------相当于行数代表的是高度

（3）textarea的css属性

1.width----代表宽度
2.height---代表高度

3.resize----代表输入框的拖拽情况
    取值：
        both--------垂直与水平方向都能进行拖拽
        none--------不能拖拽
        vertical----允许垂直拖拽
        horizontal--允许水平拖拽

（2）注意事项

1.不要把两个标签分开书写
2.实际开发时，大部分都是使用CSS属性来完成样式，且一般会使用 resize 属性取消输入框的重置尺寸/拖拽效果

4、其他类型

（1）字段集和字段集标题

1、目的：实现区块的划分（该内容还可以使用定位来完成）
2、基本语法

（2）引入浮动框架集

1、目的：向一个页面中引入另一个页面
2、基本语法：
    <iframe src="引入网页的地址"></iframe>
3、注意：引入页面后，会受到iframe标签本身限制，显示效果不理想，因此需要再使用CSS属性进行宽、高、边框、留白的调整 

四、BFC概念和应用

1、概念：BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部

2、BFC的触发条件

前提：有一个共同的父级元素

（1）根元素 html默认就是一个BFC
（2）float的值不为none—单纯的div不是BFC，如果添加了浮动就是BFC
（3）overflow的值不为visible—单纯的div不是BFC，如果添加了overflow：hidden等就是BFC
（4）display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex
（5）position的值为absolute或fixed

3、BFC的特性及应用

（1）盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止margin重叠）
（2）BFC的区域不会与浮动的盒子发生重叠（应用：自适应两栏布局）
（3）计算 BFC 的高度时，浮动元素也参与计算（应用：清除内部浮动）