css基础

css样式设计：
文本缩进：
text-indent
单位：px
文本对齐：
text-align:
left right top bottom center
文本行高：
line-height
单位：px
字间隔：
指单词
word-spacing
单位：px

文字/字母：
letter-spacing
单位：px

文字下划线：
text-decoration:
默认：none
下划线：underline
字体：
font-family:微软雅黑;
默认：宋体
要求：电脑上存在的字体 多种字体用‘,’隔开
字体风格：
font-style
字体大小：
font-size
单位：px
文本颜色：
color
取色：photosh…
文本加粗：
font-weight
normal 正常
bold 加粗
样式继承：
采用覆盖

构造块级元素：
1.宽高
width,height
单位：px/%
宽高不会被后代继承

2.背景
    1)背景颜色
    backgroug-color
    2)背景图片
    backgroung-image:url();
    注意：
        背景重复：background-repeat
        平铺方向：repeat-x  repeat-x no-repeat
    3)背景位置
    background-positon：
    关键字：top/center/left.. 
            y轴 x轴
    使用%：
            水平方向(x轴),垂直方向的偏移(y轴)
    4）背景关联
        background-attachment：fixed;背景静止了
    总结：
        background：#FFFFFF url(../) no-repeat fixed center left;
        颜色值 图片地址 图片平铺 x轴 y轴;

3.边框
    border:1px solid #ccc;
    border-left
    border-right ...

后代元素长度大于父辈元素的处理方法：
overflow
   可能的值：
visible：默认,内容不会被修剪，会呈现在元素框之外。
hidden：超出的内容会被修剪，不显示
scroll：超出内容会被被修剪，浏览器会显示滚动条加载剩余内容
auto：超出内容不会被修剪，浏览器会显示滚动条加载剩余内容
inherit：规定应该从父元素继承overflow属性的值

元素性质相互转换：
display：
block：将内联元素变成块级元素 如：a…
inline：将块级元素变成内联元素
inline-block:如果空间允许，块级元素将不再独占一行
none：隐藏元素

盒模型概念：
css盒模型（box model）规定元素框处理元素的内容、内边距、边框级外边距的方式。页面中所有标记都可看做一个盒子，盒模型是我们队网页元素进行定位的基础，而定位是我们对网页元素进行位置固定的重点知识！

内边距：标签与内容之间的间隙，通过padding设置 上 右 下 左
外边距：元素边框的外围间空白区域  通过margin设置
margin:0 auto; 上下 左右;

浮动
浮动通常用于元素的定位

div块级元素，独占一行
<div id=div1 style="width:100px;height:100px;backgroung:red"></div>
<div id=div2 style="width:100px;height:100px;backgroung:green"></div>
<div id=div3 style="width:100px;height:100px;backgroung:yellow"></div>
默认垂直排列

浮动设置水平：div{float:left/right ;}
被设置的div将浮动起来，脱离队伍

如果不想标准流的元素收到浮动的影响用：clear元素
clear：both;//不允许有浮动对象
       none  
       left/right 左/右不允许有浮动对象

如果连续多个元素设置浮动
    被设置浮动的元素会组成一个流，且会横着紧挨着排列，直到父元素宽度不够才换行排列

相对定位与绝对定位
1.相对定位
positon：relative
left:;
right:;
top:;
bottom:;

<div id="div1" 
style="width:100px;height:100px;bg:#e4e4e4;posation:relative;left:20px;"></div>
默认是正常定位，设置left等属性时，会在正常位置偏移相应偏移,即相对原来的位置进行定位（偏移）
left/right top/bottom 一般只能设置一个

2.绝对定位
positon：absolute;
left
right
top
bottom

<div id="div1" 
style="width:100px;height:100px;bg:#e4e4e4;posation:absolute;left:20px;"></div>
为元素设置绝对定位之后，元素不会占据原来的空间，脱离原来的队伍！相对页面进行定位

3.固定定位
positon：fixed;
left/right
top/bottom
相对窗口进行定位

4.重叠元素的堆叠顺序设置
使用z-index:;对设置了相对或绝对或固定定位的元素进行堆叠顺序的设置，设置的数值越大即堆叠在越上层，值可为负值。
只对设置了定位的元素有用

构造列表
ul/ol
去除圆点：
ul{list-style:none;}
设置样式
ul li{
//块级元素 可设宽高
heigh:31px;
border-bottom:1px sold #4e4e4e;
line-height:31px;
color:;//字体颜色
font-family:;
font-size:;//字体大小
text-indent:;//缩进
backgroung:;
}