9_表格&表单

一、表格的创建

表格的创建:之前表格是用来布局的,现在只用来展示数据
表格中的计算属性:像生活中的安检在每个单元格中进行检索内容,内容较多就会分配更多的空间给到当前单元格

一:表格创建的标签

1. table 表示表格
2. tr 表示表格中的行
3. td 表示表格中的列(单元格)

二:表格中的HTML属性

1. width/height/border

2. bordercolor/bgcolor

3. 设置对齐方式

   • 水平方向对齐align:left、right.center
   • table、tr、td都可以控制水平对齐方式
   • 垂直方向对齐valign:top、bottom、 middle
     • table设置没有效果、tr、td控制行和列的垂直方向

4. 设置单元格的间距显示(父级)

   • cellspacing 单元格与单元格之间的间距
   • cellpadding单元格与内容之间的间距

5. 表格中的行列合并(重点、难点)

二、表格中的HTML标签属性

表格中的HTML标签

1. 表格的标题 caption 要写在table的里面

2. 表格的列标题 th(作用和td是一样的) 默认加粗和居中显示

3. 表格的列分组:可以选择到几列分为一组进行设置宽度

   • 第一种可以使用单标签
   • 第二种可以使用双标签
   • 注意:表格列分组的时候只能使用span和width属性

4. 表格的行分组

   • thead 表格的头部
   • tbody 表格的主体
   • tfoot 表格的底部
   • tbody默认有一个,设置无数个,thead和tfoot只能有一个并且是成对出现

5. 分割线 rules=“groups/rows/cols/all/none”

   • all 表示所有的线都有
   • groups 表示根据行列分组

三、表格中的CSS属性

表格中CSS的相关属性

1. 单元格与单元格之间的间距(cellspacing)
   • 属性:border-spacing
   • 属性值:数值加单位(0可以不用设置单位)
2. 合并相邻单元格的边框
   • 属性:border-collapse(合并)
   • 属性值:collapse(常用)/separate(分开)
3. 单元格无内容时候显示方式
   • 属性:empty-cells
   • 属性值:show(显示)/hide(隐藏)
4. 表格中的计算属性
   • 属性: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:块级格式化上下文

1. 只针对于块级元素,主要为了规范约束布局方式
2. 重要:BFC区域是一个独立的区域,内部的布局和外面的毫不相干
3. BFC只是一个概念并不是具体的属性属性值

六、BFC的特点

1. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）
   解释:盒模型中的外边距margin的使用需要遵循BFC布局规则
2. BFC的区域不会与float box发生重叠（应用：自适应两栏布局）
   解释:常见的后台布局(两栏布局)
3. 计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）
   解释:宽高自适应 => 高度塌陷
4. BFC内部的Box会在垂直方向，一个接一个的放置。
   解释:块级元素的特点
5. 每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
   解释:设置margin的时候必须要和父级的边框有接触
6. BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素