1、盒子模型
1.1简介
- CSS盒子模型是在网页设计中经常用到的CSS技术所使用的一种思维模型。包括内容(content)、内边距(padding)、边框(border)、外边距(margin)
1.2边框(border)
1.2.1简介
- 边框是环绕内容区和填充的边界。
- 边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。
1.2.2颜色
- border-top-color上边框颜色
- border-right-color 右边框颜色
- border-bottom-color下边框颜色
- border-left-color 左边框颜色
- border-color 四个边框统一颜色
- border-color: red green;上下是red,左右是green
- border-color: red yellow green; 上是red,下是green,左右是 yellow
- border-color: red yellow green pink;按顺时针赋值,上red 右yellow 下green 左pink
1.2.3宽度
- border-width:10px;
- border-top-width:10px;
- border-bottom-width:10px;
- border-rightwidth:10px;
- border-left-width:10px;
1.2.4样式
border-style:solid;
- solid: 实线
- dotted: 小圆点线
- dashed: 虚线
- double: 双实线
- hidden: 隐藏
1.3内边距(padding)
1.3.1简介
- 内边距是内容区和之间的空间。
- 内边距的属性有五种 ,即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。
1.4外边距(margin)
1.4.1简介
- 外边距位于盒子的最外围,是添加在边框外周围的空间。外边距使盒子之间不会紧凑地连接在一起,是CSS 布局的一个重要手段。
- 外边距的属性有五种 ,即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷外边距属性margin,其具体的设置和使用与填充属性类似。
1.5内容(content)
1.5.1简介
- 内容区是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。
- 内容区有三个属性,width、height 和overflow。
2、元素分类
2.1元素分类
- 行级元素
- 块级元素
- 内联块元素
2.2行级元素inline
- 默认在同一行显示
- 后面可以继续跟同类型标签
- 宽度是由内容撑开的
- 不支持用户设置宽度
- 不支持用户设置高度
- 不支持上下外边距,支持左右外边距
2.3块级元素block
- 默认独占一行
- 支持CSS所有控制的指令
- 如果没有设置宽度,默认占满一行
- 如果没有设置高度,高度由内容撑开
2.4内联块元素inline-block
- 元素在一行显示
- 支持宽和高设置
3、表格
3.1基本标签
- table标签:表格最外层元素定义
- tr标签:定义表格的行
- td标签:定义单元格
- th标签:表头单元格,默认文字居中加粗
- caption标签:表格的标题
- thead、tbody、tfoot是表格语义化,标识表头、表身、表脚部分,没有实质意义
3.2表格合并
- 跨占列: colspan
- 跨占行:rowspan