css样式常用整理

最近在写公司网站，把常用的给整理了下。

1.字体样式：

font-family："字体样式";

font-size："字体大小";

color:字体颜色;

font-weight:bold; 粗体显示

font-style:italic 斜体

text-decoration:"underline"; 显示下划线效果

text-decoration:"line-through"; 类似于淘宝打折的删除线

text-indent:2em; 文字段落的第一行空两格

line-height: 1.5em;设置行高

letter——spacing 字母与字母之间的间隔

word-spacing 英语单词之间的间隔

text-align 块状元素居中显示

2. 元素分类

块状元素和内联元素，内联块状元素

块状元素和内联元素的最大区别就是 块状元素必须独自占一行
a.常用的块状元素：

<div>,<p>,<h1>,<ol>,<ul>,<dl>(自定义列表),<table>,<address>,<blockquote>,<form>

其特点是 ：

1.每个元素都独占一行

2.元素的高度，宽度，行高，以及顶和底边距离都可以设置
元素宽度在不设置是和父容器一个高度

b.常用的内联元素

<a>,<span>,<br>,<i>(页面的所有文字以斜体效果显示),<em>,<strong>,<lable>,<q>,<var>,<cite>,<code>

其 特点:
和其他元素都在一行上
元素的高度，宽度，顶部和底部都不可进行设置
元素的宽度就是他的问题和图片的宽度不可以改变

常用的内联块状元素有

<img>,<input>

将内联元素转换为块状元素的 方法 display:block;

块状元素转换成内联元素的方法: display: inline;

内联块状元素，两种元素一起使用 : display:inline-block;

盒子模型:

border : 2px solid red; 设置边框粗细为2px的样式为实心，颜色为红色

他等于

border-width:2px;

border-style:solid; dashed 是虚线 dotted 点线 solid 实线

css样式表中只允许设置一个方向样式

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

边界设置 用 margin

边框用 border

填充用padding

**css  布局**
三种模型
1. 流动模型(Flow);
2.浮动模型(Float);
3.层模型(Layer);

1.流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
float-left; 向左边浮动

3.层模型有三种形式：

1、绝对定位(position: absolute)

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

div{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

left:100px;

top:50px;

}

<div id="div1"></div>

2、相对定位(position: relative)

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

如下代码实现相对于以前位置向下移动50px，向右移动100px;
div1{

width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;

}

<div id="div1"></div>

3、固定定位(position: fixed)

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
div1{

width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;

}