前端学习笔记6

前端学习笔记6

学习目标

• 能够完成爱宠知识案例

• 能够书写圆角属性

• 能够书写不透明度属性

• 能够完成老师在课堂上完成的企业网的进度

一、圆角属性

border-radius: 50%;/*圆角效果 推荐大家给50%*/ 可以给盒子宽度的一半，如果盒子宽度变了还要来改值，比较麻烦，推荐给50%代表盒子一半

二、不透明度

opacity和rgba都有不透明的效果

opacity:0.5—半透明，取值范围0-1 （最小值是0，最大值是1）0就是100%透明，1就是纯色

1. opacity是元素的属性，而rgba是颜色的属性值
2. opacity能够让背景和内容同时透明，rgba只能给元素自身（color）或者背景（background）透明

定位(position)

回顾：我们前面学习了网页的三大流派：标准流、浮动流、定位流

如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。

浮动，用来解决并排的问题

定位，用来解决层级的问题

PS: 定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦！

为什么要用定位？

那么定位，最长运用的场景再那里呢？ 来看几幅图片，你一定会有感悟！

第一幅图， 小黄色块可以再图片上移动：

静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

PS： 静态定位其实没啥可说的。

相对定位relative(参考代码注释内容)

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

绝对定位absolute(参考代码注释内容)

[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。

这句话的意思是 子级是绝对定位的话， 父级要用相对定位。

首先， 我们说下， 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。

就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。

但是，在我们网页布局的时候， 最常说的 子绝父相是怎么来的呢？ 请看如下图：

所以，我们可以得出如下结论：

因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是 相对定位.

这就是子绝父相的由来。

border-radius: 20px; 圆角效果
background: rgba(0,0,0,0.2);----盒子透明 取值范围0-1

对定位.

这就是子绝父相的由来。

border-radius: 20px; 圆角效果
background: rgba(0,0,0,0.2);----盒子透明 取值范围0-1

Demo：

1、京华数码