2021-08-02

HTML基础

day06学习笔记
01-背景渐变

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

A、线性渐变
从上到下的线性渐变
background: linear-gradient(red, blue);（默认）

b. 从左到右的线性渐变

/*background: linear-gradient(to left, red, green);*/
/*background: linear-gradient(to right, red, green);*/
/*background: linear-gradient(to right, red, yellow, green);*/
background: linear-gradient(to right, red, yellow, blue, green);

c. 对角方向的线性渐变
background: linear-gradient(to bottom right, red, blue);

效果图如下：

B、径向渐变
a. 颜色结点均匀分布的径向渐变
background: radial-gradient(red, green, blue);

b. 颜色结点不均匀分布的径向渐变
background: radial-gradient(red 5%, green 10%, blue 50%);

c. 形状为圆形的径向渐变
background: radial-gradient(circle, red, green, blue);

效果如下：

利用背景渐变做如下效果：

代码如下：

div {
            width: 450px;
            height: 300px;
            border: 1px solid;
            background: linear-gradient(to right, blue 33%, white 33%,white 66%, red 66%,red 100%);
        }

02-盒子阴影
box-shadow: 12px 10px 15px 5px mediumvioletred;
box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸 (影子大小)阴影颜色; 内/外阴影，外阴影不用设置 内阴影为inset。

03-浮动
浮动主要用于布局
给元素浮动：float: ;     none: 元素不浮动   left:元素左浮动   right：元素右浮动
注意
浮动的元素会脱离文档流（脱离文档流的元素：块级会造成宽度丢失，宽度由内容撑大，行内可以设置宽高）
浮动的元素会尽量向左或者向右
直到遇到其他元素的边框或是遇到其他浮动元素为止
如果浮动元素是上一个没有浮动的块元素，则浮动元素不会超过它
下面的元素不会超过上面的元素，最多只能和其排成一排（都浮动的情况）
浮动的元素不会遮盖文字，文字自动环绕型

04-高度塌陷
父盒子如果没有设置高度，它的子盒子浮动后就会造成父盒子的高度塌陷，利用BFC解决高度塌陷问题
BFC: Block Formating Context 网页中元素隐藏的属性，该属性可以设置打开或关闭
开启了BFC的元素可以包含浮动的子元素
如何开启BFC
1.将父元素设置为浮动
2.将父元素设置为inline-block
3.给父元素的overflow设置为非visible

05-定位
给元素设置定位用position:;有四个值：
static:元素没有开启定位
relative：元素开启相对定位
absolute：元素开启绝对定位
fixed：元素开启固定定位
注：
开启了定位的元素没有设置偏移量不会移动。

相对定位：
原点：相对于元素原本在文档流中元素原本所在的位置
开启了相对定位的元素没有脱离文档流
层级会提高一级

绝对定位：
开启了绝对定位的元素会脱离文档流
原点：是离它最近的有定位的祖先元素的左上角

固定定位：
开启了固定定位的元素会脱离文档流
原点：相对于浏览器窗口 （屏幕左上角，不随滚动条的滚动而滚动）

推荐：父相子绝

06-绝对定位的完美居中
top: 50%;
left: 50%;

margin-left: ;/负的原来自己宽度的一般/
margin-top: ;/负的原来自己高度的一般/

07-层级关系
z-index
1.层级数越高元素在越上边
2.没有设置定位的元素设置z-index无效
3.父元素永远也不能盖住子元素
4.层级比较高的没有脱离文档流的元素可以遮挡住层级较低的脱离了文档流的元素

08-过渡
要执行过渡的属性 要为有效值 ：transition-property:all;
持续过渡的时间 ：transition-duration: 3s;
指定过渡方式： transition-timing-function: steps(3); /分三步完成的意思/
过渡延时：transition-delay: 2s;

综合设置 前面一个为持续过渡时间，后面一个为过渡延时
transition: all 2s 2s;