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