CSS一些样式应用

列表

ul：有序列表 ol：无序列表（oreder list） 
以上两个列表的子元素，只能是li（块级元素） 
dl>dt , dd (自动缩进)

表格 
table>tr（行）>td（列） 
colspan合并列 
rowspan合并行 
列表语义化 
table>caption>(thead>th)+(tbody>tr>tr)+(tfooter>tr>td)

表单 
form

input：输入框（form的子元素） 
type取值： text(文本) 密码框

单选框 
1.type取值为radio 2.name取值一致 3.给定value属性值（2和3一般是后台数据库管理员(DBA)给的） 
例：

多选框 
type取值为checkbox 
name的取值要一致，才会提交正确的内容 
checked为布尔类型（值和属性一致） 
例：

select下拉列表（下拉菜单） 
option表示可选项，name属性是对后面的储存关键词(一般由DBA提供) value的值是会提交到后台选中的数据 
例：

多行文本框

email输入邮箱

设置输入内容的个数 maxlength

文字和输入框关联 
lable 
1.在input中设置 id 2.lable中 for 属性值与input中的id值一致 
例：

在输入框中的默认值和提示信息（加在input标签栏里） 
默认值value属性 
提示信息使用placeholder属性 
为了实现注册表单的对齐方式 
可以把lable标签display设置为inline-block； 
给固定宽度，再设置文本对齐方式（text-algin:left / center / right）

输入框出生年月

输入框颜色

选择上传文件

输入框内提示信息颜色变化

输入框，焦点框 去除，通常用于搜索框

transform变形 
transform:scale( ); 可两个参数，可一个，一个时xy同比例，两个数，第一个x轴，第二个y轴 
scale函数来设置缩放的；取值0~正无穷（默认值1） 
transform-orign设置缩放点 transfor-orign:__px, __px; 
第一个值水平方向，第二个值垂直方向 
transform-rotate 设置旋转度 
transform-rotate(45deg); 
transform-rotatez：中心点（默认值） 
transform-rotatex：x轴方向 
transform-rotatey：y轴方向 
transform:skew( ) 设置倾斜角度 
45deg表示顺时针旋转45度 
-45deg表示逆时针旋转45度

设置区块移动的偏移量 
第一个参数是x轴的方向，第二个参数是y轴方向 （像素正负均可）

transform缩写每个函数之间的分隔符为空格

transition是一个属性的一个值变化到另外一个值的过程

边框从中心向两边进行过渡撑满整个包含块 
1.设置子元素的位置，父级元素水平居中位置，即 nav{ left:50%} 
2.在父元素被hover的时候，子元素位置要与父元素左边框对齐 
即footer:hover>nav{left:0}; 
（注：1和2主要实现边框从水平中心点开始向左侧进行过渡） 
3.设置子元素的宽为0；即 nav{width:0}; 
4.在父级元素被hover的时候子元素的宽为100% 
即：footer:hover>nav{width:100%}; 
（3和4主要实现的是边框从水平中心点开始向右侧进行过渡的效果）