H5基础-6

一、标准盒子和怪异盒子

概念：它们都是盒子模型，只是是不同的模式而已.

语法：

box-sizing:content-box丨border-box;

content-box---标准模式 border-box---怪异模式

区别：元素实际占据的宽高的计算方式不一样

标准模式：实际占据的宽度=width+margin+padding+border

怪异模式：实际占据的宽度=width+margin

注：怪异模式一般用于移动端

二、文本的属性

1.字体大小

font-size:*px丨*em丨*rem;

em是相对于父元素的文字大小的倍数；

rem是相对于根元素(html)的文字大小的倍数；

2.字体颜色

color:颜色英文丨#16进制值丨rgba(R,G,B,0-1的透明值)；

3.字体粗细

font-weight:normal丨400丨bold丨700丨；（100-900的数字）

4.字体样式---是否倾斜

font-style:normal丨italic丨oblique；

5.字体类型

font-family:'类型1'，‘类型2’；

6.文本修饰线

text-decoration:none丨underline---下划线丨line-through---删除线;

7.文本对齐方式

text-align:left丨right丨center丨justify---两端对齐；

注：行级元素不能设置该属性

8.文本首行缩进

text-indent:*px丨2em;

注：行内元素不能使用该属性

9.行高

line-height:*px;

应用：1.单行文本垂直居中于指定大小的盒子        2.多行文本调整行间距

10.letter-spacing:*px;---字符间距

     word-spacing:*px;---词间距

三、列表属性

list-style:none;---去掉列表样式

四、背景相关的属性

设置背景色---background-color:颜色;

设置背景图片---background-image:url(图片的路径);

设置背景平铺---background-repeat:no repeat;

设置背景图位置---background-position:x坐标 y坐标;

设置背景的复合属性---background:颜色 图片 位置 平铺方式;