常用属性

width: 宽度

height: 高度

border:边框

padding:内边距

margin:外边距

background: 背景

背景色: background-color: lightblue

背景图: background-image: url(img/x.jpg);

背景不平铺: background-repeat: no-repeat; / 在background: url(img/x.jpg) no-repeat; 直接加.

垂直/水平 不平铺: background-repeat-y/x: no-repeat;

颜色:transparent / rgb(0,0,0) 透明色

字号：font-size: 20px;
chrome 默认字体16px,最小12px

字体粗细：font-weight: 700;

首行缩进：text-indent: 40px;

 

行块属性

块标签: ul,li,ol,h1~h6,p

特点:*可以设置宽高, *不可以与别人共处一行

*不设置宽度的情况下,默认100%

转换为行内标签,可共处一行,不可以设置宽高:display: inline;

既可设宽高,又可共处一行 display: inline-block;

---

行内标签: span ,strong,a

特点: *不可以设置宽高, *可以与别人共处一行 *宽高用内容展开

转换为块,可设宽高,不可共处一行: display: block;

---

行内块标签: img,input

特点: *可以设置宽高, *可以与别人共处一行

行高：line-height: 40px;

水平居中：text-align: center;

单行垂直居中：line-height: 50px;

 

盒模型

1.外边距:margin

分写: margin-left / right / top / bottom : 值 (左调可为负) / auto(居中) ;

合写:

1个值:all

2个值: 上下 左右

3个值: 上 左右 下

4个值: 上 右 下 左

清除则值为0

2.边框:border

位置分写: border-left / right / top / bottom : 值 border-top-left-radius: 左上; border-bottom-right-radius: 右下; border-top-right-radius: 右上; border-bottom-left-radius: 左下;

位置合写:

合写:

1个值:all

2个值: 左上右下 左下右上

3个值: 左上 左下右上 左下

4个值: 左上 右 上 右 下 左下

样式: double (双实线) / solid () /dashed/dotted

3.内边距:padding(同上)