前端基础

Posted 2020-12-13 liguangyang

文档流

• 所有的元素默认情况下都是在文档流中存在的

  • 文档流是网页的最底层

  • 元素在文档流中的特点：

    • 块元素 1.默认宽度是父元素的全部 2.默认高度被内容（子元素）撑开 3.在页面中自上而下垂直排列

    • 内联元素 1.默认高度和宽度都被内容撑开 2.在页面中自左向右水平排列，如果一行不足以容下所有的元素 则换到下一行继续从左向右

浮动

• 使用float来设置元素的浮动

  • 可选值： none 默认值，元素不浮动，就在文档流中 left 元素向页面的左侧浮动 right 元素向页面的右侧浮动

  • 浮动特点： 1.元素设置浮动以后，会完全脱离文档流，并向页面的左上或右上浮动。 直到遇到父元素的边框或其他的父元素时则停止浮动。 2.如果浮动元素上边是一个没有浮动的块元素，元素不会超过该块元素。 3.浮动元素的浮动位置不能超过他上边浮动的兄弟元素，最多一边齐 4.浮动元素不会覆盖文字，文字会围绕在浮动元素的周围，所以可以通过浮动来实现文字环绕图片的效果。

 - 浮动以后元素会完全脱离文档流，脱离文档流以后元素会具有如下特点：
     1.块元素不独占一行
     2.块元素的宽度和高度都被内容撑开
     3.元素不在文档流占用位置
     4.内联元素会变成块元素
     
 - 高度塌陷
     - 在文档流中元素的高度默认被子元素撑开，当子元素浮动时，子元素会脱离文档流，
         此时将不能撑起父元素的高度，会导致父元素的高度塌陷。父元素高度塌陷会导致其他元素的位置上移，导致页面的布局混乱。
     - 可以通过开启元素的BFC来处理高度塌陷的问题。
         - BFC叫做Block Formatting Context
         - 它是一个隐含属性，默认情况是关闭，当开启以后元素会具有如下的特性：
             1.父元素的垂直外边距不会和子元素重叠
             2.开启BFC的元素不会被浮动元素覆盖
             3.父元素可以包含浮动的子元素 ******
         - 开启BFC的方式很多：
             1.设置元素浮动
             2.设置元素绝对定位
             3.设置元素为inline-block
             4.将元素的overflow设置为一个非默认值
         - 一般我们采取副作用比较小的方式
             overflow:hidden;

定位

• 通过定位可以将元素摆放到页面的任意位置

  • 使用position来设置元素的定位

    • 可选值：

      • static 默认值 元素不开启定位

      • relative 开启元素的相对定位

      • absolute 开启元素的绝对定位

      • fixed 开启元素的固定定位

     - 相对定位
         1.相对于元素自身在文档流中的位置进行定位
         2.相对定位的元素不会脱离文档流，定位元素的性质不会改变，块还是块，内联还是内联
         3.如果不设置偏移量，元素不会发生任何的变化
         4.会提升元素的层级
         
     - 绝对定位
         1.相对于离它最近的开启了定位的祖先元素进行定位，如果祖先元素都没有开启定位则相对于浏览器窗口进行定位。
         2.绝对定位会使元素完全脱离文档流，会改变元素的性质，内联变成块元素，块元素的宽度被内容撑开
         3.绝对定位的元素如果不设置偏移量，元素的位置不会发生变化
         4.会提升元素的层级
         
     - 固定定位
         - 固定定位也是一种绝对定位，它的大部分特点都和绝对定位是相同的。
         - 不同的是：
             - 固定定位永远相对于浏览器窗口进行定位
             - 固定定位会固定在浏览器的指定的位置，不会随页面一起滚动
             
     - 偏移量
         - 当元素开启了定位以后，可以通过四个偏移量来设置元素的位置
             top：相对于定位位置的顶部的偏移量
             bottom：相对于定位位置的底部的偏移量
             left：相对于定位位置的左侧的偏移量
             right：相对于定位位置的右侧的偏移量
             
         - 一般只需要使用两个值即可给元素进行定位
             top left
             top right
             bottom left
             bottom right
             
         - 偏移量也可以指定一个负值，如果是负值则元素会向相反的方向移动
         
     - 层级
         - 当元素开启定位以后，可以通过z-index来设置层级，
             它需要一个正整数作为参数，值越大层级越高，层级越高越优先显示
             如果层级一样，则后边的会盖住前边的，父元素永远都不会盖住子元素。
             
         - 文档流 < 浮动 < 定位 
         
     - 元素的透明
         使用opacity来设置元素的透明度
             - 需要一个0-1之间的值
             - 0 表示完全透明
             - 1 表示完全不透明
             
         IE8及以下的浏览器不支持该样式，需要使用如下方式来设置
             filter:alpha(opacity=透明度);
             - 需要一个0-100之间的值
             - 0 表示完全透明
             - 100 表示完全不透明

表格

• 在网页中可以通过表格来表示一些格式化的数据

  • 表格相关的标签

    • ?

      用来创建一个表格

      ?

    • <tr> 表示表格中的一行

    • <th> 表示表头中的单元格

    • <td> 表示表格中的单元格

      • 属性： colspan 横向的合并单元格 rowspan 纵向的合并单元格

    • 例子：

      ?

      ?

     - 长表格
         - <thead> 表格的头部
         - <tbody> 表格的主体
             - 注意：如果表格中没有写thead tbody tfoot，浏览器会自动向table中添加一个tbody
                 并且将所有的tr都放到tbody中，tr是tbody的子元素，不是table的子元素
         - <tfoot> 表格的底部

表单

• 表单可以将用户的信息提交到服务器中

  • ?

    - 用来创建一个表单 - 属性： action:需要一个服务器地址，提交表单时表单中的内容将会被提交到该地址

    ?

  • 表单项

    • <input />

      • 它可以根据不同的type属性值，生成不同的表单项

      • type="text" 文本框 <input type="text" name="" />

      • type="password" 密码框 <input type="password" name="" />

      • type="radio" 单选按钮 <input type="radio" name="" value="" checked="checked" />

      • type="checkbox" 多选框 <input type="checkbox" name="" value="" checked="checked" />

      • type="submit" 提交按钮 <input type="submit" value="按钮上的文字" />

      • type="reset" 重置按钮 <input type="reset" value="按钮上的文字" />

      • type="button" 普通按钮 <input type="button" value="按钮上的文字" />

     - <select>
         - 下拉列表
         - <select name="">
                 <option value="" selected="selected"></option>
                 <option value=""> </option>
                 <option value=""></option>
             </select>
     
     - <button>
         - 按钮功能input那几个按钮一样，但是它们要灵活一些
             <button type="submit">按钮的文字</button>
             <button type="reset">按钮的文字</button>
             <button type="button">按钮的文字</button>

3.javascript - JavaScript负责页面中的的行为。 - 它是一门运行在浏览器端的脚本语言。 - JS的编写的位置 1.可以编写到标签的指定属性中 我是按钮 超链接

     2.可以编写到script标签中   *****
         <script type="text/javascript">
             //编写js代码
         </script>
         
     3.可以将代码编写到外部的js文件中，然后通过标签将其引入 *****
         <script type="text/javascript" src="文件路径"></script>
         
 - 输出语句
     - alert("要输出的内容");
         - 该语句会在浏览器窗口中弹出一个警告框
         
     - document.write("要输出的内容");
         - 该内容将会被写到body标签中，并在页面中显示
         
     - console.log("要输出的内容");
         - 该内容会被写到开发者工具的控制台中
         
 - 基本的语法
     - 注释
         - 单行注释
             //注释内容
         - 多行注释
             /*
                 注释内容
             */
             
     - JS严格区分大小写 
     - JS中每条语句以分号(;)结尾
     - JS中会自动忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化。
     
 - 字面量和变量
     - 字面量
         - 字面量实际上就是一些固定的值，比如 1 2 3 4 true false null NaN "hello"
             字面量都是不可以改变的。
         - 由于字面量不是很方便使用，所以在JS中很少直接使用字面量
     
     - 变量
         - 变量可以用来保存字面量，并且可以保存任意的字面量
         - 一般都是通过变量来使用字面量，而不直接使用字面量，而且也可以通过变量来对字面量进行一个描述
         - 声明变量
             - 使用var关键字来声明一个变量
             var a;
             var b;
             var c;
             
         - 为变量赋值
             a = 1;
             b = 2;
             c = 3;
             
         - 声明和赋值同时进行 *****
             var d = 456;
             var e = 789;
             
 - 标识符
     - 在JS中所有的可以自主命名的内容，都可以认为是一个标识符，
         是标识符就应该遵守标识符的规范。
     - 比如：变量名、函数名、属性名
     - 规范：
         1.标识符中可以含有字母、数字、_、$
         2.标识符不能以数字开头
         3.标识符不能是JS中的关键字和保留字
         4.标识符一般采用驼峰命名法
             xxxYyyZzz