CSS基础样式运用

一、边框：
table
行标记：tr
列标记：td
表格标题标记：th
其中所有包含在表格内的属性全部写在table内，还有列标记td也要写在行标记tr内
表格里，边框、边框色、内容格式都是必须补全的
边框标记：border 设置边框尺寸为5像素：border=”5px”
边框色：bordercolor 设置边框为红色：bordercolor=”red”
设置单元格与单元格之间的间距：cellspacing
设置内容与单元格之间的间距：cellpadding
内容对齐格式：align
内容垂直对齐格式：valign
竖着合并单元格：rowspan 例：合并竖着的两个单元格rowspan=”2”
横着合并单元格：colspan 例：合并竖着的两个单元格colspan=”2”
综合的举个例子：

得到的效果如下图：

表格之间之所有有间隔，是因为cellspacing的值为2px

**（table里不能随意嵌套其他标签）

二、表单：收集数据，收集用户信息
表单域：form
action：接口地址
method：get/post
name：表单名称
属性：type=“text”文本框 type=“password”密码框
type=“submit”提交按钮 type=”reset”重置按钮
默认为提交按钮
这些所有表单控件只有写到form表单里，才会有功能。
**（form表单可以嵌套其他标签）
例：创建一个输入框

**三、浮动
通常页面在制作时，文档流都是向上而下的，如果想让元素并排显示，这里就用到了浮动。这个是这段时间上课内容的重点。
浮动标记：float:right/left/none;
普通制作页面文档流效果如下：

如果想让下方黑色块显示到红色块的右边，那么只需给它们两个加个浮动：

如果想让三个色块显示到同一行，那么需要在三个色块后都加浮动即可。

四、盒模型
盒模型的作用是控制元素和元素之间的相互关系，规定网页元素。
盒模型的组成包括四个部分：content+padding+border+margin
Content:元素的宽和高（内容区）
Border：盒子的边缘（边框区）
Padding:用来控制父元素和子元素之间的位置关系（填充区）
如果在制作页面时，添加了padding值，那么原来的元素内容大小会变大，如果想让元素区内容大小不变，那么要在元素上减去所加的padding值大小。
上图：

但是如果加了padding值，那么内容区域会明显变大：

可以看到内容区边框都加了20px的padding值，内容区也随之变大了。如果在元素的大小上减去padding的值，内容大小就会还原了。

Margin:用来控制同辈元素之间的位置关系，margin是指在元素边框以外的空白区。内容元素大小不会发生变化
上图:

内容区位置发生改变，但是内容区元素大小不变。

今天就暂时分享到这里了，虽然疫情如此肆掠，但我们逆战班课程学习仍在进行中。加油，以后的分享会越来越详细，干货也会越来越多。