web前端六

超级闪电侠fff

已于 2024-12-20 22:37:35 修改

阅读量650

点赞数

文章标签：前端 css javascript

于 2022-12-03 19:05:38 首次发布

本文链接：https://blog.csdn.net/S788977SS/article/details/128071724

版权

Flex弹性盒模型

flex布局，可简便，完整，响应式的实现各种布局

这里
是引用

在这里插入图片描述
没加display：flex前

加了后

flex-direction

控制子项整体布局方向

row 默认值显示为行。方向为当前文档水平流方向，默认情况是从左往右

在这里插入图片描述

row-reverse 显示为行，但方向和row属性值相反

  #box{width: 400px;height: 200px;border:1px black solid;margin:20px auto;display: flex;flex-direction:row-reverse}
    #box div{width: 100px;height: 50px; color:beige;background:  blueviolet;line-height: 60px;text-align: center;}
    </style>
</head>
<body>
    <div id="box">
        <div>2</div>
        <div>4</div>
        <div>5</div>
    </div>

在这里插入图片描述

column 显示为列

  #box{width: 400px;height: 200px;border:1px black solid;margin:20px auto;display: flex;flex-direction:column}
    #box div{width: 100px;height: 50px; color:beige;background:  blueviolet;line-height: 60px;text-align: center;}
    </style>
</head>
<body>
    <div id="box">
        <div>2</div>
        <div>4</div>
        <div>5</div>
    </div>

在这里插入图片描述

column-reverse 显示为列。方向和column属性相反

行内元素变成块元素
只有一个元素时，父元素加display：flex,子元素加margin：auto就能

flex-wrap

用来控制子项单行显示还是换行显示

nowrap 默认值表单行显示不换行
会自行压缩内容所占宽，适应容器宽度。直至内容无法压缩
wrap 宽度不足显示换行

 - <style>
    #box1{width: 200px;height: 600px;border:1px black solid;margin:20px auto;display: flex;flex-wrap: wrap;}
    #box1 div{width: 100px;height: 50px; color:beige;background:  blueviolet;line-height: 60px;text-align: center;}
    </style>
</head>
<body>
    <div id="box1">
        <div>23333</div>
        <div>43333</div>
        <div>53333</div>
        <div>23333</div>

在这里插入图片描述

wrap-reverse 宽度不足显示换行，从下往上开始

中间的空白是由于换行将容器平均分为二分之一

flex-flow

是 flex-direction和 flex-wrap的缩写，表示flex布局的flow流动特性。
第一个值表方向，第二个值表换行，中间空格隔开

 <style>
    #box1{width: 500px;height: 100px;border:1px black solid;margin:20px auto;display: flex;flex-flow: column wrap;}
    #box1 div{width: 100px;height: 50px; color:beige;background:  blueviolet;line-height: 60px;text-align: center;}
    </style>
</head>
<body>
    <div id="box1">
        <div>23333</div>
        <div>43333</div>
        <div>53333</div>
        <div>23333</div>

在这里插入图片描述

justify-content

决定了主轴方向（flex-direction设置的方向）上子项的对齐和分布方式
在这里插入图片描述

 <style>
    #box1{width: 500px;height:400px;border:1px black solid;margin:20px auto;display: flex;justify-content: space-between}
    #box1 div{width: 100px;height: 50px; color:beige;background:  blueviolet;line-height: 60px;text-align: center;}
    </style>
</head>
<body>
    <div id="box1">
        <div>2</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

在这里插入图片描述

align-items

items指的是flex的子项们，align-items指的子项相对于flex容器在侧轴方向上的对齐方式

这里
是引用

加align-items: center前

 #box1{width: 500px;height:400px;border:1px black solid;margin:20px auto;display: flex;justify-content: space-evenly}
    #box1 div{width: 100px;background:  blueviolet;}
    </style>
</head>
<body>
    <div id="box1">
        <div>人工测试测试</div>
        <div>来得及测试初始</div>
        <div>等吃饭测试</div>

在这里插入图片描述

加后

#box1{width: 500px;height:400px;border:1px black solid;margin:20px auto;display: flex;justify-content: space-evenly;align-items: center;}
    #box1 div{width: 100px;background:  blueviolet}
    </style>
</head>
<body>
    <div id="box1">
        <div>人工测试测试</div>
        <div>来得及测试初始</div>
        <div>等吃饭测试</div>
    </div

> 这里是引用

在这里插入图片描述

align-content

可以看成和justify-content是相似且对立的属性针对侧轴。须多行如果所有flex子项只有一行，则align-content无任何效果
默认值：stretch 每一行flex子元素都等比例拉伸，如：如果共两行flex子元素着每一行拉升高度是50%
其他值：
flex-start：表现为起始位置对齐
flex-end：表现为结束位置对齐
center：表现为居中对齐
space-between：表现为两端对齐
space-around：每一行元素上下都享有独立不重叠的空白空间
space-evenly:每一行元素都完全上下等分

<style>
    #box1{width: 500px;height:400px;border:1px black solid;margin:20px auto;display: flex;justify-content: space-evenly;align-items: start;flex-wrap: wrap;align-content:space-between;}
    #box1 div{width: 100px; background:  blueviolet}
    </style>
</head>
<body>
    <div id="box1">
        <div>人工测试测试而非为v无人v</div>
        <div>来得及测试初始收藏市场上出售</div>
        <div>等吃饭测试到处都是大V大V很高吧v过v关于uTV </div>

在这里插入图片描述

<style>
    #box1{width: 500px;height:400px;border:1px black solid;margin:20px auto;display: flex;justify-content: space-evenly;align-items: start;flex-wrap: wrap;align-content:flex-start;}
    #box1 div{width: 100px; background:  blueviolet}
    </style>
</head>
<body>
    <div id="box1">
        <div>人工测试测试而非为v无人v</div>
        <div>来得及测试初始收藏市场上出售</div>
        <div>等吃饭测试到处都是大V大V很高吧v过v关于uTV </div>
        <div>来得及测试初始收藏市场上出售</div>

在这里插入图片描述

作用在flex子项上的css属性

order 可通过设置order改变某一个flex子项的排列位置。所有flex子项的默认order属性值是0，order后设置的值·越大越靠后排

  <style>
    #box1{width: 500px;height:400px;border:1px black solid;margin:20px auto;display: flex;}
    #box1 div{width: 100px;height:50px;color: azure;line-height: 50px;text-align: center; background:  blueviolet}
    #box1 div:nth-child(1){order:1;}
    #box1 div:nth-child(2){order:1}
    #box1  div:nth-child(3){order:-1}
    </style>
</head>
<body>
    <div id="box1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

在这里插入图片描述

flex-grow 属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余空白间隙，默认值0；

 <style>
    #box1{width: 500px;height:400px;border:1px black solid;margin:20px auto;display: flex;}
    #box1 div{width: 100px;height:50px;color: azure;line-height: 50px;text-align: center; background:  blueviolet}
    #box1 div:nth-child(1){background: fuchsia;color: black;flex-grow: 0.5;}
    #box1 div:nth-child(2){background: tomato;color: black;flex-grow: 0.5;}
    </style>
</head>
<body>
    <div id="box1">
        <div>1</div>
        <div>2</div>
        <div>3</div>

在这里插入图片描述
块一和块二各占一半空白区域

flex-shrink 主要处理当flex容器空间不足的时候，单个元素的收缩比例。默认值1

#box1{width: 500px;height:400px;border:1px black solid;margin:20px auto;display: flex;}
    #box1 div{width: 100px;height:50px;color: azure;line-height: 50px;text-align: center; background:  blueviolet}
    #box1 div:nth-child(2){background: fuchsia;color: black;flex-shrink: 4;}
    </style>
</head>
<body>
    <div id="box1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>1</div>
        <div>2</div>

在这里插入图片描述

flex-basis （优先级高于width
）定义了在分配剩余空间之前元素的默认值大小

 <style>
    #box1{width: 500px;height:400px;border:1px black solid;margin:20px auto;display: flex;}
    #box1 div{width: 100px;height:50px;color: azure;line-height: 50px;text-align: center; background:  blueviolet}
    #box1 div:nth-child(2){background: fuchsia;color: black;flex-basis: 130px;}
    </style>
</head>
<body>
    <div id="box1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

在这里插入图片描述

flex 是flex-grow，flex-shrink，flex-basis（默认值auto）的缩写
要想弹性盒子宽优先级高于默认宽，则用flex。要想保留原宽度就用flex-grow。其中，flex-grow属性定义了项目的放大比例，默认为0，即如果存在剩余空间，也不放大。而flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。最后，flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto，即项目的本来大小。因此，flex:1等价于flex:1 1 0，表示项目将放大，但不缩小，且初始大小为0。常用于自适应布局，将父容器的display设置为flex，然后将子元素的flex属性设置为1，这样子元素就会自动占据剩余空间，实现自适应布局。
align-self 指控制单独某一个flex子项的垂直对齐方式

 <style>
    #box1{width: 500px;height:400px;border:1px black solid;margin:20px auto;display: flex;}
    #box1 div{width: 100px;height:50px;color: azure;line-height: 50px;text-align: center; background:  blueviolet}
    #box1 div:nth-child(2){background: fuchsia;color: black;align-self: center;}
    </style>
</head>
<body>
    <div id="box1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

在这里插入图片描述

flex案例

1.骰子点数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=".\common.css">
    <title>Document</title>
    <style>
      #box1{width: 100px;height: 100px;border:1px solid black;border-radius: 6px;display:flex;align-items: center;justify-content: center;}  
      #box1 div{width: 30%;height: 30%;border-radius: 50%;background: black;}
      #box2{width: 100px;height: 100px;border:1px solid black;border-radius: 6px;display:flex;justify-content: space-between;}  
      #box2 div{width: 30%;height: 30%;border-radius: 50%;background: black;}
      #box2 div:nth-child(2){align-self: flex-end;}
      #box3{width: 100px;height: 100px;border:1px solid black;border-radius: 6px;display:flex;align-items: center;justify-content: space-between;}  
      #box3 div{width: 30%;height: 30%;border-radius: 50%;background: black;}
      #box3 div:first-child{align-self: flex-start;}
      #box3 div:last-child{align-self:flex-end;}

      #box4{width: 100px;height: 100px;border:1px solid black;border-radius: 6px;display:flex; flex-wrap: wrap;}  
      #box4 div{width: 100%;display: flex;justify-content: space-between;}
      #box4 i{display:block;width: 30%;height: 60%;background: black;border-radius: 50%;}
      #box4 div:last-child{align-items:flex-end;} 

      #box5 {width: 100px;height: 100px;border:1px solid black;border-radius: 6px;display:flex;flex-wrap: wrap;} 
    #box5 div{width: 100%;display: flex;justify-content: space-between;} 
    #box5 i{width: 30%;height:98%;display: block;background: black;border-radius: 50%;}
    #box5 div:nth-child(2) {align-items: center;justify-content: center;}
    #box5 div:last-child{align-items: flex-end;}

    #box6 {width: 100px;height: 100px;border:1px solid black;border-radius: 6px;display:flex;justify-content: space-between;} 
    #box6 div{width: 100%;display: flex;justify-content: space-between;} 
    #box6 div:nth-child(1){flex-direction: column;}
    #box6 div:nth-child(2){flex-direction: column;align-items: flex-end;}
    #box6 i{width: 60%;height: 30%;display: block;background: black;border-radius: 50%;}
    </style>
</head>
<body>
    <div id="box1">
        <div></div>
    </div>
    <div id="box2">
        <div></div>
        <div></div>
    </div>
    <div id="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box4">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div id="box5">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div id="box6">
        <div>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</body>
</html>

效果图
在这里插入图片描述
2.两列固定，一列自适应

<style>
      #main{width: 1080px;height: 150px;background: yellowgreen;display: flex;}
      .left{height: 50px;width: 60px;background: #3255;}
      .center{height: 50px;flex: 1;background:saddlebrown;}
      .right{height: 40px;width: 60px;background: darkgoldenrod;}
    </style>
</head>
<body>
   <div id="main">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
   </div>

在这里插入图片描述

3.百度弹性导航

Grid网格布局

是一个二维的布局方法，纵横两个方向总是同时存在

作用在grid容器上

grid-template-columns和grid-template-rows

对网格进行横纵划分，形成二维布局，单位可是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）
有时候。我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat（）语法进行简化操作。

<style>
      .box{width: 500px;height: 600px;border: 1px gray dotted;display:grid;grid-template-rows:50px auto; grid-template-columns:50px 70px auto}
   </style>
</head>
<body>
  <div class="box">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
  </div>

在这里插入图片描述

<style>
      .box{width: 500px;height: 600px;border: 1px gray dotted;display:grid;grid-template-rows:1fr 1fr 1fr; grid-template-columns:1fr 2fr}
   </style>
</head>
<body>
  <div class="box">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
  </div>

在这里插入图片描述
grid-template-rows:1fr 1fr 1fr可写为grid-template-rows:repeat(3,1fr)
在style标签中加 #head div{background: red;border:1px black solid;}可添加颜色边框

grid-template-areas和grid-template

grid-template-areas给网格划分区域，此时grid子项只要使用grid-area属性指定其隶属于那个区
grid-template是grid-template-rows,grid-template-columns和grid-template-areas属性的缩写。

  <style>
      #head{width: 400px;height:160px;border: 1px gray dotted;display: grid;grid-template-rows:1fr 1fr 1fr;grid-template-columns:repeat(2,1fr);grid-template-areas: "a1 a1 a1"
      "a2 a2 a3"
      "a2 a2 a3";}
      #head div{background: red;border:1px black solid;}
      #head div:nth-child(1){grid-area: a1;}
      #head div:nth-child(2){grid-area: a2;}
      #head div:nth-child(3){grid-area: a3;}
   </style>
</head>
<body>
   <div id="head">
      <div>1</div>
      <div>2</div>
      <div>3</div>
   </div>

在这里插入图片描述

grid-column-gap和grid-row-gap

用来定义网格中网格间隙的尺寸
CSS grid-gap属性是grid-row-gap和grid-column-gap属性的缩写。

<style>
      #head{width: 400px;height:160px;border: 1px gray dotted;display: grid;;grid-template:    "a1 a1 a1"1fr
      "a2 a2 a3"1fr
      "a2 a2 a3"1fr/1fr 1fr 1fr;grid-gap:20px 10px;}
      #head div{background: red;border:1px black solid;}
      #head div:nth-child(1){grid-area: a1;}
      #head div:nth-child(2){grid-area: a2;}
      #head div:nth-child(3){grid-area: a3;}
   </style>
</head>
<body>
   <div id="head">
      <div>1</div>
      <div>2</div>
      <div>3</div>
         </div>

在这里插入图片描述

justify-items和align-items

前者指网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。
后者指定了网格元素的垂直呈现方式，是垂直拉伸还是居中上下对齐
取值：
stretch: 默认值，拉伸，表现为水平或垂直填充
start：表现为容器左侧或顶部对齐
end:表现为容器右侧或底部对齐
center:表现为水平或垂直居中对齐
例如：

<style>
    #head{width: 400px;height:160px;border: 1px gray dotted;display: grid;;grid-template:    "a1 a1 a1"1fr
      "a2 a2 a3"1fr
      "a2 a2 a3"1fr/1fr 1fr 1fr;justify-items: center;}
      #head div{background: red;border:1px black solid;}
   </style>
</head>
<body>
   <div id="head">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div> 
      <div>6</div>
      <div>7</div>
      <div>8</div> 
      <div>9</div>

在这里插入图片描述
place-items可以让align-items和和justify-items属性写在单个声明中
如

justify-items: center;align-items: end;

可写为

place-items：end center

justify-content和align-content

前者指定了网格元素的水平分布方式，后者指定了网格元素的垂直分布方式
place-content可以让align-content和justify-content属性写在一个css声明中（place-content：纵衡）
取值：
stretch: 默认值，拉伸，表现为水平或垂直填充
start：表现为容器左侧或顶部对齐
end:表现为容器右侧或底部对齐
center:表现为水平或垂直居中对齐
space-between：表现为两端对齐
space-around：享有独立不重叠的空白空间
space-evenly:平均分配空白空间

 #head{width: 400px;height:160px;border: 1px gray dotted;display: grid;;grid-template-rows:repeat(3,auto); grid-template-columns:repeat(3,auto);justify-content: end;}
      #head div{background: red;border:1px black solid;}
   </style>
</head>
<body>
   <div id="head">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div> 
      <div>6</div>
      <div>7</div>
      <div>8</div> 
      <div>9</div>

在这里插入图片描述

作用在grid子项上的css属性

取值：

grid-column-start:水平方向上占据的起始位置
grid-column-end：水平方向上占据的结束位置（span属性）
grid-row-star：垂直方向上占据的起始位置
grid-row-end：垂直方向上占据的结束位置（span属性）
span关键字表示要从起始位置向后添加的个数
如：

 <style>
    #head{width: 400px;height:160px;border: 1px gray dotted;display: grid;grid-template-rows:repeat(3,1fr); grid-template-columns:repeat(3,1fr);justify-content: end;}
      #head div{background: red;border:1px black solid; grid-row-end:3;grid-row-start:2;grid-column-end: 3;grid-column-start: 2;}
   </style>
</head>
<body>
   <div id="head">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div> 
      <div>6</div>
      <div>7</div>
      <div>8</div> 
      <div>9</div>

在这里插入图片描述

grid-row-end等等后面的数字表示的是网格线,当grid-column-end: 3改成grid-column-end: span 2时，变成如下情况
在这里插入图片描述
可将上面 grid-row-end等改成grid-column: 2/span 2;grid-row:2/3

grid-column：grid-column-end/grid-column-start的缩写
grid-row：grid-row-end/grid-row-star的缩写
grid-area：表示当前网格所占用的区域，名字和位置两种表示方法

 grid-area: 2/2/3/3

（第一个值是水平起始，第二个垂直起始，第三个水平结束，第四个水平垂直
在这里插入图片描述

justify-self：单个网格元素的水平对齐方式
align-self:单个网格元素的垂直对齐方式
place-self：align-self和justify-self的缩写

骰子

在这里插入图片描述

<style>
        #part1{width: 100px;height: 100px;border: 1px black solid;border-radius: 6px;
        display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}
        #part1 div{width: 20px;height: 20px;border: 1px black solid;background: black;border-radius: 50%;}
        #part1 div:nth-child(1){grid-area: 2/2/3/3;}

        #part2{width: 100px;height: 100px;border: 1px black solid;border-radius: 6px;
        display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}
        #part2 div{width: 20px;height: 20px;border: 1px black solid;background: black;border-radius: 50%;}
        #part2 div:nth-child(2){grid-area: 3/3/4/4;}

        #part3{width: 100px;height: 100px;border: 1px black solid;border-radius: 6px;
        display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}
        #part3 div{width: 20px;height: 20px;border: 1px black solid;background: black;border-radius: 50%;}
        #part3 div:nth-child(2){grid-area: 2/2/3/3;}
        #part3 div:nth-child(3){grid-area: 3/3/4/4;}

        #part4{width: 100px;height: 100px;border: 1px black solid;border-radius: 6px;
        display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}
        #part4 div{width: 20px;height: 20px;border: 1px black solid;background: black;border-radius: 50%;}
        #part4 div:nth-child(2){grid-area: 1/3/2/4;}
        #part4 div:nth-child(3){grid-area: 3/1/4/2;}
        #part4 div:nth-child(4){grid-area: 3/3/4/4;}

        #part5{width: 100px;height: 100px;border: 1px black solid;border-radius: 6px;
        display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}
        #part5 div{width: 20px;height: 20px;border: 1px black solid;background: black;border-radius: 50%;}
        #part5 div:nth-child(2){grid-area: 1/3/2/4;}
        #part5 div:nth-child(3){grid-area: 2/2/3/3;}
        #part5 div:nth-child(4){grid-area: 3/1/4/2;}
        #part5 div:nth-child(5){grid-area: 3/3/4/4;}

        #part6{width: 100px;height: 100px;border: 1px black solid;border-radius: 6px;
        display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}
        #part6 div{width: 20px;height: 20px;border: 1px black solid;background: black;border-radius: 50%;}
        #part6 div:nth-child(2){grid-area: 2/1/3/2;}
        #part6 div:nth-child(3){grid-area: 3/1/4/2;}
        #part6 div:nth-child(4){grid-area: 1/3/2/4;}
        #part6 div:nth-child(5){grid-area: 2/3/3/4;}
        #part6 div:nth-child(6){grid-area: 3/3/4/4;}
    </style>
</head>
<body>
    <div id="part1">
        <div></div>
    </div>
    <div id="part2">
        <div></div>
        <div></div>
    </div>
    <div id="part3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="part4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="part5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="part6">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

JavaScript

起源：
诞生于1995年，他的出现主要用于处理网页中的前端验证，
前端验证指的是检查用户输入的内容是否符合一定规则（如用户名长度，密码长度，邮箱格式等）

JS的Helloworld

JS代码需要编写到script标签中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    </script>
</head>
<body>
</body>
</html>

type后面是属性，写不写都可以是默认值。

控制浏览器发一个警告
用alert

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
      alert("这是唯独");
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

document.write可以向body中输入一个内容

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
      /*
      * alert("这是唯独");
      */
     document.write("开始放假了")
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述
其中：

  /*
      * alert("这是唯独");
      */

用于把不用的代码注释起来

console.log向控制台输入一个内容

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
      /*
      * alert("这是唯独");
      *  document.write("开始放假了")
      */
   console.log("运行页看不见")
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述
JS其中的代码是一行一行执行的

JS编写的位置

1.在script标签中写
2.写在外部js文件中，通过script标签引入

 <script src="out.js"></script>

注意：当script标签中引入了外部文件后就不能编写代码了，即使编写了浏览器也会忽略。如果需要可以创建一个新的script标签用于编写内部代码
3.可以将JS代码编写到标签的onclick属性中，点击按钮时JS代码才会执行

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <button onclick="alert('开始执行');">确定</button>
</body>
</html>

在这里插入图片描述
然后

4.在超链接的href属性中写JS代码，这样在点击超链接时就会执行JS代码

<a href="javascript:alert('一样效果');">点击</a>

虽然可以写在标签的属性中但不建议，他们属于结构与行为耦合，不方便维护
在这里插入图片描述

JS基本语法

1.js注释

/*
*
*/

表多行注释。注释后的内容不会被执行，但可在源代码中查看

//

表单行注释
2.JS中严格区分大小写，且每一条语句以分号（英文的）结尾
3.JS会忽略多个空格或换行

字面量或变量

1.字面量，都是不可变的值，可直接使用但一般不直接使用
比如：1 2 3等等
2.变量，可用来保存字面量，而且变量的值可以任意改变，一般用变量去保存一个字面量，而很少直接用字面量
3.声明变量
在js中用var关键字声明一个变量
4.为变量赋值
变量和赋值可同时进行
5.可通过变量对字面量进行描述

标识符

js中可用自己命名的都可以称为是标识符。例如变量名，函数名，属性名都属于标识符
命名规则：
1.标识符可以含有字母，数字，_,$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或保留字
4.标识符一般采用驼峰命名法（首字母小写，每个单词开头字母大写其他字母小写）
JS底层保存标识符实际上采用Unicode（Utl-8）,理论上所有Utf-8中含有的内容都可作为标识符

字符串

数据类型指的是字面量的类型

js中有六种数据类型：
String 字符串
在js中字符串需要用引号引起来（双引号和单引号都可），引号不能嵌套（双引号中不能用双引号，单不能用单，但可在单里放双）。在字符串中我们可以用\做为转义字符，当表示一些特殊符号时可用\进行转义
" 表示"
’ 表示’
\n 表换行
\t 制表符
\\ 表是 \
注：alert(“str”)表示输出字符串
alert（str）表示输出变量str
number 数值

js中所有的数值都是Number类型，包括整数和浮点数（小数）)。
可以使用一个运算符typeof来检查一个变量类型，语法：typeof 变量
检查字符串是返回string，检查数值时会反回number
js中可以表示的数字最大值：Number.MAX_VALUE,如果使用number表示的数字超过最大值，则会返回一个Infinity（-Infinity表示负无穷）表示正无穷（Number.MIN_VALUE表示大于零的最小值）
NaN 是一个特殊的数字，表示Not a Number,使用typeof检查一个NaN和Infinity一样也会返回number
js中整数的运算能基本可保证精确，如果使用js进行小数运算可能得到一个不精确的结果，千万不要用js进行对精确度要求比较高的运算

Boolean 布尔值
只有两个：true表示真，false表示假
用typeof检查布尔值时会返回boolean
Null 空值
Null类型的值只有一个，就是null专门用来表示空对象。用typeof检查Null时会返回object
Undefined 未定义
值只有一个 undefined,当声名一个变量但不给它赋值时，他的值就是 undefined。用typeof检查 undefinedl时会返回 undefined
Object 对象
前六种属于基本数据类型，object属于引用数据类型

强制类型转换

将一个数据类型强制转换为其他的数据类型，将其他数据类型转换为：String number Boolean
1.其他数据类型转换为：String
方法一：调用被转化数据类型的toString(）方法

 <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
  <script>
   var a=123;
   var b=a.toString()
   console.log(typeof b)
   console.log( b)
  </script>
</head>
<body>
</body>
</html>

在这里插入图片描述
该方法不会影响原变量，它会将转换的结果返回。
但注意调用null和undefined这两个值没有tostring,调用他们会报错
方式二：
调用string（）函数，并将被转换的数据作为参数传递给函数

 var a=2;
         a=String(a)
        console.log(typeof a);
        console.log(a)

在这里插入图片描述

对于number和 Boolean实际上就是调用tostring()方法。但对于null和undefined不是调用tostring()方法。
它会将null直接转换为"null"
将undefined直接转换为"undefined"
2.将其他数据类型转换为number
转换方式一：使用Number()函数
字符串转为数字：如果为纯数字的字符串则直接将其转化位为数字。
如果有非数字类容就转换为NaN
如果字符串是一个空格或是一个全为空格的字符转为0

 var a=" ";
         a=Number(a)
        console.log(typeof a);
        console.log(a);

在这里插入图片描述

布尔转数字：
true转为1
false转为0
Null转数字为0
undefined 转数字为NaN
转换方式二:
专门对付字符串。
parseInt()把一个字符串转换为一个整数（将一个字符串中的有效整数取出）

 <script>
   var a="123px";
    a=parseInt(a)
   console.log(typeof a)
   console.log(a)
  </script>

在这里插入图片描述

parseFloat()把一个字符串转换为浮点数
和parseInt（）相似将一个字符串中的有效小数取出
如果不是String，先将其转换为String
3.将其他的数据类型转换为 Boolean
使用Boolean()函数
数字转布尔：除了0和NaN,其余的都是true
字符串转布尔：除了空串，其余都是true
null和undefined都会转换为false
对象（即使是空对象）也会转为true（如果你想检查一个对象是否有属性（即是否为“空”），你需要明确检查其属性的数量，Object.keys(对象名).length）

其他进制的数字

1.在js中如果需要表示16进制的数字，则要以0x开头
2.如果需要表示8进制的数字，则需要以0开头
3.如果要表示二进制数字，则要以0b开头，但不是所有浏览器都支持
像070这种字符串有的浏览器会当成八进制解析，有些会当成十进制解析
可以在parseInt()中传递一个第二个参数，来指定数字的进制

a=parseInt(a,10)

算数运算符

运算符也叫操作符，通过运算符可将一个或多个值进行运算。并获取运算结果
比如：typeof就是运算符，可以用来获取一个值的类型，将该类型以字符串的形式进行返回(null undefined number Boolean string)
算数运算符：+ ，-，*，/，%
加法
1.对非Number类型的值进行运算时，会将这些值转换为Number然后运算，除了字符串加法。（任何值和NaN做运算都得NaN）
2.对两个字符串进行加法就会将两个字符串拼接为一个字符串并返回。
3.任何值和字符串做加法运算，都会先转换为字符串，然后进行字符串的拼接。
4.只需要为任意一个数据类型+" “就可将他转为string。这是一种隐式的类型转换实际也是用的string（）函数
result=“1”+3+3为133
result=1+2+” 3"为33

一元运算符

只需要一个操作数
+正号，不会对数字产生任何影响
-负号可对负号进行数字取反
对非number的先转换为number类型，然后再运算。可将其他类型用+转换为number，原理和number函数一样

var a="12"
        a=+a;
        console.log(a);
        console.log(typeof a)

在这里插入图片描述

自增自减

自增++
在自身基础上加1，对于一个变量自增以后，原变量的值就会立即自增1
a++和++a都会让原变量自加1
a++的值等于原变量的值，(自增前的值）
++a的值等于原变量的新值（自增后）
自减–
通过自减使变量在自身基础上减1
a–和–a都会让原变量自减1
a–是自减前的值
–a是新值

 var a="12";
        var b=2;
        a=+a;
        a=++a;
        b=--b
        console.log(a);
        console.log(typeof a);
        console.log(b)

在这里插入图片描述

逻辑运算符

三中种逻辑运算符

！非
！可用来对一个值进行非运算（对一个布尔值进行取反操作true变false,false变true）对非布尔值进行运算会将其转化为布尔值再取反
可将任意数据类型进行两次！！运算，转为布尔值
&& 与
对符号两边的值进行与运算并返回结果，只要有一个false就返回false
js中的" 与"属于短路与，第一个为false就不会看第二个。
|| 或
对符号两边的值进行或运算并返回结果
两边有一个true就返回true
只要第一个为false就会检查第二个值

非布尔值的与或运算

对非布尔进行与或运算时，会将其转换为布尔值，在运算并返回原值
与运算：如果两个都为true，则返回后面的
如果两个值都有false，返回靠前的false
如果第一个为false着直接返回第一个值
或运算：如果第一个值为false，直接返回第二个
如果第一个为true。着直接返回第一值

var result=2 && 1;
        console.log("result="+result)

在这里插入图片描述

赋值运算符

=将符号右边的值赋给符号左边变量
+=例如 a+=4等价a=a+4(-=,*=,/=,%=与它结构一样）

var a=4;
        a+=2;

在这里插入图片描述

关系运算符

通过关系运算符比较两个值之间的大小
关系成立返回true，不成立返回false
有>,>=,<,<=这些符号
1.非数值的情况，将其转换换为数字进行比较，如果两边都是字符串，不会将其转为数字进行比较，而会分别比较字符串中字符的Unicode编码，一位一位进行比较，一样则比较下一位。比较中文时没意义
2.任何值和NaN做任何比较都是false
3.比较两个字符串形的数字，可能就会得到不可预期的结果。注：在比较两个字符串形数字时，一定要转形

unicode编码表

在字符串中使用转义字符输入Unicode编码
\u四位编码

  console.log("\u2620");

在这里插入图片描述

在网页中使用unicode编码（十六进制）
&#编码；这里的编码需要十进制

相等运算符

1.==等于

相等运算，用来比较两个值是否相等
如果相等则返回true，不等就返回false
如果值类型不同就会自动转换为相同类型。然后比较
undefined衍生自null，这两个值做相等判断时，会返回true
NaN不和任何值相等，包括他本身
判断一个值是否为NaN，可通过isNaN（）函数来判断一个值是否为NaN，是则返回true，不是则返回false

！=不等

判断两个值是否不相等，不相等返回true，相等返回false
也会对变量进行自动类型转换，转换后在判断

全等===
用来判断两个值是否全等，和相等类似，但如果两个值类型不同不会转换，直接返回false
4，不全等！===
用来判断两个值是否不全等，和不等类似，但如果两个值类型不同不会转换，直接返回true

条件运算符

也叫三元运算符
语法：条件表达式？语句1：语句2；
执行流程：首先对条件表达式进行求值如果该值为true，执行语句1，并返回执行结果
如果false则执行语句2，并返回执行结果

<script>
   var a=22;
   var b=12;
 var max=a>b? a:b;
  console.log("max="+max);
  </script>

在这里插入图片描述
如果不是布尔值会将其转换为布尔值再运算

"hello"?alert("语句1"):alert("语句2")

在这里插入图片描述

web前端 六

web前端 六

Flex弹性盒模型

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

作用在flex子项上的css属性

flex案例

Grid网格布局

作用在grid容器上

grid-template-columns和grid-template-rows

grid-template-areas和grid-template

grid-column-gap和grid-row-gap

justify-items和align-items

justify-content和align-content

作用在grid子项上的css属性

骰子

JavaScript

JS的Helloworld

JS编写的位置

JS基本语法

字面量或变量

标识符

字符串

强制类型转换

其他进制的数字

算数运算符

一元运算符

自增自减

逻辑运算符

非布尔值的与或运算

赋值运算符

关系运算符

unicode编码表

相等运算符

条件运算符

web前端六

web前端六