一、防止拖拽文本域
resize:none;
二、取消边框
outline:none;
三、图片据底部3px问题 引起原因基线对齐 解决方案
方法一：display:block;
方法二:vertical-align: top
四、使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
五、font-weight:字体粗细
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。
六、text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
七、背景
# CSS 背景(background)
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
| background-color | 背景颜色 |
| ------------------------------------- | -------- |
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
| 背景的合写（复合属性） | |
| background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 | |
## 背景图片(image)
语法：
~~~css
background-image : none | url (url)
~~~
参数：
none : 无背景图（默认的）
url : 使用绝对或相对地址指定背景图像
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。
如果有背景图片平铺，则会覆盖背景颜色。小技巧： 我们提倡 背景图片后面的地址，url不要加引号。
## 背景平铺（repeat）语法：
~~~css
background-repeat : repeat | no-repeat | repeat-x | repeat-y
~~~
参数：
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
<img src="media/y.png" width="600"/>
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
<img src="media/q.png" width="600"/>、
## 背景位置(position)语法：
~~~css
background-position : length || length
background-position : position || position
~~~
参数：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : top | center | bottom | left | center | right
说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：
1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
实际工作用的最多的，就是背景图片居中对齐了。
## 背景附着
语法：
~~~css
background-attachment : scroll | fixed
~~~
参数：
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
说明：
设置或检索背景图像是随对象内容滚动还是固定的。
## 背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
~~~css
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
~~~
## 背景透明(CSS3)CSS3支持背景半透明的写法语法格式是:
~~~css
background: rgba(0,0,0,0.3);
~~~
最后一个参数是alpha 透明度 取值范围 0~1之间
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
8.清除浮动
## 清除浮动的方法
其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
```
选择器{clear:属性值;} clear 清除
```
| 属性值 | 描述 |
| ----- | --------------------- |
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
### 额外标签法
```html
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
```
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。
### 父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）
~~~css
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
~~~
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
### 使用after伪元素清除浮动
**:after 方式为空元素的升级版，好处是不用单独加标签了**
使用方法：
```css
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
```
优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 百度、淘宝网、网易等
<img src="media/163.png" style="border: 1px dashed #3c3c3c;"/>
注意： content:"" 尽量不带点
### 使用before和after双伪元素清除浮动
使用方法：
```css
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
```
优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 小米、腾讯等
八、鼠标样式cursor
### 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
```html
cursor : default 小白 | pointer 小手 | move 移动 | text 文本
```
鼠标放我身上查看效果哦：
```html
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
</ul>
```
尽量不要用hand 因为 火狐不支持 pointer ie6以上都支持的尽量用
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
