css的属性+盒子模型

css的属性和盒子模型：

一、css属性：

具体如下：

背         景     属       性

background

色彩background-color

background-color: 颜色;

边框 border

实线solid

border：width style color; eg： border:1px solid red;

虚线 dotted

颜色color

图片 background-image

background-image: url(xxx.gif/jpg/png);

默认为水平垂直都平铺

不平铺no-repeat

background –repeat：no-repeat;

水平平铺repeat-x

background-repeat：repeat-x;

垂直平铺repeat-y,

background-repeat： repeat-y,;

（图片）滚动(背景图片默认滚动)background-attachment:（必须修改高度height属性）

fixed;(固定)

background-attachment:  fixed;

Scroll（滑动）

background-attachment: Scroll;

位置background-position （默认）

Left (水平)

left

background-position：left ；

Center

background-position：center( center bottom)；

Right

background-position：right；

Top (中心垂直);

top

background-position： center top；

center

background-position：center(left center)；

bottom

background-position： center top；

background:颜色 url(xxx.gif/jpg/png（图片类型）) repeat  fixed  left  top;   eg： background: url("google.jpg") no-repeat scroll bottom；

字   体  属   性

font

大小（单位：px  pd）  font-size

x-large;(特大)

xx-small;(极小)

样式： font-style:

oblique;(偏斜体)

font-style: oblique;

italic;(斜体)

font-style: italic;

normal;(正常)

font-style: normal;

粗细   font-weight

bold;(粗体)

font-weight：bold;

lighter;(细体)

font-weight：lighter;

ormal;(正常)

font-weight：ormal;

英文字 母 大小写

变体 font-variant

small-caps（小型大写字母）

font-variant: small-caps;

normal（正常）

font-variant: normal

大小写 text-transform:

首字母大小写 capitalize

text-transform: capitalize;

大写： uppercase

text-transform: uppercase

小写： lowercase

text-transform: lowercase

行高： line-height:

normal;(正常)

line-height: normal; line-height: 10px;

修饰

textdecoration:

text-decoration:下划线

text-decoration: underline;

overline;上划线

text-decoration:overline;

line-through;删除线

text-decoration:line-through;

闪烁blink（无法实现）

区块属性

字间距： letter-spacing

normal; 数值

letter-spacing：normal;

对齐： text-align:

justify;(两端对齐)

text-align: justify;

left;(左对齐)

text-align: left;

right;(右对齐)

text-align: right;

center;(居中)

text-align: center;

indent: 数值

text-indent: 数值px

text-indent: 2em;（空格两个字符）

垂直对齐：

vertical-align: baseline;(基线) vertical-align:sub;(下标) vertical-align: super;(上标)

词间距

word-spacing: normal; 数值

空格

white-space: pre;(保留)

white-space: nowrap;(不换行)

显示

display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分)  compact;(紧凑)  marker;(标记)

table

inline-table; table-raw-group; table-header-group; table-footer-group;  table-raw; table-column-group;  table-column;  table-cell; table-caption;(表格标题)

方 框 属 性

width:;长

height:;高

float:;悬浮

clear:both;

margin:;

padding:; 顺序：上右下左

边 框 属 性

border-style: dotted;(点线) dashed;(虚线) solid(实线); double;(双线) groove;(槽线) ridge;(脊 状) inset;(凹陷) outset; border-width:; 边框宽度

列 表 属 性

类型：

list-style-type:disc;(圆点)

circle;(圆圈)

square;(方块)

decimal;(数字)

lower-roman;(小罗码数字)

upper-roman; (大罗马数字)

ower-alpha; (小写英文字母)

upper-alpha; (大写英文字母)

位置：

list-style-position: outside;(外) list-style-position:  inside（内）;

图像：

list-style-image: url(xxx.gif/jpg/png);

CSS文字属性	color :
	加下划线text-decoration:underline;
	文字居中对齐text-align:center;
	把元素的顶端与行中最高元素的顶端对齐vertical-align:top;
	把元素的顶端与行中最低的元素的顶端对齐。vertical-align:bottom；
CSS链接属性	a:link /超链接文字格式/
	a:visited /浏览过的链接文字格式/
	a:hover /鼠标转到链接/
	a:active /按下链接的格式/
鼠标光标样式	cursor:hand;（pointer）小手
	cursor:move;拖拽
	cursor:crosshair;十字
	cursor:wait;（转动小蓝圈）
	cursor:text;
	cursor:help;（问好）
CSS框线一览表	border-top border-top-color : #369 /设置上框线top颜色/ border-top-width :1px /设置上框线top宽度/ border-top-style : solid/设置上框线top样式/

    二、   盒子模型：是封装周围的HTML元素的一种模型，由内容+填充+边框+外边距组成（即Content+padding+border+margin）。

1、由内而外依次是元素：

内容（content）、 宽：（width）、 高：（height）、 内边距（padding-top、padding-right、padding-bottom、padding-left）、 边框（border-top、border-right、border-bottom、border-left） 和外边距（marging-top、margin-right、margin-bottom、margin-left）。

外边距外边距可以是负值。

宽和高不允许为负值。

2、Padding:内容和边框的距离：

                           四个值分别顺时针 :（上、右、下、左）

                           三个值（上、左右、下）

                           两个值（上下、左右）

                           一个值（上下左右都相等）    

                         总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 

                         总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

3、Margin:盒子和盒子之间的距离

【上下盒子最终距离取最大的margin-top或margin-bottom】

【左右盒子最终距离取margin-top和margin-bottom的和】------》需要float浮点

   若 margin:0auto;则模型是上下为0 左右居中

位置属性 ： poisition：absolute（绝对），relative（相对），static（静态），或者fixed（固定）

三、DIV+CSS模式的网站的优势：能表现和内容相分离、使得代码简洁，可提高页面浏览速度、并易于维护和改版和提高搜索引擎对网页的索引效率。