【学习打卡】第14天 前端零基础入门 页面化妆师CSS

课程名称：前端零基础入门（体系课）

课程章节：第三章 文本样式

主讲老师：(课程中没有显示)

课程内容：

今天学习的内容包括：

• 文本的对齐方式

• left(左对齐）

• right（右对齐）

• center（居中对齐）

• justify（两端对齐）

课程收获：

-----CSS文本样式-----

text-align

-设置元素内文本的水平对齐方式

-text-align：left(左对齐）|right（右对齐）|center（居中对齐）|justify（两端对齐）

注：text-align属性仅对块级元素生效，解决方法：在元素外嵌套块级元素

-text-align属性可继承父元素属性

-margin：0 auto 容器居中显示      

em 与%是和字体大小(font-size)有关系的 行高值一般用em单位表示 行高值换算为字体大小(font-size) * line-height值得到的 font-size的值一般浏览器都是默认为16px 行高值是继承计算的值

注意::若行高的属性值小于其字体大小，则会发生重叠的现象，为了避免这种现象，应该将行高的单位设置为em或%;行高继承计算值，不是继承line-height的属性值     

对于大段文字内容进行使用

text-align

设置元素内文本的水平对齐方式

语法：text-align: left | right | center | justify

justify：两端对齐

（该属性只对块级元素设置有效，在行内元素外嵌套块级元素）

（该元素可以被继承，但只是文本居中，文本容器不居中）

margin：0 auto；（上下边距 ，左右边距）（文本容器居中）

vertical-align:(在行内元素和单元格内才起作用）

| baseline （基线对齐）

| middle（中线对齐）

| sub（下标） | super （上标）

| top（行元素顶端对齐） | bottom（行元素底端对齐） 

| text-top（文字顶端对齐） | text-bottom（文字底端对齐）

| 长度 | 百分比    （+上移  -下移）（百分比是基于父级元素行高进行移动） 

vertical-align:(在行内元素和单元格内才起作用）

vertical-align:设置元素内容的垂直方式

对块级元素不生效

垂直居中应用：

单行文字垂直居中

line-height等于元素的高度

多行文字垂直居中

套一层div，display:table-cell 内层

display:table 外层    

div1 > div2 >  img , h1, h2 ,p 

如何垂直居中， 

把父元素div1转换成 table  表格, display: table.

div2  转换为单元格  display:table-cell; 

         并且设置为：vertical-align: middle;  垂直居中

         并且设置为：text-align: center;        水平居中  

总结

——垂直对齐属性——

vertical-align属性

设置元素内容的垂直方式

语法：

vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分比

注意事项：

1、只对行内元生效，对块级元素无效

2、图片也是行内元素

sub：下标（移动距离受到游览器控制）

super：上标

——文本基线——

顶线（top line）

中线（middle line）

基线（base line ）

底线（bottom line）

top：顶线

text-top：文本顶线

middle：文本中线

baseline：文本基线

text-bottom：文本底线

bottom：底线

————

长度和百分比可以精准控制

（百分比受到行高line-height的em影响）

————

应用于：单元格

单行文字垂直居中

单行文字居中通过

垂直：line-height：与元素高度相同即可

水平：text-align：center

（垂直水平居中）

多行文字垂直居中

多行文字垂直水平居中

vertical-align：middle；（对行内元素有效，块级元素无效）

将元素转化成单元格元素：display：table-cell；

再将父元素转换：display：table；

水平居中：text-align：center

css文本样式

1.设置元素内文本的水平对齐方式，可继承父元素

text-align：left/right/center/justify

<左对齐/右对齐/居中对齐/两端对齐>

注：只对块级元素有效

text-indent：2em 首行缩进两字符

line-height属性

设置元素中文本行高

1.line-height：长度值/

注：行高单位要用em、% ；  em、%跟字体大小有关系

不同浏览器默认行高不一样，一般默认行高为120%

2.可继承父元素，但是继承的是计算后的值，不是直接把em或%的值计算过来

vertical-align属性

1.设置元素内容的垂直方式，对行内元素生效，对块级元素无效

vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分比

注：                  <基线对齐 | 上标 | 下标 | 顶端对齐 | 文字顶端对齐 | 中部对齐 | 底端对齐 | 文字底端对齐>

                        <长度 | 百分比：向上移正数，向下移负数>

2.还可以应用于单元格元素

3.文字垂直居中，水平对齐

1）单行：line-height属性设置跟height一样，text-align：center；

例：{height：300px；width：100%；line-height：300px；text-align：center}

2）多行：父元素子元素都添加：display：table-cell，text-align：center；

文本样式属性

1.word-spacing：设置元素内单词之间间距，单词的判断以空格为准

2.letter-spacing：设置元素内字母之间间距 (可以使用px/em，可以带上正负号)

3.text-transform：设置元素内文本的大小写

text-transform：capitaliza | uppercase | lowercase | none

注：capitaliza首字母大写 | uppercase字母大写 | lowercase字母小写 | none没有任何设置效果

4.text-decoration：设置元素内文本的装饰 

可用于块级元素和行内元素，该元素不能继承

text-decoration:underline | overline | line-though | blink | none

注：underline上划线 | overline下划线 | line-though贯穿线 | blink闪烁效果 none没有任何效果|

今天学习课程共用了93分钟，今天主要学习了CSS文本样式的对齐方式以及其他属性值。今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!