前端学习笔记(基础班)——六到九

最新推荐文章于 2024-04-22 01:56:33 发布

小丨陈同学

最新推荐文章于 2024-04-22 01:56:33 发布

阅读量414

点赞数 2

分类专栏：小陈的前端学习日记文章标签：前端学习 css

本文链接：https://blog.csdn.net/qq_43372180/article/details/123386197

版权

小陈的前端学习日记专栏收录该内容

14 篇文章 4 订阅

订阅专栏

六.基础班Day-06

使用结构伪类选择器在HTML中选择元素
标准流元素的布局特点(了解)
浮动元素的特点
完成小米模块布局案例
说出清楚浮动的目的+使用修改浮动的方法

6.1结构伪类选择器

6.1.1：作用与优势

作用:根据元素在HTML中的结构关系查找元素
优势:减少对于HTML中类的依赖,保持代码整洁性
场景:查找某父级选择器中的子元素

6.1.2：选择器

注意点
n的注意点

6.1.3：拓展(找到第一个a标签)

<style>
        /* 找到第一个li 里面的  第三个a  设置文字颜色是红色 */
        li:first-child a:nth-child(3) {
            color: red;
        }
    </style>

<ul>
    <li>
        <a href="#">这是第1个li里面的a1</a>
        <a href="#">这是第1个li里面的a2</a>
        <!-- 选中第三个a -->
        <a href="#">这是第1个li里面的a3</a>
        <a href="#">这是第1个li里面的a4</a>
        <a href="#">这是第1个li里面的a5</a>
    </li>
</ul>

6.1.3-1：注意点

请添加图片描述

6.1.4：(nth-of-type)结构伪类选择器

在这里插入图片描述

6.2伪元素

6.2.1：作用

能够使用伪元素在网页中创建内容.

一般页面中的非主体内容可以使用伪元素

6.2.2：种类

::before 在父元素的最前面添加一个伪元素
::after 在父元素内容的最后添加一个伪元素

6.2.3：注意

必须设置content属性才能生效
伪元素默认是行内元素

6.3：标准流概念

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则

常见标准流排版规则：

1.块级元素：从上往下，垂直布局，独占一行

2. 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

6.4：浮动

6.4.1：作用

早期被用于图文环绕
现在主要用作网页布局(让垂直布局的盒子变成水平布局)

6.4.2：代码

属性名:float

属性名	效果
left	左浮动
right	右浮动

七.基础班Day-07

7.1：网页通用代码(CSS)

* {

margin: 0;

padding: 0;

/* 內减模式 */

box-sizing: border-box;

}

li {

list-style: none;

}

a {

text-decoration: none;

}

.clearfix:before,.clearfix:after {

content:"";

display:table;

}

.clearfix:after {

clear:both;

}

八.基础班Day-08

定位的常见应用场景
不同定位方式的特点
使用子绝父相完成元素水平垂直案例
写出三种常见的光标类型
使用圆角边框属性完成正圆和胶囊按钮效果
说出display和visibility让元素本身隐藏的区别

8.1定位

8.1.1：网页常见布局方式

标准流

块级元素独占一行—垂直布局

行内元素/行内块元素一行显示多个—水平布局
浮动

让原本垂直布局的块级元素变成水平布局
定位

让元素自由的摆放在网页的任意位置

用于盒子之间的层叠情况

8.1.2：定位常见应用场景

解决盒子与盒子之间的层叠问题
让盒子始终固定在屏幕中的某个位置

8.1.3属性

1.设置定位的方式：position

定位方式	属性值	相对于谁移动	是否占位置
静态	static	不能通过方位属性移动	占位置
相对	relative	相对于自己原来的位置	占位置
绝对	absolute	相对于最近的且有定位的祖元素移动	不占位置(脱标)
固定	fixed	相对于浏览器可视区域	不占位置(脱标)

2.设置偏移值：水平+垂直就近各取一个

属性名	属性值
left	数字+px
right	数字+px
top	数字+px
bottom	数字+px

8.1.3-1：静态定位

代码：position:static;
静态定位——默认值（标准流）

8.1.3-2：相对定位

代码：position:relative;
相对于自己之前的位置进行移动

特点：
1. 需要配合方位属性进行移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置——没有脱标

8.1.3-3：绝对定位

代码：position:absolute;
相对于非静态定位的父元素进行定位移动

特点
1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置——已经脱标
绝对定位相对于谁移动？
1. 祖先元素中没有定位——默认相对浏览器进行移动
2. 祖先元素中有定位——相对于 最近的有定位 祖先元素进行移动

8.1.3-4：子绝父相

让子元素相对于父元素进行自由移动
含义
1. 子元素：绝对定位
2. 父元素：相对定位
好处：父元素是相对定位，对网页布局影响小

特殊情况：子绝父绝

父元素已经定位且已经满足需求，如果盲目修改父元素定位方式，可能会影响之前写好的布局

8.1.3-4.1：（案例）

1.子绝父相水平垂直居中案例——解决方法

<style>
        .box {
            /* 1. 绝对定位的盒子不能使用左右margin auto居中 */
            position: absolute;
            /* margin: 0 auto; */
            /* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */
            left: 50%;
            /* 把盒子向左侧移动: 自己宽度的一半 */
            /* margin-left: -150px; */

            top: 50%;
            /* margin-top: -150px; */

            /* 位移: 自己宽度高度的一半 */
            transform: translate(-50%, -50%);

            width: 400px;
            height: 300px;
            background-color: pink;
        }
    </style>

使用子绝父相水平垂直居中的操作是什么？

子绝父相
left：50%；
top：50%；
transform：translate（-50%，-50%）；

2.导航二维码居中定位
在这里插入图片描述
CSS样式：

<style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */
    .nav {
      height: 40px;
      border-bottom: 1px solid #ccc;
    }

    /* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */
    ul {
      list-style: none;
      width: 1200px;
      margin: 0 auto;
    }

    ul li {
      float: left;
      width: 20%;
      height: 40px;
      border-right: 1px solid #ccc;
      /* 自动内减 */
      box-sizing: border-box;
      text-align: center;
      line-height: 40px;
    }

    ul .last {
      border-right: none;
    }

    ul li a {
      /* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 */
      /* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */
      display: block;
      /* 宽度不设置块元素会默认占满一行 */
      height: 40px;
      text-decoration: none;
      color: #000;
    }

    ul li .app {
      position: relative;
    }

    .code {
      /* 绝对位置,脱离标准流,不占位 */
      position: absolute;
      left: 50%;
      top: 41px;
      transform: translate(-50%);
    }
  </style>

HTML代码

<body>
  <!-- 导航 -->
  <div class="nav">
    <ul>
      <li><a href="#">我要投资</a></li>
      <li><a href="#">平台介绍</a></li>
      <li><a href="#">新手专区</a></li>
      <!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 -->
      <li>
        <a href="#" class="app">手机微金所
          <img src="./images/code.jpg" alt="" class="code"></a>
      </li>
      <li class="last"><a href="#">个人中心</a></li>
    </ul>
  </div>

</body>

3.底部半透明遮罩效果
在这里插入图片描述
CSS代码：

8.1.3-5：固定定位

代码：position:fixed;

特点：
1. 需要配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置——已经脱标
应用场景：
- 让盒子固定在屏幕中的某个地方

8.2元素层级问题

8.2.1：层级关系

不同布局方式元素的层级关系：
- 标准流<浮动<定位
不同定位之间的层级关系：
- 相对、绝对、固定默认层级相同
- 写在下面的原色层级更高，会覆盖上面元素

8.2.2：更改定位元素的层级

改变定位元素的层级
属性名：z-index
属性值：数字（数字越大，层级越高）

8.2装饰

8.2.1：垂直对齐方式

行内/行内块元素垂直对齐的属性：vertical-align

属性值	效果
baseline	默认、基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

项目中vertical-align可以解决的问题
1. 文本框和表单按钮无法对齐问题
2. input和img无法对齐问题
3. div中的文本框，文本框无法贴顶问题
4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
5. 使用line-height让img标签垂直居中问题

8.2.2：光标类型

设置鼠标光标在元素上的显示的样式：cursor

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

8.2.3：表框圆角

属性名：border-radius

常见取值：数字+px、百分比

案例：画一个正圆/按钮胶囊
在这里插入图片描述

8.2.4：overflow溢出部分显示效果

属性名：overflow

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

8.2.5：元素隐藏

——让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏

属性：

visibility：hidden —— 隐藏元素本身，并且在网页中占位
display：none —— 隐藏元素本身，并且在网页中不占位

设置元素本身显示与隐藏的常用代码是什么？

• 元素隐藏 → display：none

• 元素显示 → display：block

8.2.6：拓展

元素整体透明度：

边框合并：

**用CSS画三角形技巧（面试）：**

CSS代码：

<style>
        div {
            /* width: 100px;
            height: 100px; */
            width: 0;
            height: 0;
            /* background-color: pink; */
            /* transparent: 透明 */
            border-top: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid orange;
        }

        /* 
            1. 书写一个盒子
            2. 盒子添加四个方向的border, 颜色设置不同
            3. 保留其中一个方向的border, 其他方向颜色是transparent
        */
</style>

8.3选择器拓展

8.3.1：链接伪类选择器

场景：选中超链接的不同状态

选择器语法	功能
a：link{}	选中a链接未访问过的状态
a：visited{}	选中a链接访问之后的状态
a：hover{}	选中鼠标悬停的状态
a：active{}	选中鼠标按下的状态

注意点：如果需要同时实现以上四种伪类状态效果需要按照LVHA顺序书写