CSS重要知识点(for me)

一、CSS文本属性：

CSS text(文本)属性可定义文本的外观，比如文本的颜色，对齐方式，装饰文本，文本缩进，行间距等

文本系列：

1. color 属性

2 .text-align 属性：用于设置元素内文本内容的水平对齐方式

3. text-indent 属性：用来指定文本的第一行的缩进，通常是将段落的首行缩进

4. line-height 属性：用于设置行间的距离，可以控制文字与行之间的距离

小tips：解决文字垂直居中

CSS没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧
**

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

**

5. letter-spacing 属性：控制文字与文字之间的间隙

6. text-decoration 属性：下划线

二、CSS元素显示模式

块级元素，行内元素，行内块元素

显示模式的转换

转换为块元素：display：block;
转换为行内元素: display:inline;
转换为行内块：display:inline-block;

三、盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

其中只有边框和内边距会影响盒子大小

边框

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

// 全部边框的设置
border:1px solid red;
// 也可以单独设置边框
border-top:1px solid red;

合并边框：
border-collapse 属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框

// 是否合并相邻单元格的边框
border-collapse: collapse（合并）;| separate（不合并）

内边距

padding属性用于设置内边距，即边框与内容之间的距离

外边距

margin 属性用于设置外边距，即控制盒子和盒子时间的距离

外边距的典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：
1.盒子必须指定宽度(width)
2.盒子左右的外边距都设置为auto

常见的写法，以下三种都可以：

margin-left: auto; 
margin-right:auto;
margin:auto;    
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center；即可

外边距合并

• 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他之间的垂直间距不是margin-bottom + margin-top，取两个值中的较大者这种现象叫相邻元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加margin值

2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷比较大的外边距
解决方案：
1.可以给父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加overflow:hidden
4.还有其他方法：比如浮动、固定、绝对定位的盒子不会有塌陷问题，后面总结

注意：行内元素为了照顾兼容性，尽量值设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

文本阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本

语法：

text-shadow: h-shadow v-shadow blur color;

盒子阴影

在CSS3中，我们可以使用box-shadow属性将阴影应用于盒子，属性和文本阴影一样的
语法：

box-shadow: h-shadow v-shadow blur color;