前端学习总结Day4

文章目录

• 一、元素间隔和基线对齐
• 二、文档流
• 三、绝对定位
• 四、相对定位
• 五、固定定位
• 六、伪类伪元素
• 七、序号选择器

一、元素间隔和基线对齐

行元素和行内块之间有间距的原因：

HTML代码在书写的时候为了保持美观，每个元素会单独写一行，所有元素之间会有空格和回车，这些空格和回车在页面解析的时候会解析为一个空格，间隙就是这个空格造成的。

解决方法：

             1.清除元素之间空格和回车，例如：把所有元素写在同一行；将下一行的开始标签写在上一行的尾部

             2.在文本后面添加空格（只能针对文本标签）

             3.给元素添加外间距抵消整个间隙

             4.将字符的大小改为0，全局设置font-size：0;

vertical-align ：基线对齐的方式

值：

             auto ：默认值，按照浏览器的默认状态执行

             middle ：中线对齐

             top：  顶部对齐

             bottom：底部对齐

             baseline： 文本基线对齐（四线三格的第三条线）

.d1 {
        width: 500px;
        height: 500px;
        background-color: green;
        display: inline-block;
        vertical-align: middle;
      }

基线：

图片和空块的基线在元素的底部，文本基线在文本的中下部（四线三格的第三条线）。

注意：

元素中带有文本，默认其元素的基线对齐以文本为准

基线对齐：

为了让文本和图片进行对齐，两个或多个元素在一行显示，会按照默认的对齐规则对齐（基线对齐）。

二、文档流

1.流式布局

元素依次从左到右（行元素、行内块元素）从上到下（块元素）的方式进行排列。

2.文档流

一个元素内部的子元素采用流式布局时，这个元素内部就会形成一个文本流，每个子元素在文档流中都有自己的位置。

一个元素如果脱离了文档流，就不在参与流式布局，父元素里不再有他的位置。

块元素脱离文档流之后，宽度不在默认为父元素的100%，需要主动设置宽度。

HTML中所有的标签默认都是static，static采用就是流式布局。

三、绝对定位

绝对定位：position: absolute;

        1.元素添加绝对定位之后，会脱离文档流，不占文档流中的位置，位置会被正常文档流中的内容所替代。

        2.元素使用绝对定位之后，位置从左上角出发。

        3.在嵌套中，后代元素会先对外层有定位（非static的定位）的元素的左上角出发，如果外层都没有定位，则相对页面的左上角出发。

        4.给行内元素添加绝对定位之后，行内元素会变成行内块元素

position：设置元素的定位方式

值：

             static ：默认值，静态定位，没作用

             absolute：绝对定位

position: absolute;
top: px;
left: px;
right:px;
bottom：px;

出发位置：

        以有定位方式的父级元素为参考，如果父级元素没有定位方式在往上找，直到找到有定位方式的父级元素位置。

        如果夫级元素没有定位，位置从浏览器左上方出发。

四、相对定位

相对定位：position: relative;

        1.元素使用相对定位之后不会脱离文档流，还占文档流中的位置

        2.元素使用相对定位之后，位置从自身原来在文档流的位置出发。

        3.子绝父相：子元素使用绝对定位，父元素使用相对定位，位置从父元素的左上角出发

        4.行内元素使用相对定位后不会转换元素类型

position: relative;
top: px;
left: px;
right:px;
bottom：px;

五、固定定位

固定定位：position：fixed；

        1.元素添加固定定位之后，会脱离文档流，不占文档流中的位置，位置会被文档流中的位置所替代

        2.元素使用固定定位的时候，位置从左上角出发

        3.在嵌套中不管外层元素是否有定位，元素只要使用固定定位，位置永远从页面的左上角出发

        4.行内元素添加固定定位之后，它会转换为行内块元素

position: fixed;
top: px;
left: px;
right:px;
bottom：px;

 六、伪类伪元素

伪类就是在选择器后面可以通过：来添加伪类，

伪元素是在选择器后面可以通过：：来添加伪元素

一、伪类

1、hover ：当鼠标指针在元素上悬停时触发。

#link:hover {
        text-decoration: underline;
        color: blue;
      }

2、visited:a标签的专用属性，表示访问过的

#link:visited {
        color: grey;
      }

3、active：鼠标点击时没松开的过程

#link:active {
        color: green;
      }

4、focus:当元素成为焦点时触发

焦点：用户可以交互的元素才能成为焦点。一个页面中同一时刻只有一个元素能够成为焦点。

.box:focus {
        width: 300px;
      } 

5、checked：选择所有选中 （表单）

input:checked {
    height: 50px;
    width: 50px;
}

 二、伪元素

1、::first-letter——选中元素文本的第一个字

p::first-letter {
        font-size: 30px;
        background-color: aqua;
      }

2、::first-line——选择第一行

p::first-line {
        color: red;
       }

3、::before——前缀伪元素，为元素加一个前缀，前缀内容 content:必须要写。

.cu::before {
        content: "￥";
        color: red;
        font-size: 30px;
     }

4、::after——后缀伪元素，为元素加一个后缀，后缀内容 content:必须要写。

.cu::after {
        content: "元";
        color: red;
        font-size: 30px;
     }

七、序号选择器

一、不区分类型（根据元素的位置序号找到元素）：

1）、:first-child  选中同级别的第一个元素。（前面是h2，第一元素一定要是h2，否则不显现）

h2:first-child {
        background-color: pink;
      }

2）、:last-child   选中同级别的最后一个元素。（前面是h5，第一元素一定要是h5，否则不显现）

h5:last-child {
        background-color: pink;
      }

3、：nth-child（number）：选中同级别的第几个（从1开始）元素（number写的是2且前面元素为h3，则第二个元素必须是h3，否则不显现）

h3:nth-child(2) {
        background-color: pink;
      }

二、区分类型（根据元素的种类找到元素）

1）、:first-of-type   选中同级别的第一个元素（例：有很多h2，选择第一个）

h2:first-of-type {
        color: red;
      }

2）、:last-of-type     选中同级别的最后一个元素(例：有很多h3，选择最后一个)

h3:last-of-type {
        color: red;
      }

3）、:nth-of-type(number):   选中同级别的第几个（从1开始）元素(例：有很多h2，选择第二个)

h2:nth-of-type(2) {
        color: red;
      }