CSS基础学习

一、基础学习： 

1.字体样式：

• font-family  ：字体样式  微软雅黑  Microsoft Yahei、宋体,

        可以连续添加几个，会根据顺序读取，若当前浏览器没有安装该字体，会读取下一个  

• font-size ：字体大小  一般默认大小为16

• font-weight：  字体粗细

        normal正常 ；bold粗  ；bolder特粗 ；lighter细体；

        100-900 数字  不加单位

• font-style  normal  italic 斜体

2.字体颜色 :

• 英文单词

• 十六进制

• rgb()

 3.文本下划线:

    下划线  删除线 上划线 

    overline  line-through 

 4.文本缩进：text-indent: 

• px ：一个像素大小
• em：em相当于当前元素1个字符的像素大小

5.行间距：line-height

6.浮动：

• 脱离标准文档流，下面文档流的内容会顶上 占有它原本的位置
• 不会覆盖文字。会覆盖其他内容
• 一浮全浮

 7.清除浮动：额外标签法 

• 给父元素overflow：hidden
• 父级添加after伪元素
• 父级添加双伪元素，用的最多

8.拓展：元素转换

• display:block; 设置为块级元素
• inline -  设置为行内元素
• inline-block   设置为行内块元素

 二、盒子模型（content）：

1.padding：内边距的值，会把我们的元素撑大

复合型写法：

• 如果复合型写法的值是四个，那么顺序为：上  右  下  左 顺时针方向旋转赋值

• 如果复合型写法的值是三个，那么顺序为：上  左右  下    方向赋值

• 如果复合型写法的值是两个，那么顺序为：上下  左右    方向赋值

• 如果复合型写法的值是一个，那么顺序为：上下左右    方向赋值

2.border： 边框

复合型写法：border: 10px solid rgb(117, 184, 247);

• 第一个值是边框宽度
• 第二个值是边框样式（虚线、实线、点线、双实线等）
• 第三个值是边框颜色

这三个值无顺序，先写哪个都行 

3.margin：外边距 

复合型写法： margin的复合型写法同上，和内边距一样

4.块级元素水平居中 

• 盒子必须指定宽度
• 盒子左右设置为：margin: 0 auto;

5.外边距合并问题 

两个相邻元素设置外边距，不会相加，会以较大的一方的外边距作为他们之间的外边距

6.嵌套盒子的垂直外边距塌陷问题

• 给父元素添加上内边距
• 给父元素添加上overflow: hidden;
• 给父元素添加上上边框