网页前端第四次培训笔记（CSS常用属性及盒子模型）

CSS常用属性

一.背景

1.背景颜色：background-color

例：body {

background-color:#FF0000;

}

2.背景图片：background-image

例：body {

background-image:url(“paper.gif”);

}

3.背景是否重复：background-repeat

例：body {

background-image:url(img/logo.jpg);

background-repeat:no-repeat;

}

注：repeat：默认垂直和水平方向重复

repeat-x：只有水平位置会重复背景图片

repeat-y：只有垂直位置会重复背景图片

no-repeat：任何位置都不重复

二.文本

1.color（文本颜色）

2.text-align（对齐方式：left（左对齐） center（居中） right（右对齐））

3.text-decoration（文本修饰：line-throught（中划线） overthrougt（上划线） underthrough（下划线） none（关闭所有修饰））

4.text-indent（首行缩进）

三.字体

1.求齐方式(left（左对齐） center（居中） right（右对齐）justify（两端对齐) inherit（从父元素继承text-align的属性值））

2.display属性（none隐藏元素 block显示元素）

3.浮动（float）

盒子模型

一.border（边框）

1.设置边框颜色，样式，宽度

        border：颜色 样式 宽度

        例：border：red soild 1px

2.单独设置边框宽度，颜色，样式

        border-width

        border-style

        border-color

3.border-collap：设置是否将表格边框折叠为单一边框。

注：常用的边框属性有dotted，dashed，soild，double等

二.padding（内边距）

单独设置各边距：padding-top，padding-left，padding-bottom，padding-right

1.设置1个值：上右下左都一值

2.设置2个值：上下一致，左右一致

3.设置3个值：上右下一致，左和右一致

注：默认按照上右下左的顺序设定

三.margin（外边距）

单独设置各边距：margin-top，margin-left，margin-bottom，margin-right

1.设置1个值：上右下左都一值

2.设置2个值：上下一致，左右一致

3.设置3个值：上右下一致，左和右一致

注：默认按照上右下左的顺序设定，auto自动，可以理解为居中的意思