常用css样式

一、 字体

1. 黑体：font-family:‘微软雅黑’；
2. 字体正常：font-weight:normal;
3. 字体下划线取消：text-decoration:none;
4. 字体单个字符：letter-spacing:2em;(最后一个会有空隙，需要用padding填充居中)
5. 单词成语之间的间距：word-spacing:2em;
6. 针对数字字母排版，打断无意义的长字符：word-break:break-all;

二、引用link，需要添加属性
注：stylesheet样式表的意思

<link href="#" rel ="stylesheet" >

三、伪类

1. 鼠标经过时:hover
2. 属性：
   手指形状：cursor:pointer;

四、框架盒子：box-sizing

content-box:默认值
border-box：自动适应

五、清除塌陷
1、创建一个用来清除浮动的css样式类（.clearfix）
2、针对包裹的诠释浮动元素的父级容器使用（.clearfix）
z
.clearfix{zoom:1}
//ie专用属性，针对老版本ie浏览器，为了兼容
.clearfix:after{comtent:".";display:block;visibility:hidden;height:0;clear:both;}
//伪对象选择符—在这个对象被浏览器渲染后添加一定的内容
comtent属性：添加的内容谢在这里属性的值里面。这个属性是专门配合伪对象，必须写，就算值为空也必须写！
display:block将添加进去的内容转换为块状元素
visibility:hidden可视化属性，控制元素是否可见。无论是否可见，都保留其物理空间
height:0将添加进去的内容高度设置为0，消除其占位
clear:both;将添加进去的内容作为清除浮动的对象，实现外围容器中又内容存在，因此可以自动判定高度，解决塌陷

六、两列布局

实现方法：
固定列容器{width:固定数值；float:left/right;}
自适应列容器{margin-方向:数值=固定列宽;}

七、overflow盒子内容的超出隐藏

常用值
visible内容溢出可见，默认值
scroll溢出激活滚动条（上下左右）
应用技巧
overflow：hidden;
使用固定了宽和高的荣区强制隐藏内部超出容器的内容
应用场景：防止页面布局被撑开、配合实现文字截断等。
overflow:auto;（添加上下滚动条）
在某个页面或栏目搬开的固定区域中调用必须呈现的内容。

八、表单

1. form基本属性
   action url路径 必须属性（规定当提交表单时向何处发送表单数据）
   method get/post 必须属性（规定用于发送form-data的HTTP方式）
   name 自定义名称
2. 表单控件
   A.输入型

a 文本框（单行文本）<input>标签创建文本框，type属性指定其具体属性
<input type="text" value="填写的提示内容" onClick="this.value=' ' ">
<input type="password">
<input type="hidden">
b文本域（多行文本）<textarea>  标签创建文本域
这是成对标签
<textarea>这里是提示文字</textarea>

c. html5新增的input输入控件
网址 ：<input type="url">
邮箱： <input type="email">
数字：<input type="number">
数字范围：<input type="range">
时间选择器：<input type="date">
色彩拾取器：<input type="colar">
搜索：<input type="search">
电话：<input type="tel">

B. 选择型
a 单选/复选

<input>标签创建选择框，type属性指定其具体类型
单选按钮：<input type="radio">
name属性，实现按钮的编组。
checked属性，设定按钮的已选中状态
value="" 放上要发送的值

复选按钮：<input type="checkbox">

b 下拉列表

<select>标签创建下拉列表区，<option>创建列表中的子级选项
应用技巧:
1. 给<option>添加selected属性，可以设定在首次显示下拉列表时为默认的选中状态
2. 给<select>添加multiple属性，可选择多个项目。
3. <select>的size属性可以规定下拉列表中可见选项的数目。
4. 使用<optgroup>标签的label属性用于定义选项组的文本描述。

c 新增输入提示控件：datalist

1. 用来预先定义一个输入框的潜在选项，为输入框提供一个可选择的提示列表。
2. 用户输入数据时，可以直接选择提示列表，免去输入的麻烦。

C 事件型

a 按钮input

普通按钮   <input type="button">(定义可点击按钮)
提交按钮  <input type="submit">（点击按钮会把表单所有数据发送到服务器）
重置按钮  <input type="reset">（点击按钮会重置表单中的所有数据，恢复成初始默认）
图像按钮  <input type="image"  src="路径" alt="代替文本">（用自定义图像来呈现提交按钮）
上传按钮  <input type="file">（点击按钮选择本机文件，用于文件上传）

b button按钮可用作超级链接

D 属性总结

1. value应用对象或场景（输入框类条件（定义初始的值）、选择类控件（定义相关联的值必须设置）、时间类控件（定义按钮呈现的文本））
2. readonly 只读属性：

<input readonly>

3. disabled 属性禁用：

<input disabled>

4. pleceholder占位符属性：

<input placeholder="提示文字">

5. required必填属性：

<input required>

6. autofocus自动获得焦点属性：

<input autofocus>

7. autocomplete自动完成属性：

<input autocomplete="on|off">

C 常用技巧

a.  <label></label>标签
1. 添加控件点击区域
例：
<label><input>(加标记内容与表单控件)</label>
2. 使用for属性将其和相关控件关联到一起，for属性的值为控件的id名。例：<label for="对应表单元素的id名">表及内容</label>
b. 分组
1. 分组标签<fieldset></fieldest>
 2. 分组标题标签：<legend>用来为<fieldset>分组定义一个标题。