慕女神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.元素的高度，宽度，行高，以及顶和底边距离都可以设置

1. 元素宽度在不设置是和父容器一个高度

b.常用的内联元素
<a>,<span>,<br>,<i>(页面的所有文字以斜体效果显示),<em>,<strong>,<lable>,<q>,<var>,<cite>,<code>
其 特点:

1. 和其他元素都在一行上
2. 元素的高度，宽度，顶部和底部都不可进行设置
3. 元素的宽度就是他的问题和图片的宽度不可以改变
   常用的内联块状元素有
   <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%。

1. 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;

}