CSS知识总结

1，font-size字体大小（单位可以用px,pt,em等12pt=16px   em=16px  浏览器默认是16px,设计图常用字号12px)

2,color颜色（color：red;   color:#ffo;      color:rgb(255,0,0);       0-255

3,font-family字体：宋体，隶书，楷书........

4,font-weight加粗：

font-weight：bolder（更粗的）、bold(加粗），normal

font-weight:100---900;  100--500不加粗；  600--900加粗

5，font-style:italic(斜体字），oblique(600-900加粗

font-style倾斜 ：    font-style:italic（斜体字），oblique（倾斜的文字）   normal（常规显示）

6，text-align：文本水平对齐              text-align：left；水平靠右左

text-align：right；水平靠右         text-align：center；文字水平居中

text-align：justify；水平两端对齐，但是只对多行起作用。

text-indent首行缩进       text-indent可以取负值      text-indent属性只对第一行起作用

文本修饰：text-decoration 

                    text-decoration：none没有，underline下划线、overline上划线，lin-through删除线

7，line-height行高

  说明：line-height的数据=height的数据，可以实现单行文本垂直居中

letter-spacing   字间距        控制文字和文字之间的间距

8，文本文字构建

font-size字体大小        color字体颜色     font-family字体        font-style字体倾斜

font-weight字体加粗       

9，CSS的列表属性：

list-style:type  定义列表符合样式

list-style：image   将图片设置为列表符合样式

list-style-image：url();

list-style-position设置列表项标记的放置位置

list-style-position：outside；列表的外面默认值

list-style-position：inside；列表的里面

list-style：none;去除列表符号

CSS的背景属性：

1，background-color：背景颜色           例如：  background-color：red；

background-image背景图片           background-image：url();   背景图片样式

background-repeat背景图片的平铺

background-repeat：no-repeat/repeat/

background-position背景图片的定位     background-position水平位置  垂直位置  可以给负值

background-attachment背景图片的固定

background-attachment：scroll（滚动）、fixed（固定），固定在浏览器窗口里面，固定之后就相当于浏览器窗口了。

CSS的浮动属性：

浮动：漂浮在页面的某个位置（有固定的位置）

语法：float：left/right/none

浮动的作用：页面排版（让竖着排列的元素可以水平排列）

内容区：设置的宽度和高度就是内容区。

边框：border

border-width边框宽度       border-style边框样式      border-color边框颜色

float：left；元素靠左边移动              float：right；元素靠右浮动           float：none；元素不浮动

作用：定义网页中其它文本如何环绕该元素显示；  让竖着的东西横着来

CSS的清除浮动

clear

clear:none;  允许有浮动对象       class：right；不允许右边有浮动对象

clear：left;不允许左边有浮动对象

清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。

给所有容器添加上float：right;之后，元素会从右往左排列，添加float：left后，元素会从左往右排列。

Papping属性

属性值的4种方式：padding（填充；内边距）

4个值：上右下左{padding：0px   0px  0px  40px;}

3个值：上左下右{padding:10px  20px  30px;}

2个值：上下左右{padding:10px  20px;}

1个值：4个方向padding:2px;

可单独设置一方向填充：

上方向：padding-top：10px；

右方向：padding-right：10px

下方向：padding-bottom：10px

左方向：padding-left：10px

padding使用方法：（内间距）当分析一个缝隙相对于当前容器来说是里面的时候，就用padding。

<1>,用来调整内容在容器中的位置关系

<2>,padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。

Margin属性

margin：边框（可以给负数）

margin——left左边界   margin——right右边界    margin——top上边界    margin——bottom下边界

4个值：上右下左         3个值：上左右下         2个值：上下左右        1个值：4个方向

margin：2px;  定义元素四边边界为2px

margin：0  auto   一个有宽度的元素在浏览器中横向居中（外边距居中）

margin相关问题以及解决方法：

margin——top     现象：默认情况下给子元素添加了margin——top之后，父元素会跟着一起下来。

解决方法：<1>给最近的父元素添加了border——top

                   <2>给父元素添加overflow：hidden；（溢出隐藏       解决边距）

              border——top："1px"