css常用样式：
一、背景 background
CSS 属性定义背景效果
1、background-color ---背景颜色
body {background-color:#ccc;}
2、background-image ---背景图片
body {background-image:url('photo.gif');}
3、background-repeat ---水平或垂直平铺
如果区域设置很大，背景图片会自动水平或垂直方向平铺。
图像只在水平方向平铺用 repeat-x
不想让图片平铺 --no- repeat
body { background-image:url('img_tree.png'); background-repeat:no-repeat; }
4、background-attachment 背景图片固定
ackground-attachment设置背景图像是否固定或者随着页面的其余部分滚动
5、background-position --背景图像的起始位置。
1>可用属性值：top（上）、center（中）、bottom（下）、left（左）
、right（右）
如果仅指定一个关键字，其他值将会是"center"
2> x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。
如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:50% 60%; }
二、文本 text
常用属性：
1、color 文本颜色
2、text-align 文本对齐方式
可用属性：left（向左对齐）、center（居中）、right（向右对齐）、justify（两端对齐）
3、text-decoration 设置或删除文本的装饰
可用属性：
overline 上划线
line-through 删除线
underline 下划线
none 取消修饰（如取消超链接自带的下划线）
4、text-indent 设置首行缩进
p {text-indent:50px;}
三、字体
1、font-family 字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
p{font-family:"Times New Roman", Times, serif;}
字体属性超过一个字体需要加引号，多个字体之间用逗号隔开。
2、font-style 字体样式
normal -正常、italic --斜体
3、font-size 文本的大小
用像素设置，字体正常大小是12px，网页中字体一般不超过16px
可以用em设置，1em的默认大小是16px，可以相互换算
css页面布局
1、浮动 float clear
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
| 属性值 | 说明 |
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
clear属性，指定不允许元素周围有浮动元素
| 属性值 | 说明 |
| left |
不允许左边浮动 |
| right |
不允许右边浮动 |
| none | 默认值。允许两边浮动 |
| inherit | 规定应该从父元素继承 clear 属性的值 |
| both | 在左右两侧均不允许浮动元素。 |
2、定位 position
一般搭配：
top（上）、bottom（下） 、left（左） 、 right（右）：100px
属性值：
1> static 默认值，即没有定位,不会受到 top, bottom, left, right影响。
2> fixed ,相对于窗口定位，不在乎是否嵌套（拖动窗口滚动条，定位不变），原本所在位置不存在了
top、right 确定区域在页面的位置
p{ position:fixed; top:30px; right:5px; }
3> absolute：相对于标签定位，在乎是否嵌套
相对与最近的有position属性的父标签定位，最终标签是body，原本所在位置不存在了
4> relative：相对于自身定位，原本位置还有,常用在微调上和父标签上定位
<style> .pos_left{ position:relative; left:-20px; } .pos_right{ position:relative; left:20px; } </style>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
5> sticky 基于用户的滚动位置来定位
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
隐藏元素
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
通过：display:none或visibility:hidden，实现隐藏
display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
CSS 盒子模型
盒子模型（Box Model）
所有HTML元素可以看作盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
1.、边框样式 border-style
属性值：
none：默认无边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
2、边框宽度 border-width
为边框指定宽度有两种方法：
1、可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，
2、使用 关键字，它们分别是 thick 、medium（默认值） 和 thin。
3、边框颜色 border-color
设置边框颜色，三种颜色表示方式
4、边框-单独设置各边
p{ border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }
border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
border-style:dotted;
- 四面边框是 dotted
boder属性，可直接简写
border:5px solid red;
圆角边框：
border-style:solid;
border-radius:10px;
圆形边框：
Border-radius：50% 50%；
边框不额外增加宽度，根据定义区域所设置的宽和高为准：
Box-sizing：border-box，
与padding，border，margin设置无关。
