表单元素

作用：一系列元素，主要用于收集用户数据

input元素

输入框 空元素

普通文本框

1. 属性：

- type属性：输入框类型

type:text 文本选择框
type:password 会用符号来代替输入的密码
type:date 日期选择框，有兼容性问题
type:search 搜索框，有兼容性问题
type:range 滑块框 ，有兼容性问题
type:color 
type:number,数字输入框
type:cheakbox,多选框 多选框为多个选择框
type:radio,单选框
type:fail 选择文件



- value属性：输入框的值
- placeholder属性：显示提示的文本，文本框没有内容时显示的字


2. input元素可以制作按钮

reset button submit

分别为重置按钮，普通按钮，提交按钮

## select元素

下拉列表选择框
子元素：option

## textarea元素

文本域，多行文本框

可替换元素

## 按钮元素

button

type属性：reset ,button submit

默认是提交按钮

对于设置按钮，认为button元素更加灵活

## 配合表单元的其他元素

### label

普通元素，通常配合单选多选框使用

可以通过for属性，让label元素关联某一个表单元素,for属性书写ID的值


隐形写法：
```html
<label>
    <input name="gender" type="radio">男
    </label>
<label>
    <input name="gender" type="radio">女
    </label>

datalist

使用id进行关联，本身不会显示

form元素

通常，会将整个表单元素放入其内部
作用：当提交表单时，会将form元素中的表单内容以合适的方式提交到服务器

例如日常提交账号密码进行验证

属性action="",在某处进行验证
必须要写name属性

form元素对开发静态页面没有什么意义

fieldset元素

表单分组

legend 分组标题

表单状态

readonly属性：布尔属性，是否制度，不会改变表单显示样式
disabled属性：禁用样式，会改变表单显示样式

美化表单元素

新的伪类

1. focus
   聚焦样式：
   tabindex 切换顺序

2. checked
   单选和多选框被选中的样式

可替换元素基本控制不了样式

常见用法

1. 重置表单元素样式
   text-align:center
   行盒居中

2. 设置多行文本框/text-area是否允许调整尺寸

resize:

• both
• none
• horizontal(水平方向)
• vertical(垂直方向)

1. 文本框边缘到内容的距离

padding:

text-indent:(首行缩进)

1. 控制单选和多选的样式

下拉列表样式：

表格元素

在CSS技术出现前，网页通常用表格布局

后台管理系统可能使用表格

前台：面向用户
后台: 面向管理员。对界面要求不高，对功能性要求高

表格不再适用于网页布局？表格的渲染速度过慢

表格的术语（table）

1. 表格标题（caption） 表头（thead） 表格主体（tbody） 表尾（tfoot）

2. 表格行（tr）

3. 单元格（td） 标题单元格（th）

border-collapse: collapse边框折叠
seperate 边框展开
colspan:""跨越几列
rowspan:""跨越几行

隔行填色：

tbody tr:nth-child(odd){
    background:pink;
}

其他元素

1. abbr元素
   缩写词

2. time元素
   提供给搜索引擎和浏览器时间

3. b元素
   以前是无语义元素，用于加粗字体

4. q元素
   表示小段引用文本

5. blockquote
   大段引用文本

6. br元素：主要用于在文本中换行

7. hr元素：无语义，主要用于分割

8. meta元素

   给网页添加源数据，还可以用于搜索引擎优化

9. link元素
   链接CSS
   rel属性：链接的内容与网页的关系
   type属性：链接内容MIME类型

@规则

at-rule:@规则、@语句、CSS语句、CSS指令

1. import
   写法：
   @import"路径";
   导入另一个css文件

2. charset

@charset"utf-8";

告诉浏览器，使用的字符编码集是utf-8,必须写到第一行

web字体和图标

web字体

解决用户电脑上没有的相关字体，强制让用户去下载该字体
使用font-face制作一个新字体

字体图标

iconfont.cn字体图标库

使用雪碧图或者直接使用字体图标

块级格式化上下文（BFC）

独立的渲染区域，规定常规流块盒的布局

1. 在水平方向上撑满包含块
2. 垂直方向依次摆放
3. 外边距无缝相邻会合并
4. 无视浮动元素和定位元素

由HTML元素创建

• 根元素
• 浮动和绝对定位元素
• overflow不等于visible的块盒
• display等于table的块盒
  常见的BFC区域，隔绝了内部和为外部的联系，内部的渲染不会影响到外部

具体规则：

• 创建BFC的元素，它的自动高度需要计算浮动元素
  例如：解决高度坍塌
  使用浮动、绝对定位、overflow:hidden{副作用最小}

• 创建BFC的元素，它的边框盒不会与浮动元素重叠

• 创建BFC的元素，不会和它的子元素外边距合并

布局

排列页面中的区域

多栏布局

两栏布局和三栏布局

1. 两栏布局
   使用左右浮动

2. 三栏布局
   使用定位或浮动
   使用浮动时先写左右再写中间
   也可以创建BFC

等高布局

1. 使用CSS3的弹性盒
2. JS控制
3. 伪等高

.left{
height:10000px;
margin-bottom:9990px;
}

等高布局代码：

元素书写顺序

先些浮动再写常规流

后台页面的布局

注意点：撑满整个页面

浮动的细节规则

盒子位置：

1. 左浮动，元素靠上靠左排列
2. 右浮动，元素靠上靠右排列
3. 浮动盒子的顶边不得高于上一个盒子的顶边
4. 若剩余空间无法放下浮动的盒子，则该盒子向下移动，知道具备足够的空间能容纳盒子，然后向左或向右移动

行高的取值

line-height

1. px,像素值
2. 无单位的数字 先继承再计算 指两倍大小
3. em单位 行高为字体大小的两倍
4. 百分比

body的背景

画布 canvas
一块区域

特点：

1. 最小宽度为视口宽度
2. 最小高度为视口高度

HTML元素背景

覆盖画布

body元素背景

如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）

如果HTML元素没有背景，BODY元素覆盖画布

画布背景图的背景

1. 背景图的横向宽度百分比，相对于视口
2. 背景图的纵向高度百分比，相对于HTML元素
3. 背景图的横向位置百分比，相对于视口
4. 背景图的纵向位置百分比，相对于HTML元素

行盒的垂直对齐

多个行盒垂直方向上的对齐

给没有对齐的元素设置vertical-align

预设值

数值

图片的底部白边

原因：
图片的父元素是一个块盒，块盒高度自动，图片底部往往和父元素之间有白边

1. 设置父元素字体大小为零（有副作用，可能使后面加的文字不见）

2. 将图片设置为块盒

参考线-深入理解文字

font-sixe、line-height、vertical-align、font-family

文字

文字是通过一些文字制作软件制作的
fontforge

制作文字时，会有几儿参考线，不同的文字类型，参考线不同

font-size字体大小，设置文字的相对大小

文字的相对大小：1000、2048、1024

1. 文字顶线到底线的距离是文字的实际大小（content-area 内容区）
   实际大小不等于相对大小
   一般会超过相对大小
2. 行盒的背景覆盖文字的内容区

行高

顶线向上延伸的空间和底线向下延伸的空间，两个空间大小相等，该空间叫做gap（空隙）

gap默认情况下，是字体设计者决定的

top到bottom,叫做virtual-area（虚拟区）可以调试

行高就是virtual-area

line-height:normal,默认值

文字不一定出现在一行的中间
content-area一定出现在virtual-area的正中间

vertical-align

决定参考线：font-size、font-family、line-height

一个元素如果子元素出现行盒，该元素内部也会产生参考线

baseline:该元素的基线和父元素的基线对齐

super:该元素的基线与父元素的上基线对齐

sub:该元素的基线与父元素的下基线对齐

text-top；该元素virtual-area的顶边对齐父元素的text-top

text-bottom；该元素virtual-area的底边对齐父元素的text-bottom

top:该元素virtual-area的顶边对齐line-box的最高顶边

bottom：该元素virtual-area的底边对齐line-box的最低边

middle:该元素的中线与父元素的x字母高度一半的位置对齐

行盒组合起来，可以形成多行，每一行的区域叫做line-box

行盒：inline-box
行框：line-box

数值：相对于基线的偏移量，想上为正数，向下为负数

百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度

line-box是承载文字内容的必要条件，一下下情况不生成行框：

1. 某元素内部没有任何行盒
2. 某元素字体大小为0

可替换元素盒行块盒的基线

图片：基线位置位于图片的下外边距

表单元素：基线位置在内容的底边

行块盒：

1. 行块盒最后一行有line-box,用最后一行的基线作为整个行块盒的基线

2. 如果行块盒内部最后一行内有行盒，则使用下外边距作为基线

堆叠上下文(stack context)

一块区域，由某个元素创建，规定了该区域的内容在z轴上的排列先后顺序。

创建堆叠上下文的元素

1. html元素（根元素）
2. 设置了z-index数值（非auto）的定位元素

通风一个堆叠上下文中元素在z轴上的排列顺序

从后到前的排列顺序：

1. 创建堆叠上下文的元素背景和边框
2. 堆叠级别（z-index）为负值的堆叠上下文
   z-index值越大越靠前
3. 常规流非定位块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何z-index是auto的定位子元素，以及z-index是0的堆叠上下文
7. 堆叠级别是正值的堆叠上下文

每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插。