HTML的margin和文本

1.margin的问题

​ 1.margin的粘连问题（父随子动）

​ 1.使用padding替代 -记得修改高度

​ 2.给父元素添加透明边框 { 透明:transparent}

​ 3.给父元素添加overflow：hidden；

​ 2.margin的塌陷问题

​ 1.在一个元素身上设置足够的间隔

2.标准模式和怪异模式

​ 概念：他们都是盒子模型，只是不同的模式 而已。

​ 设置：box -sizing：boder-box怪异模式|content-box标准模式

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

​ 标准模式：实际占据的宽度 =width + border + padding +margin（高度同理）

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

​ 说明：通常在手机端使用怪异模式

3.文本相关的

1.文字大小

font-size: *px |*em |*rem;px像素-绝对尺寸

​ em是相对尺寸，是父元素文字大小的倍数。
​ rem是相对尺寸，是根元素html文字大小的倍数。
2.文字颜色

color ：颜色 |# 

3.文字类型-宋体、雅黑

font -family：‘类型1’，‘类型2’，....；

4.文字粗细

font -weight:400|normal正常| 700|bold 加粗

5.文本修饰线

text -decoration：none ，没有线| line-through 删除线| underline 下划线

6.文本缩进

text -indent ：*px |*em；

注意：行级元素不能使用该元素

7.行高

一行元素垂直居中与指定高度+多行文字调整间距

line-height：*px

8.文字水平对齐方式

text -align ：left |center|right|justify两端对齐

9.文本样式-是否倾斜

font-style: italic | oblique 倾斜| normal正常

字间距

letter-spacing:*px

词间距

word -spacing:*px

4.列表样式

	list-style：none；

5.背景相关的样式

	背景颜色       background -color：颜色

​	背景图片     background -image：url（路径）

​	背景平布方式   background -reapeat：no-repeat 不重复|repeat -x 在x轴重复

​	背景图片起始坐标位置     background-position：x的坐标   y的坐标

​	背景复合属性  background：背景相关的设置，多个值用空格隔开

​	注意：单个和复合一起用的时候，复合在前，单个在后