前端基础特性学习

HTML重点规则

  1. 块级元素独占一行,行级元素按行排列,排不下时换行
  2. HTML块级元素和行内元素的嵌套规则:

(1)除P标签外的块级标签可以嵌套块级元素和行内元素。

(2)P标签不能嵌套块级元素,只能嵌套行内元素。

(3)行内元素只能嵌套行内元素。

  1. 常见的块级元素与行内元素

(1)HTML常见的行内元素有:<span>、<a>、 <img>、 <input>、<textarea>、<select>、<label>还有包括一些文本元素如:
、<b>、 <strong>、、 <i> 、<em> 、<del> 、 <u>等。

(2) HTML常见的块级元素有: <div>、<table>、<form>、<p>、<ul>、<h1>......<h6>、


、<pre>、<address>、<center>、<marquee> 、<blockquote> 等。

  1. 块级元素与行内元素相互转换,通过style
    1.display:inline;//将块级元素转化为行级元素,这时块级元素设置的宽高无效
    2.display:block;//将行级元素转块级元素,这时原本的行级元素会变成块级元素独占一行,同时可以设置宽高
    3.display:inline-block;//将行级元素转块级元素,不会独占一行,可以设置宽高

CSS 重点规则

  1. 盒子模型

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

  1. outline 是不占空间的

  2. 定位关系
    a. static,fixed, relative ,absolute ,sticky(滚动相对)
    b. z-index ,z轴堆叠顺序,注意z-index相互比较只能局限于相同层级的元素间,而子元素永远是在父元素之上的

  3. 脱离文档流需要重点理解
    https://blog.csdn.net/theLostLamb/article/details/79581984

javascript

  1. 您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。

  2. 与C++的不同
    a. var 和function
    b. 字符串可双引号和单引号

  3. this的用法
    在对象的方法中,this 表示该方法所属的对象。
    如果单独使用,this 表示全局对象。
    在函数中,this 表示全局对象。
    在函数中,在严格模式下,this 是未定义的(undefined)。
    在事件中,this 表示接收事件的元素。
    类似 call() 和 apply() 方法可以将 this 引用到任何对象。

react

  1. react的js方法都是type 要加text/babel
  2. 每次在组件中调用 setState 时,React 都会自动更新其子组件。
  3. 需要state的时候才需要构造函数,且构造函数得调用super
  4. const数组是代表所有元素类型得相同
  5. 在for循环内定义了一个var变量,实际上其在for循环以外也是可以访问的,而let由于是块作用域,所以如果在块作用域内(比如说for循环内)定义的变量,在其外面是不可被访问的
  6. ==和===区别,后者是经典的==,前者可以转换类型后再比较
  7. js的函数声明会自动提升到文件的顶部
  8. props只能创建的时候传入可以i理解为static的成员变量,而status是之后随时可以变的,且每次变了都会自动渲染
  9. 事件处理函数,只需要传一次参数即可
    10.当你遇到需要同时获取多个子组件数据,或者两个组件之间需要相互通讯的情况时,需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了
    11.这个变量是否是通过Props从父组件中获取?如果是,那么它不是一个状态。
    这个变量是否在组件的整个生命周期中都保持不变?如果是,那么它不是一个状态。
    这个变量是否可以通过其他状态(State)或者属性(Props)计算得到?如果是,那么它不是一个状态。
    这个变量是否在组件的render方法中使用?如果不是,那么它不是一个状态。这种情况下,这个变量更适合定义为组件的一个普通属性,例如组件中用到的定时器,就应该直接定义为this.timer,而不是this.state.timer。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。