表格: 用来展示数据
table > tr > td: 表格>行>单元格
width="宽度"
height="高度"
border="边框"
bordercolor="边框颜色"
bgcolor="背景颜色"
cellspacing="边框与边框之间的间距"
cellpadding="边框与内容之间的间距"
【注】只能给table添加
align="水平对齐方式"
left center right
【注】给table添加则改变table的位置
给tr td添加,则改变内容的水平位置
valign="垂直对齐方式"
top middle bottom
【注】
给table添加无效
给tr td添加,则改变内容的垂直位置
colspan="合并列" 左右合并
rowspan="合并行" 上下合并
【注】只能给td添加,多余的td要删除
th: 列标题,内容上下左右居中,文本加粗
caption: 表格标题
colgroup: 列分组
span="几列为一组"
thead: 表头
tbody: 表体
tfoot: 表尾
table中新添加的css属性: 都只能给table添加
border-spacing:边框之间的间距;
不能为负数
border-collapse:是否合并为单边框;
separate 默认值,不合并
collapse 合并为单边框
table-layout:行和列的算法; 是否固定宽度
auto 自适应
fixed 固定列宽
表单补充:
input: 表单元素
type="radio" 单选按钮
type="checkbox" 多选按钮
checked="默认选中"
disabled="禁用"
type="file" 文件上传域
multiple="多选"
【注】多选时，需要按下ctrl键
type="hidden" 隐藏输入框
type="image" 图片提交按钮
src="图片地址"
select>option: 下拉列表>下拉列表项目
selected="默认选中"
textarea: 多行文本输入框
cols="字符宽度"
rows="行数"
【注】
可以自由拖拽大小
resize:none; 禁止拖拽
fieldset > legend: 表单字段级>表单字段级标题
在一个fieldset中只有一个legend子集
legend 标签属性
align="文本水平对齐方式"
left 靠左
center 水平居中
right 靠右
justify 两端对齐
label: 关联信息
for="对应关联标签的id值"
BFC: 块级格式化上下文,可以理解为是一个特殊的容器
规则:
1: 是嵌套关系下用,子元素为块级元素才会遵循这些规则
2: 垂直排列
3: 同属于同一个BFC中的子元素,垂直方向的外边距相遇会重合
4: 子元素的margin-left挨着父元素的border-left
5: BFC不会与浮动元素重合
6: BFC是一个独立的容器,里面的子元素不会影响外面的元素
7: 计算BFC高度时,浮动子元素参与高度计算
触发方式:
1: 根元素(html)
2: 浮动不为none
3: position为 absolute fixed
4: display为 inline-block table-cell table-caption flex inline-flex
5: overflow不为visible
BFC应用:
解决垂直外边距相遇会重合的问题
两列布局
解决高度塌陷(父元素未设置高度,子元素进行了浮动)
