前端学习-初级-第二周第二周前端学习。学习的内容主要是CSS的定位、渐变、元素转换的用法，并且进行了各种效果的实验和练习

颜色单位

颜色名：red orange...
rgb 值
- rgb值通过三种颜色的不同浓度来调配出不同颜色
  
  red、green、blue
  
  每一种颜色的范围在0~255（0%~100%）之间
  
  语法：rgb（红色，绿色，蓝色）
十六进制的rgb 值：

语法：#有、红色绿色蓝色

颜色浓度通过 00-ff

如果颜色两位两位重复则可以进行简写 \#aabbcc--->#abc
HSL值 HSLA值
H 色相 (0——360)
S 饱和度，颜色的浓度 0%-100%
L 亮度，颜色的亮度 0%-100%

+++
rgba
- A表示透明度，需要四个值，最后一个表示透明度(0~1)
  
  1表示完全不透明，0表示完全透明，0.5表示半透明
+++

opacity属性也有透明效果：元素内容会跟着透明

取值：0~1

例如：
```
.box1 {
    width: 400px;
    height: 400px;
    background-color: rgb(33, 55, 88);
    /* background-color: rgba(100, 200, 200, .6); */
    opacity: .5;
}
```

选择器

层次选择器

div,p(表示选择div的同时也会选择p)

div+p（表示选择div后面紧跟的第一个p元素兄弟关系）

声明冲突

属性相同，值不同

层叠过程

比较优先级

淘汰优先级低的声明（相同时比较特殊性）

比较特殊性

淘汰特殊性低的声明（相同时比较源次序）

比较源次序

淘汰次序靠前的声明

优先级：

低——>高

浏览器默认样式表——>作者样式表普通声明——>作者样式表重要声明

特殊性：

	嵌入	id	class	元素
	a	b	c	d
style	1	0	0	0
id	0	1	0	0
class、属性、伪类	0	0	1	0
元素、伪元素	0	0	0	1
通配符	0	0	0	0
！important	最高

a,b,c,d说明：

a：声明是行内样式表，为1，否则为0

b：id选择器的个数

c：规则中类选择器，伪类选择器和属性选择器的个数

d：元素选择器，伪类选择器的个数

a越大特殊性越高，a相同比较b

行内样式 > id选择器 > 类选择器 > 元素选择器 > 通配符选择器

!important > style > id > class > ele > *

继承

父元素属性子元素会自动继承(文本类属性可继承)

可继承：color font-size

强制继承（显式继承）

将css属性设置为：inherit（只继承父元素）

浮动

视觉格式化模型

包含块

通常情况下元素的包含块是他父元素的内容盒 content-box

HTML根元素，初始包含块

默认情况下包含块就是离当前元素最近的祖先元素。对于开启绝对定位的元素来说，包含块是离他最近思维开启了定位（且position不为static）的祖先元素。如果所有的祖先元素都没有开启定位，则其包含块就是初始包含块。

视觉格式化模型规定了三种定位体系：

如果一个盒子既有position 和 float ，那最后体现出来的是position

常规流（normal flow）:普通流、文档流、普通文档流

流式布局，所有元素默认情况下都是常规流布局

块级元素特点：

独占一行（撑满整个包含块）

从上到下依次摆放

垂直方向外边距合并，即两个外边距相邻，则折叠（水平方向上不会折叠）

垂直外边距的重叠（折叠）

兄弟元素，如果两个相邻垂直外边距都是正值则取两者之间较大值，一正一负则取和，均为负值则取两者中绝对值较大那个注：兄弟元素之间的外边距的重叠，对于开发是有利的，所以不需要进行处理
父子元素，父子元素间的相邻外边距，子元素的会传递给父元素（上下外边距）父子外边距的折叠会影响到页面的布局

解决方式:

1、在父元素加边框[使二者不相邻]； 2、不用外边距，加父元素的上(或下)padding； 3、在父元素上加BFC ）

浮动 (float) ----本身做文字环绕效果

float：none(默认值，不浮动)|left：左浮动|right：右浮动

左浮动的盒子向上向左排列

右浮动的盒子向上向右排列

浮动盒子的顶边不得高于上一个盒子的顶边

若放不下浮动的盒子则换行

元素设置浮动后会脱离文档流并且元素变为块盒

当子元素设置浮动时，父元素会出现高度坍塌，会按照常规流的规则计算高

父元素出现高度坍塌时，可以清除浮动去找回高

clear:none|left|right|both

clear需要写到父元素的最后一个常规流子元素身上

原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素影响

高度塌陷问题:

在常规流布局中，父元素的高度默认被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑开父元素的高度，导致父元素的高度丢失。父元素高度丢失，其下的元素会自动上移，导致页面的布局混乱，称为父元素高度塌陷。

高度坍塌的最终方案

伪元素选择器
/*高度坍塌最终方案,父元素添加伪元素清除浮动*/ 
.box1::after {
    /*在box1后添加了一个子元素，内容是空*/
           content: "";
           display: block;
           clear: both;
       }
/*在前面添加子元素*/
.box2::before {
    /*在box2前添加了一个子元素，内容是  在之前  */
		content: "在之前";
   		color: blue;
	}
浮动盒子的位置

常规流盒子摆放时会无视浮动盒子

浮动盒子在摆放时会避让常规流盒子

定位 (`position`)

position

position:static 静态定位（默认，不脱离文档流）

position:relative 相对定位

相对于元素本身的位置偏移（设置偏移量：top bottom left right）

不影响其他元素的排列顺序，因其原本所占的空间不变，所以不脱离文档流
.box1 {
 width: 100px;
 height: 100px;
 background-color: aquamarine;
 position: relative;
 left: 100px;
 top: 100px; 
}
position:abusolute:相对于设置了position属性（除了static）的父元素偏移，若父元素没有设置属性则相对于HTML偏移，设置了绝对定位的元素脱离了文档流，不再占据空间

绝对定位的特点

1. 开启绝对定位后，如果不设置偏移量元素的位置不会发生变化

2. 开启绝对定位后，元素会从文档流中脱离

3. 绝对定位会改变元素的性质，行内变成块，块的宽高被行内撑开

4 .绝对定位会使元素提升一个层级

5 .绝对定位是相对于其包含块进行定位的

子绝父相
.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: relative;
}
.child {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  left: 20px;
  top: 100px;
}
z-index改变元素的堆叠顺序，数值越大，元素在越上方
/* 更改元素堆叠顺序
数值越大，元素在越上方 */
.parent {
   width: 400px;
   height: 400px;
   border: 1px solid red;
   position: relative;
}
.child1 {
   width: 200px;
   height: 200px;
   background-color: blue;
   position: absolute;
   left: 40px;
   top: 20px;
   z-index: 1;
}
.child2 {
   width: 200px;
   height: 200px;
   background-color: rgb(36, 152, 121);
   position: absolute;
   left: 60px;
   top: 40px;
   z-index: 3;
}
.child3 {
   width: 200px;
   height: 200px;
   background-color: rgb(125, 62, 91);
   position: absolute;
   left: 80px;
   top: 60px;
   z-index: 2;
}
position:fiexd固定定位，也脱离了文档流，相对于浏览器窗口的固定位置，不会随用户滚动变化

固定定位特点：

固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位

固定定位的元素不会随网页的滚动条而滚动

position:sticky粘滞定位，依赖于用户的滚动，在position:relative;和position:fiexd;之间切换，要指定视口值才会生效

注意：粘滞定位的特点和相对位置的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时固定

任何一个元素都必须属于其中某一种定位体系，不同定位体系中，元素在包含块中的尺寸和位置会有一些差异

BFC

BFC(Block Formatting Context)块级格式化上下文 -BFC是CSS中的一个隐藏属性，可以为一个元素开启BFC,开启BFC该元素会变成一个独立的布局区域

元素开启BFC后的特点

开启后的元素不会被浮动元素所覆盖。即创建BFC的元素，它的边框盒不会与浮动元素重叠----针对兄弟元素的布局

开启后的元素子元素和父元素外边距不会重叠。即创建BFC的元素，不会和它的子元素进行外边距合并

开启后的元素可以包含浮动的子元素。即创建BFC的元素，它的自动高度需要计算浮动元素

可以通过一些特殊方式来开启元素的BFC:

设置元素的浮动（不推荐）
将元素设置为行内块元素（不推荐）
position：（absolute、fiexd);会创建BFC
HTML会创建BFC
将元素的overflow非visible的值常用的方式为元素设置 overflow:hidden开启BFC 以使包含浮动元素

为了解决高度塌陷，必须清除浮动：

clear:both;
设置BFC后元素的自动高度会计算其包含的浮动元素的高，也达到了清除浮动的效果

article {
    /* BFC */
    overflow: hidden;
}

定位的一些效果

模态框（蒙版、遮罩层）

<!-- 蒙板 模态框 -->
   <div class="box1">
        <img src="./imgB_l.jpg" alt="">
        <div class="child"></div>
   </div>

/* 常规模态框 遮罩层 */
.child {
    width: 280px;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: -400px;
}

.box1 {
    width: 280px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

.box1:hover .child {
    position: absolute;
    bottom: 0px;
}

遮罩层的变式

<div class="parent">
        <img src="../imgB_l.jpg" alt="">
        <div class="mask"></div>
</div>

.mask {
    width: 280px;
    height: 200px;
    background-color: rgba(0, 255, 0, .5);
    position: absolute;
    bottom: 0px;
}
img {
    width: 280px;
    height: 400px;
    vertical-align: top;
}
.parent {
    width: 280px;
    height: 400px;
    position: relative;
    /* 溢出隐藏 */
    overflow: hidden;
}
.parent:hover .mask {
    position: absolute;
    bottom: -200px;
    transition: 2s linear;
}

溢出隐藏：overflow: hidden;

溢出滚动：overflow: scroll;

.text {
    border: 1px solid black;
    height: 400px;
    width: 300px;
    overflow: scroll;
}

伪元素选择器

::first-letter:选中第一个字

::first-line:单独选中第一行

::selection:单独选中用户选中部分

/* 选中第一个字 */
p::first-letter {
    color: brown;
}
/* 单独选中第一行 */
p::first-line {
    font-size: 40px;
}
/*单独选中用户选中部分*/
span::selection {
    background-color: coral;
}

::after:在元素里最后面添加一个子元素

::before:在元素里最前面添加一个子元素

列表

有序列表

 <!-- 有序列表 -->
    <ol>
        <li>干饭</li>
        <li>睡觉</li>
        <li>游戏</li>
        <li>编程</li>
        <li>恋爱</li>
        <li>阅读</li>
    </ol>

无序列表

<!-- 无序列表 -->
<ul>
        <li>豪车</li>
        <li>美女</li>
        <li>别墅</li>
        <li>美金</li>
        <li>基金</li>
    </ul>

定义列表

  <!-- 定义列表 -->
    <dl>
        <dt>呵呵</dt>
        <dt>哈哈</dt>
        <dt>嘻嘻</dt>
        <dt>QAQ</dt>
    </dl>

list-style属性值

none:取消列表项样式

li {
    list-style: none;
}

disc：默认，标记是实心圆

circle：标记是空心圆

square:标记是实心方块

decimal:标记是数字

lower-alpha、upper-alpha:大小写英文字母

布局（layout）

全部居中

<!-- 布局1 -->
    <div class="container">
        
    </div>

.container {
    width: XXpx;
    margin: 0 auto;
}

头部贯穿，中间居中

<!-- 布局2 -->
	<header></header>
    <div class="container">
        
    </div>

header {
    width: 100%;
}
.container {
    width: XXpx;
    margin: 0 auto;
}

头脚贯穿，中间居中

<!-- 布局3 -->
	<header></header>
	<div class="container">
        
    </div>
	<footer></footer>

header,footer {
    width: 100%;
}
.container {
    width: XXpx;
    margin: 0 auto;
}

flex 布局

容器的属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

flex-direction：决定主轴的方向（项目的排列方向）

属性值：row|row-reverse|column|column-reverse

row:(默认值)主轴为水平方向，起点在左端

row-reverse:主轴为水平方向，起点在右端

column:主轴为垂直方向，起点在上沿

column-reverse:主轴为垂直方向，起点在下沿

flex-wrap:换行

属性值：nowrap|wrap|wrap-reverse

nowrap:(默认值)：不换行

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方

flex-flow是flex-direction和flex-wrap的简写形式，默认值row nowrap
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content:定义了项目在主轴上的对齐方式(所有项目“宽度”之和小于容器)

flex-start（默认值）：起始端对齐

flex-end：末端对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：分散对齐，每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

space-evenly:平均对齐，每个项目两侧的间隔与项目到边框的距离相等

align-items属性定义项目在交叉轴上如何对齐（一根主轴）

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

align-content属性定义了多根轴线的对齐方式，所以必须要换行。如果项目只有一根轴线，该属性不起作用。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

项目的属性:order、flex-grow、flex-shrink、flex-basis、flex、align-self

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。重要的东西往前放，页面展示时在后面就要考虑到order
.item {
 order: <integer>;
}
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
 flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
 flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

注意：

flex-grow:剩余空间=容器的尺寸-项目尺寸之和

flex:剩余空间=容器的尺寸-项目尺寸之和+设置了flex项目的尺寸

鼠标样式

cursor

body {
    /* 改变鼠标样式：小手 */
    cursor: pointer; 
    /* 加号 */
    cursor: cell; 
    cursor: alias; 
    cursor: col-resize; 
    cursor: context-menu; 
}

背景图

background-image: url("");

背景图重复

background-repeat: repeat;:默认值，重复

background-repeat: no-repeat;:不重复

background-repeat: repeat-x;:水平方向重复

background-repeat: repeat-y;:垂直方向重复
背景图位置
1. 水平方向和垂直方向设置定位background-position: 20px 80px;
2. 居中：background-position: center center;
3. 特殊位置：background-position: left bottom;
背景图附着情况

background-attachment: scroll;默认值，跟随盒子滚动

background-attachment: fixed;固定在浏览器窗口的某个地方
背景图尺寸(css3新增)

background-size: contain;等比例放大背景图，直到某个方向被填满为止

background-size: cover;等比例缩放背景图，直到水平垂直方向都被铺满才停止
设置具体宽高

background-size: XXpx XXpx;直接写宽高

background-size: 30% 50%;百分比（相对于盒子宽高）

background-size: 80%;只设置一个值时（水平），第二个值是自动（按比例缩放，保证图片不变形）
渲染区域

background-clip: content-box;内容盒

background-clip: border-box; 边框盒

background-clip: padding-box;内边距盒子

渐变

线性渐变

创建基础渐变 background-image: linear-gradient();
至少写两个颜色（逗号隔开）
方向默认从上往下渐变

.box1 {
       width: 600px;
       height: 600px;
       background-image: linear-gradient(pink, yellow,black,red,purple);
}

1. 自定义方向

基础字：left、right、top、 bottom

前面加to关键字，写在第一个参数位置

 .box1 {
       width: 600px;
     height: 600px;
       background-image: linear-gradient(to right, pink,purple,black);
  background-image: linear-gradient(to right top, pink,purple,black);
}

1. 通过具体某个角度定义方向deg

.box1 {
    width: 600px;
    height: 600px;
    background-image: linear-gradient(135deg, pink,purple,black);
}

实现斑马纹效果

创建实线渐变效果，上一个颜色的结束位置和下一个颜色开始位置相同

.box2 {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(to right,red 0,red 100px,yellow 100,yellow 200px);
    background-image: linear-gradient(to right,red 0,red 20px,yellow 20px, yellow 40px,purple 40px,purple 60px,pink 60px,pink 80px,black 80px);
}

创建模糊条纹渐变，上一个颜色结束位置和下一个颜色开始的位置之间有一段距离

.box2 {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(to right,red 0,red 20px,yellow 30px, yellow 40px,purple 60px,purple 80px,pink 90px);
}

.box2 {
    /* 简写形式，一头一尾可以省略 */
    background-image: linear-gradient(to right,pink  10px,red 20px 40px, purple 60px 80px, black 90px);
}

重复效果background-image: rpeating-linear-gradient()

.test {
    width: 150px;
    height: 5px;
    /* border: 1px solid; */
    background-image: linear-gradient(135deg,green 10px, transparent 10px 20px,green 20px 30px, transparent 30px 40px,green 40px 50px,transparent 50px 60px,green 60px 70px,transparent 70px 80px,green 80px 90px,transparent 90px 100px,green 100px 110px,transparent 110px 120px);
    /* 重复效果 */
    background-image: repeating-linear-gradient(135deg,red 0px 5px,transparent 5px 10px);
    background-image: repeating-linear-gradient(45deg,blue 0 1%,transparent 4% 5%);
}

径向渐变

颜色节点均匀分布（默认情况下）

基础渐变效果，默认从中心开始渐变，至少两个颜色background-image: radial-gradient()

.box3 {
    width: 100px;
    height: 100px;
    background-image: radial-gradient(green,pink);
}

更改渐变形状

ellipse 默认椭圆
circle 正圆

.box3 {
    width: 100px;
    height: 100px;
    background-image: radial-gradient(ellipse,black,white);
    background-image: radial-gradient(circle,black,white);
}

更改渐变开始的位置

.box3 {
    width: 100px;
    height: 100px;
    background-image: radial-gradient(circle at 30px 50px,black,white);
    background-image: radial-gradient(circle at 30% 80%,black,white);
}

更改渐变范围

定义圆的半径

.box3 {
    width: 100px;
    height: 100px;
    background-image: radial-gradient(circle 50px at 30px 50px,orange,yellow);
}

其他

closest-side
farthest-side
closest-corner
farthest-corner

创建条纹渐变

实线渐变

.box3 {
    width: 100px;
    height: 100px;
   background-image: radial-gradient(ellipse at 50% 50%,orange 50px,yellow 50px);
}

模糊渐变

.box3 {
    width: 100px;
    height: 100px;
    background-image: radial-gradient(circle 50px at 50% 50%,orange 20px ,yellow 40px );
}

重复 background-image: repeating-radial-gradient();

.box3 {
    width: 100px;
    height: 100px;
    background-image: repeating-radial-gradient(circle at 50% 50%,orange 5%,yellow 10%);
}

可以做多个方向颜色的渐变，方法之间用逗号隔开，注意间用透明色

.box3 {
 background-image: repeating-linear-gradient(to right,pink 0 2%,transparent 2% 4% ),repeating-linear-gradient(green 0px 20px,transparent 20px 40px),repeating-linear-gradient(45deg,rgb(33, 174, 113) 0 2%,transparent 2% 4%);
}

渐变背景和背景图结合运用，注意背景图要跟在渐变效果之后

background-image: linear-gradient(),url("");

.box5 {
    width: 200px;
    height: 100px;
    background-image: linear-gradient( to right ,orange,transparent),url("../修猫.jpeg");
    background-size: 200px 100px;
}

类似蒙板

.box6 {
    width: 200px;
    height: 100px;
    background-image: url("../修猫.jpeg");
    background-size: 200px 100px;
   }
/* 类似蒙板 */
.box6:hover {
    background-image:linear-gradient(to right , rgba(3,100,100,0.5), rgba(3,100,100,0.5)), url("../修猫.jpeg");
    
}

一些效果：动态滑动

.practice {
    width: 100px;
    height: 200px;
    background-image: radial-gradient(circle at 50% 50%,gray 25px,red 25px);
    position: relative;
    overflow: hidden;
    
}
.mask {
    width: 100px;
    height: 100px;
    background-image: radial-gradient( circle at 50% 0% ,transparent 25px,black 25px);
    position: absolute;
    bottom: 0px;
    /*transition: 8s linear;*/
}
.practice:hover .mask {
    position: absolute;
    display: block;
    bottom: -100px;
    transition: 4s linear;
}

.box7 {
    width: 100px;
    height: 100px;
    background-image: radial-gradient(circle 50px at 30px 50px,orange,white);
}

表格

 <table>
        
        <!-- 行tr -->
       
        <caption>武林少侠榜</caption>
        <thead>
            <tr>
            <!-- 表头th，一般来说只有一行 -->
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
    <!-- 表身 -->
    <tbody>
        <tr>
            <!-- 单元格td -->
            <td>虹猫</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>蓝兔</td>
            <td>女</td>
            <td>18</td>
        </tr>
    </tbody>
    <tfoot>
        <!-- 表单底部 -->
    </tfoot>
    </table>
    <!-- 一般<thead>  <tbody>  <tfoot> 不写，注意样式表中的选择器（浏览器会自动加上<tbody>） -->
    <br>
    <table>
        <!-- 横向合并colspan -->
        <!-- 纵向合并rowspan -->
        <tr><td colspan="2">1-1</td><td>1-2</td></tr>
        <tr><td>2-1</td><td rowspan="2">2-2</td><td>2-3</td></tr>
        <tr><td>3-1</td><td>3-3</td></tr>

    </table>

table {
    margin: 0 auto;
}
table,td,th {
    border: 1px solid;
    /* font-size: 12px; */
    text-align: center;
    /* 边框塌陷 */
    /* 需要写到table上，其他元素不生效 */
    border-collapse: collapse;
}

表单

提交数据、搜索内容

 <!-- 表单域 form
        表单控件 表单元素
        提交 
        action="提交地址"
        method="提交方法"----GET、POST
     -->
    <form action="javascript.js" method="POST">
        
        <!-- 输入控件 -->
        <!-- 普通文本框 -->
        <!-- 提示作用 placeholder -->
        <!-- 输入最大长度 maxlength="" -->
        账号<input type="text" placeholder="请输入真实姓名">
        <br>
        密码<input type="password" placeholder="请输入大于6位的密码" maxlength="11">
        
        
        <!-- 单选框 
        input:radio
        通过name属性实现单选的效果（name值一样）
        通过id值与label的for值相同，把内容与单选框绑定，使点击内容也可被选中
        -->
        <br>
        <label for="male">男</label>
        <input type="radio" name="gender" id="male">
        <label for="female">女</label>
        <input type="radio" name="gender" id="female">
        <label for="secrecy">保密</label>
        <input type="radio" name="gender" id="secrecy">
        <br>
        
        
        
        <!-- 多选框
        input:checkbox
        特殊属性（标志性属性）：属性名与属性值相同 
        checked：默认选中   属性值可以不写，也可用于单选框
        disabled：禁用,设置之后不可更改
        -->
        <input type="text" disabled>
        <br>
        <input type="text"  value="啥子哦">
        <br>
        <label for="fish">酸菜鱼</label>
        <input type="checkbox" name="" id="fish">

        <label for="cai">冒菜</label>
        <input type="checkbox" name="" id="cai" checked>
        <label for="blood">毛血旺</label>
        <input type="checkbox" name="" id="blood" checked="checked">
        <br>



        <!-- 下拉列表
        标志性属性：selected 默认选中
        -->

        <select name="" id="">
        <!-- 选项分组 -->
        <optgroup label="吃辣">
            <option value="chongqing">重庆</option>
        <option value="chengdu">成都</option>
        </optgroup>
        <optgroup label="不吃辣">
            <option value="shanghai" selected>上海</option>
            <option value="guangzhou">广州</option>
        </optgroup>

        </select>
        <br>
        
        
        
        <!-- 多行文本输入框尺寸
        可以调大小，所以要resize: none;
        可以设置尺寸
        -->
        <textarea name="" id="" cols="30" rows="10"></textarea>


        <!-- 提交文件 -->
        <input type="file" name="" id="">
        <br>
        
        
        <!-- h5新增表单控件 -->
        <input type="date" name="" id="">
        <br>
        <input type="month" name="" id="">
        <br>
        <input type="color" name="" id="">
        <br>
        <input type="range" name="" id="">
        <br>
        
        
        
        <!-- 重置按钮，重置用户输入的内容，恢复默认值 -->
        <input type="reset" value="重置">
        <!-- 按钮 -->
        <input type="button" value="这是一个单纯的按钮">
        <!-- 自带提功能 -->
        <button>提交按钮</button>
        <input type="submit" value="提交按钮">
    </form>

textarea {
    /* 不可修改多行文本框尺寸 */
    resize: none;
}

通过id值与label的for值相同，把内容与输入框或单选框绑定，使点击内容也可被选中

键值对(KV对):键名 = 键值

input都需要添加name

value如果是用户输入的则可以不添加

如果是用户选择的则必须添加

<!-- 
        【表单】提交数据、搜索内容
        父元素：form  
        属性：
        action提交地址  
        method:提交方式（get/post）


        子元素：
        input
        select
    -->
    <!-- 键值对
        键名=键值
        input都需要添加name
        value如果是用户输入的则可以不添加
        如果是用户选择的则必须添加
    -->
    <form action="#" method="post">
        <label for="useranme"> 用户名<span>*</span>:</label>
        <input type="text" id="useranme" name="username" value="abc">
        <p></p>
        <label for="pwd">密码:</label>
        <input type="password" id="pwd" name="pwd">
        <p></p>
        <input type="radio" id="male" name="gender" value="male" checked="checked">
        <label for="male">男:</label>

        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女:</label>

        <input type="submit">
        <input type="reset">
        <input type="button">
        <button>提交</button>

    </form>

过渡效果

过渡是在规定的时间内从一个状态变化到另一个状态的过程(颜色、尺寸、透明度)

transition(简写形式)

transition-property：参与过渡的属性 all(默认值) 所有属性 width、height、color
transition-timing-function 过渡效果的动画属性
- ease 慢快慢（默认）
- linear 线性匀速
- ease-in 缓慢启动
- ease-out 缓慢结束
- ease-in-out 开始和结束慢，中间匀速
transition-duration (必须有) 过渡时间单位 : s秒 ms 毫秒
transition-delay 过渡延迟时间单位 :s秒 ms 毫秒

aside div {
    width: 100px;
    height: 100px;
    background-color: brown;
    margin-bottom: 30px;
    /* 定义回来的时间 */
    transition-duration: 2s;

}
.child1:hover {
    width: 300px;
    transition-duration: 5s;
    transition-timing-function: ease;
}

元素变换

transform(CSS新增)：元素移动位置，不会影响其他元素的位置

translate

.box1 {
    width: 100px;
    height: 100px;
    background-color: #bfa;
    /* 相对于x轴和y轴的位置 */
    transform: translate(300px,100px);
    /* 相对于x轴移动 */
    transform:translateX(100px);
    /* 相对于y轴移动 */
    transform: translateY(400px);
    /* 取百分比 相对于自身宽高的百分比 */
    transform: translate(20%,50%);
 }

居中效果

.parent {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    position: relative;
}
.son {
    width: 100px; 
    height: 100px;
    background-color: blue;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

rotate 旋转角度为正时顺时针旋转，为负时逆时针旋转

.box2 {
    width: 200px;
    height: 150px;
    background-color: crimson;
    
}
.box2:hover {
    transform: rotate(-1800deg);
    transition: 1s;
}

scale:元素缩放
- 父元素缩放，子元素也跟着缩放
- 可以填两个参数，用逗号隔开，表示水平方向和竖直方向分别缩放的比例，一个参数时表面水平和竖直方向同等比例缩放

.box3 {
    width: 300px;
    height: 300px;
    background-color: chartreuse;
}
.box3:hover {
    transform: scale(1.5,2);
    transition: 2s;
}
p {
    transform: scale(.5);
}

skew:元素倾斜

.box4 {
    width: 200px;
    height: 100px;
    background-color:blue;
}
.box4:hover {
    transform: skew(60deg,45deg);
    transition: 2s;
    transform: skewX(-90deg);
    transform: skewY(-90deg);
}

前端学习-初级-第二周