一、表格的创建
表格的创建:之前表格是用来布局的,现在只用来展示数据
表格中的计算属性:像生活中的安检在每个单元格中进行检索内容,内容较多就会分配更多的空间给到当前单元格
一:表格创建的标签
- table 表示表格
- tr 表示表格中的行
- td 表示表格中的列(单元格)
二:表格中的HTML属性
-
width/height/border
-
bordercolor/bgcolor
-
设置对齐方式
- 水平方向对齐align:left、right.center
- table、tr、td都可以控制水平对齐方式
- 垂直方向对齐valign:top、bottom、 middle
- table设置没有效果、tr、td控制行和列的垂直方向
-
设置单元格的间距显示(父级)
- cellspacing 单元格与单元格之间的间距
- cellpadding单元格与内容之间的间距
-
表格中的行列合并(重点、难点)
二、表格中的HTML标签属性
表格中的HTML标签
-
表格的标题 caption 要写在table的里面
-
表格的列标题 th(作用和td是一样的) 默认加粗和居中显示
-
表格的列分组:可以选择到几列分为一组进行设置宽度
- 第一种可以使用单标签
- 第二种可以使用双标签
- 注意:表格列分组的时候只能使用span和width属性
-
表格的行分组
- thead 表格的头部
- tbody 表格的主体
- tfoot 表格的底部
- tbody默认有一个,设置无数个,thead和tfoot只能有一个并且是成对出现
-
分割线 rules=“groups/rows/cols/all/none”
- all 表示所有的线都有
- groups 表示根据行列分组
三、表格中的CSS属性
表格中CSS的相关属性
- 单元格与单元格之间的间距(cellspacing)
- 属性:border-spacing
- 属性值:数值加单位(0可以不用设置单位)
- 合并相邻单元格的边框
- 属性:border-collapse(合并)
- 属性值:collapse(常用)/separate(分开)
- 单元格无内容时候显示方式
- 属性:empty-cells
- 属性值:show(显示)/hide(隐藏)
- 表格中的计算属性
- 属性:table-layout
- 属性值:auto(自动)/fixed(固定 没有计算属性)
四、高级表单的应用
<form action="">
<!-- 方框盒子 -->
<fieldset>
<legend>志强同学的个人相亲表</legend>
姓名: <input type="text" placeholder="请输入姓名"> <br>
密码: <input type="password" placeholder="请输入银行卡密码"> <br>
性别:
<label for="man">
<input type="radio" name="sex" id="man">男
</label>
<label for="woman">
<input type="radio" name="sex" id="woman">女
</label> <br>
爱好: <input type="checkbox">唱跳rap
<input type="checkbox">打篮球
<input type="checkbox" checked>洗脚
<input type="checkbox">穿背带裤
<input type="checkbox" disabled>敲代码 <br>
<select>
<option>请选择你的籍贯</option>
<option>广东</option>
<option>江西</option>
<option>湖南</option>
<option>朝鲜</option>
<option>香港</option>
</select> <br>
<textarea></textarea>
<input type="file" multiple>
</fieldset>
</form>
五、BFC的概念
BFC:块级格式化上下文
- 只针对于块级元素,主要为了规范约束布局方式
- 重要:BFC区域是一个独立的区域,内部的布局和外面的毫不相干
- BFC只是一个概念并不是具体的属性属性值
六、BFC的特点
- Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生重叠(应用:防止marin重叠)
解释:盒模型中的外边距margin的使用需要遵循BFC布局规则 - BFC的区域不会与float box发生重叠(应用:自适应两栏布局)
解释:常见的后台布局(两栏布局) - 计算BFC的高度时,浮动元素也参与计算(应用:清除内部浮动)
解释:宽高自适应 => 高度塌陷 - BFC内部的Box会在垂直方向,一个接一个的放置。
解释:块级元素的特点 - 每个元素的margin box的左边会与包含块border box的左边相接触(对于从左到右的格式化,否则相反),即使存在浮动也会如此。
解释:设置margin的时候必须要和父级的边框有接触 - BFC就是页面上的一个独立容器,容器里面的元素不会影响到外面的元素