北大青鸟培训第二周第二天：HTML和CSS相关知识 （持续更新）

目录

行间距

1.行高 （line height）:文字占有的实际高度

2.单行文本在父元素中垂直居中

3.font 中也可以指定行高  font:bold   italic   25px/3   serif;

文本样式

1:text-transform 可以用来设置文本的大小写

2.text-decoration  可以用来设置文本的修饰

3.letter-spacing  可以指定字符间距

4. word-spacing 可以设置单词之间的距离

5. text-align  用于设置文本的对齐方式

6. text- align:center 设置首行缩进常用单位是em单位

7. white-space:;设置网页如何处理空白

8.tect-overflow  文本溢出包含元素时发生的事情

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

11.box-shoadow: h-shadow v-shadow blur color;

9.vertical-align  设置元素垂直对齐的方式

方案一

方案二

方案三

方案四

文档流

块元素

        内联元素（行内元素）

元素脱离文档流后的特点

---

行间距

1.行高 （line height）:文字占有的实际高度

行高=上间距+字体大小+下间距

默认情况：上间距=下间距= （行高-字体大小）/2

                   行间距=下间距+上间距=行高-字体大小

line-height 属性

（1）直接放一个大小的单位  xxpx   xxem     xxrem

（2）直接放倍数   例如 ：1，2，3是当前字体大小的倍数

（3）放百分比是当前字体大小的百分比

2.单行文本在父元素中垂直居中

3.font 中也可以指定行高  font:bold   italic   25px/3   serif;

文本样式

1:text-transform 可以用来设置文本的大小写

none  默认值  文本正常显示
                   uppercase   文本大写
                   lowercase   文本小写
                   capitalize   首字母大写

2.text-decoration  可以用来设置文本的修饰

none   默认值  文本正常显示

                  underline  下划线

                  overline   上划线

                  line-through  删除线  

3.letter-spacing  可以指定字符间距

4. word-spacing 可以设置单词之间的距离

5. text-align  用于设置文本的对齐方式

left  文本向左  默认值

                 right   文本向右

                 center  居中显示

                 justify  两端对齐

6. text- align:center 设置首行缩进常用单位是em单位

7. white-space:;设置网页如何处理空白

8.tect-overflow  文本溢出包含元素时发生的事情

/* 先设置固定宽度 */
        width: 300px;
        /* 设置不换行 */
        white-space: nowrap;
        /* 设置省略号 */
        text-overflow: ellipsis;
        /* 裁剪多余的/溢出的内容 */
        overflow: hidden;

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

参数

第一个参数：阴影的水平距离 （必填）正值向右，负值向左

第二个参数： 阴影的垂直位移距离  （必填）  正值向下，负值向上

第三个参数： 阴影的模糊半径

第四个参数： 阴影的颜色（默认是字体颜色）

11.box-shoadow: h-shadow v-shadow blur color;

参数：

              第一个参数：阴影的水平位移距离   （必填）  正值向右，负值向左

              第一个参数：阴影的垂直位移距离   （必填）  正值向下，负值向上

              第三个参数：阴影的模糊半径

              第四个参数：阴影的颜色 （默认是黑色）

9.vertical-align  设置元素垂直对齐的方式

baseline  基线对齐  沿着字母x最下方对齐
                top  bottom  middle

1.设置元素垂直对齐的方式，这种功能，只针对图片，文字，表格，不针对块元素

2.解决图片三像素的问题（面试题）

方案一

vertical-align 样式，设置一个非baseline的样式值

方案二

设置父元素的font-size 为0

方案三

将图片转成块元素

方案四

将元素脱离文档流

文档流

网页是一个多层的结构，设置样式，也是一层一层的设置，最终我们看到的是最上面的一层

文档流是网页的最底层

我们创建的元素默认情况下，都在文档流中

元素分为两种状态：在文档流中，脱离文档流

元素在文档流中的特点

块元素

1:会独占一行

           2:块元素的宽度默认是父元素的100%

           3:块元素的高度默认是被内容撑开的

        内联元素（行内元素）

           1:不会独占一行

           2:宽度高度默认都是被内容撑开的，不能自己定义宽高

        行内块元素

元素脱离文档流后的特点

         元素脱离文档流之后，就不再区分块元素，行内元素，行内块元素，

            也就是块元素不会独占一行，行内也可以设置宽高，三像素问题也没有

     

      元素怎么脱离文档流

        浮动  绝对定位  flex 等等