QQ登录

只需要一步,快速开始

 注册地址  找回密码
查看: 2188|回复: 0
打印 上一主题 下一主题

HTML 知识点(未完)

[复制链接]
字体大小: 正常 放大
杨利霞        

5273

主题

82

听众

17万

积分

  • TA的每日心情
    开心
    2021-8-11 17:59
  • 签到天数: 17 天

    [LV.4]偶尔看看III

    网络挑战赛参赛者

    网络挑战赛参赛者

    自我介绍
    本人女,毕业于内蒙古科技大学,担任文职专业,毕业专业英语。

    群组2018美赛大象算法课程

    群组2018美赛护航培训课程

    群组2019年 数学中国站长建

    群组2019年数据分析师课程

    群组2018年大象老师国赛优

    跳转到指定楼层
    1#
    发表于 2020-5-5 14:53 |只看该作者 |倒序浏览
    |招呼Ta 关注Ta
    HTML 知识点(未完)  Z% s8 [; M. }& l! B0 t

    2 V; A" x( c! N" |0 BHTML 知识点
    * o4 H( B' R9 D$ A4 Q! F& E, r2 v2 o. v( s
    三列布局- (高度已知,左右宽度固定,中间自适应)
    : x  P: X& j7 u0 A  k6 i0 Y& T8 j1 S% \) ?1 y, j3 `4 y
    布局方案        优点        缺点
      G) B& R6 Y# S0 ]3 l: W5 R# f浮动        兼容性好        脱离文档流,需清除浮动7 ?, P) L$ M6 K6 z: r3 ?
    绝对定位        比较快捷。        因为其本身脱离了文档流,导致了其子元素都脱离了文档流,使用性较差。) G& o* _; y" b; B5 J# G
    flex布局        目前是比较完美的方案。        只兼容到ie9。
    & T$ p. @7 l" I表格布局        兼容性好,当需要兼容ie8时可以用表格布局。        多栏布局时,某栏高度增加,会使其他栏高度一起增加。3 w/ r/ N% @8 g2 u( a* A
    网格布局        新技术,代码量少       
    9 [( G$ u0 w' J<!-- 网格布局 -->
    ; Z  Q! }0 D# P( A  E3 E. l<body>
    - {' v1 M. l% h! j  g% j    <section class="layout grid"> 6 E$ J0 r: P  o  j; E% \, f
            <style media="screen">
    + m' I: w/ J) k4 p2 K* I% }            .layout.grid .left-right-center{
    3 C/ O3 i+ b# L  S: q, j( V; P                display: grid;
    4 x! b- k6 l1 x# S                width: 100%;% l1 y# C9 v; e
                    grid-template-rows: 100px; // 设置行高% v6 _1 n- r5 C( L0 M7 J9 d8 e
                    grid-template-columns: 300px auto 300px; // 设置每列的宽度
    6 E% ^3 O3 A$ b9 Q
    , W8 B4 `8 \$ |5 L1 t) i% ?1 Q6 |        </style>
    9 W: \& u3 ^  @8 }            <article class="left-right-center">
    ) |/ U$ [# U: W3 C7 D. `            <div class="left"></div>, S8 v. r3 s6 h- m" Y" @$ D
                <div class="center"></div>2 n7 j5 w" ?6 X( Q" a
                <div class="right"></div>
    - Z$ E. ], i# P- ~# N        </article>
    ' ]0 W- p2 G, Q7 _    </section>
    ; F' o; T# {3 g4 J</body>5 _& H4 L& `# o) E) Z
    # L- r) h! k4 l0 E
    css盒模型
    8 T, G' j& `! A) E' v/ |7 |3 @; K( n
    CSS盒模型的认识
    . ?& G* r' k" \
    6 G- J1 H" K, D5 D  z: O7 ]css属性: content padding border margin
    ' D, A) a- r5 e. n) _) {5 U8 {, J# V8 c- _$ D& a  G5 E. q9 T/ K7 s
    两种模型:IE盒模型(怪异盒模型)和 标准盒模型! z% Q2 S' ^2 |6 q) g; |0 b( G+ d
    0 D, _( F8 V* |9 y
    两种模型的区别:计算高度和宽度的不同" k* D( \8 ^; V" @( E
    8 K' v0 J: ~% M' w/ n1 c
    两种模型如何设置:box-sizing: content-box(标准盒模型); box-sizing: border-box(IE盒模型)
    + g' B8 z2 `: m4 r  F; |
    ; h/ D# \7 k2 e) _0 o" EJS如何设置获取盒模型对应的宽和高: q# U* s0 o- ]! `7 O/ T
    8 v! q, t8 U7 S& v* m
    获取方式        优缺点
    . u2 B+ N% f: ?8 }1 A9 vdom.style.width/height        只能获取内联样式设置的宽和高
    . a6 q2 S: E9 Qdom.current style.width        获取浏览器渲染后的宽和高,只支持ie
    9 D% m% E# y1 [' Rwindow.getcomputedstyle(dom).width        兼容性更好, M" p' g: h- J6 T+ E
    dom.getboundingclentreact().width        适用于取元素的绝对位置。能取到 left top width height 四个属性 。// 获取浏览器渲染后的宽和高一般用于获取元素绝对位置
    3 u3 p' \& s5 \' G实例题 (根据盒模型解释边距重叠)子元素边距成了父元素边距
    , W, j! H7 M! R/ W1 ?" I+ p' u' c/ a7 P) [8 e
    块级元素包含了子块级元素,子元素是100像素
    & c9 U) M$ a$ l! \: e' [' ^: y子元素与父元素上边距是10像素
    * I, f$ k/ K# |2 `( V5 V0 I父元素是110px还是100px (100px, 设置了overflow:hidden就成了110px)& _( a/ o( t5 C, ]
    另一种兄弟块级元素-) y) C+ }! @" h+ N: o
    0 S* k) ^$ W7 ~6 j: p0 j/ u
    挨着每个都有上边距或每个都有下边距。-( }5 r* G7 l4 N0 I* @
    该重叠的原则就是取最大值5 z7 o" F& W2 S+ M: X4 ?
    空元素的边距-取margin-top和margin-bottom的最大值
    : M: b0 Q- O% I3 s3 `解决方案:; S! @# |: t; }  P9 I  a
    0 \+ E0 ]' {* b4 w( G
    父元素创建成一个BFC (无论父子,兄弟情况)' q# g8 J% W$ }9 i; L  Z0 _
    7 I* }  ^) ?3 E- z0 J. m
    4. BFC (边距重叠解决方案)
    . Y, t9 v; J' j( s$ B* g4 F; g! T/ j
    BFC(边距重叠解决方案)
    ; O7 E& H' e8 Z' q" N) ~: ~( w9 A8 Q3 C! z! q
    1、BFC的基本概念: 块级格式化上下文;2 C; l% Y+ v# d$ |$ F, B
    1 v( h" a* G. a* S) B1 ]6 L
    2、BFC的原理:BFC的渲染规则。  v2 W7 F9 r: Z
    6 O# n  u7 q8 G1 P! {
    ①:在BFC这个元素的垂直方向的边距会发生重叠。(同一个BFC下外边距会发生重叠)
    ( _+ B- {, G) T) ?- e% Z2 y; m/ a# p; n" O; e1 o
    ②:BFC的区域不会与浮动元素的box重叠。(清除浮动)% c5 k2 R0 Z' I9 H  c6 m: w
    8 }6 v/ X* Q+ I) D
    ③:BFC在页面上是一个独立的容器,外面的元素不会影响里面的元素,里面的元素也不会影响外面的元素。. W# j8 I( h, `7 F) L
    ! B! u" L$ j$ x9 Z4 V
    ④:计算BFC高度时,浮动元素也会参与计算7 [$ {% t9 x$ u5 @2 j
      h$ c: ], V1 H4 V( o
    3、如何创建BFC
    9 G" n1 H2 F3 B* Q  q/ v& m* _" G/ k& d. W! X! H3 B4 D4 O
    ①:float不为none。
    8 H0 b- \: w9 `$ Y% _% b9 y" N3 Z2 [8 R- v4 M! v# I* P
    ②:position不为static或者relative。( o; y8 u8 Z+ O1 t. z5 w
    * Z1 T5 S8 g2 Y8 H" w/ ?3 l' X( D
    ③:display为inline-block或者是table相关的。" E& ]% t+ d' J5 }# n# \9 c: [
    3 V# j! x) X; |' ]  J8 f
    ④:overflow不为visible。
    5 w# e4 [- N! E8 I  r, U7 k5 ?% Y' L5 G) m; T4 W
    ⑤ : body 根元素
      k7 e( T. E% y  i1 }& Q5 ~" y
    ; r3 I/ `! {0 o应用场景: : Q7 Q, g. m7 c9 |
    左右布局时,float 2 Q* a9 p5 H0 p5 |
    相邻div使用margin产生边距重叠& k3 ^, U6 T1 C* x% X
    dom事件6 J5 B0 S1 P5 |9 h
    7 H) |; o, T7 M1 Z: X7 ~% V
    基本概念: DOM事件的级别# V6 N0 D8 A( K
    2 d* g" P6 D/ E; _( b8 j' m3 z
    DOM0: element.οnclick=function()& S1 L/ l4 a0 {2 w1 }! h

    # Q. y- }4 |, D" n% ]- e  v' _. `2 qDOM2: element.addEventListener(‘click’, function(){}, false)
    # G" _1 _* M: M8 A. m' E( N5 J" e4 y9 @: f7 q) l( [$ n& s
    DOM3: element.addEventListener(‘keyup’, function(){}, false)
    5 U7 ^' x* |' j6 I# g! z4 S9 g& K6 v2 c' E2 A% |
    DOM事件模型" x/ ]9 T9 w% w% z1 f8 O
    ' K* E4 G  d' a$ i1 G2 R. ~
    event.target 2. event.currentTarget
    4 \6 s/ j* \6 g: i7 ]; kevent.target指向引起触发事件的元素,而event.currentTarget则是事件绑定的元素  u7 {, d* p) f. F+ Y, O
    DOM事件流3 b1 U5 g$ @' m$ v/ Y' y
    ( u7 V1 ~/ d" ?2 B
    事件流 -->《捕获》 2. 目标阶段 3. 冒泡
    1 P2 {+ R  b9 I* P描述DOM事件捕获的具体流程7 H0 R2 v6 b! x6 d5 m7 y* r

    9 b; m8 {' p2 ?0 q4 ?% E; awindow 2. document 3. html 4. body 5. 按html结构 6. 目标元素
    6 o, {  G; A4 E9 k, z  e' E5 N4 ZEvent对象的常见应用
    , E, p/ @$ [& Y; Q
    5 [+ Z3 p6 i3 U+ h4 }- w: ze.preventDefault() 2. e.stopPropagation() 3. e.stopImmediatePropagation() 4. e.currentTarget() 5. e.target()
    7 ]9 m1 }( ^2 u8 W% o自定义事件
      O& i8 W/ `9 s% i+ N( t) w, b* N1 B4 w3 v* L; m' {
    var eve = new Event('custome');# W: W9 q! q* {3 i9 }
    ev.addEventListener('custome', function() {
    $ C) ]9 j4 y$ Y, ~+ E: ?    console.log('custome');( U4 C; w: @& y5 H# m" ~
    });
    $ m8 ]& I7 z5 c! S' Cev.dispatchEvent(eve);
    4 A; t6 c2 A: T; p$ _; d1
    9 k. t' i" ?6 F2
    # Q2 u$ b' K' z+ O4 y3$ d( c7 g3 [" x  D7 F
    4$ g8 W& B- }# a3 M0 R
    5
    5 E( R( w: f% T' }& m" Mhttp协议
    ( S1 Z7 X- G: W7 x0 h: o
    & C+ \4 @& Y  V+ _HTTP协议的主要特点
    ' N' Z9 z; a( Z+ B9 X) @! {
    3 S$ Y7 w/ B. Y/ w; A6 o: x+ ?' ?% d$ W简单快速(资源的URI是固定的,输入URI)、灵活(头部分有不同数据类型,一个http协议不同传输)、
    . \4 v$ u! Y7 {$ ]& g  E/ h9 Z0 z/ z7 b) d2 D
    无连接(连接一次就断掉), ]( x! z: p& S: |6 n, d
    无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。1 g' e0 B  t$ `( p* Y2 d
    无状态(两次连接身份)" F6 g/ f6 w$ _1 E9 _( ?
    是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传9 M( L  `: P" y
    HTTP报文的组成部分
    4 N% _: t& q5 |0 l& w8 |7 u2 |6 w1 ]% z# v; f
    请求报文
    8 o) Z, ~7 S6 v8 z; c% |: a0 i. t% ~2 I- |' w9 h$ Z
    请求行 请求头 空行 请求体! a, R$ `. N2 Y3 B) I9 T" y

      ~; s; d- b; b6 Y  x  K( X& A响应报文7 k. X8 |; d$ o1 c1 O

    0 F9 q' t1 n6 ^" ?* {状态行 响应头 空行 响应体
    ; |2 u/ N) ?, `
    + z& a% A# d$ f" IHTTP方法5 ~# ~! p: M/ S2 q- Q& d
    * j9 Q- {; i# Q5 \
    方法名        方法作用        注意  W1 B/ i: ^# i3 F, d) J& Q, A
    GET        获取资源        * J. L& X5 v% Q) x& r" F: ?
    POST        传输资源       
    ' o* a4 m) r" @+ @6 \PUT        更新资源       
    ( c" ?% ]2 B  C' qDELETE        删除资源        & d0 Z, c/ m% M6 C$ w
    HEAD        获得报文首部        ; F+ A4 k) ^2 v3 O
    POST和GET的区别
    4 [  d8 Y+ q' J5 b  \% K- r
    , b  N4 u; M% Oget        post! n' Z& P. M; J% y$ i- W8 B3 Z( a2 @
    在浏览器回退时是无害的        会再次提交请求6 F0 b5 P& A+ O" S' r
    产生的URL地址可以被收藏        post不可以
    9 |' t' k9 ]8 d. {/ U6 C+ p+ h请求会被浏览器主动缓存        不会,除非手动设置4 N& \# ^) B) ?) e# W, J
    只能进行url编码        支持多种编码方式
    . V: B( x* b6 b9 g& e/ L6 p# o7 ^请求参数会被完整保留在浏览器历史记录里        参数不会被保留
    ! y' \; q1 S& G/ s' G请求在URL中传送的参数是有长度限制的        没有限制
    - H2 z! M" W& j* N; [对参数的数据类型,get只接受ASCII字符        没有限制
    ) q( e" p  W( B6 j更不安全,因为参数直接暴露在URL上,所以不能咏柳传递敏感信息        没暴露# L# l' P. O, o/ v. V# s
    参数通过URL传递        放在Request body中: B; t- n3 b5 }# U# ?9 M
    HTTP状态码
    - [: A) F4 v  ^$ D$ O
    4 ^+ T1 \* r: @& K4 C' @状态码        意义
    ' v4 }3 u- W/ `" Q$ ^1xx        指示信息 - 表示请求已接收,继续处理。3 r2 [3 @0 b- x1 b
    2xx        成功 - 表示请求已被成功接收。
    2 x$ C! e, d: |1 D) V3 j; n1 ?; |3xx        重定向 - 要完成请求必须进行更进一步的操作。
    / |( F+ A, u" T: v* b# m( a; f4xx        客户端错误 - 请求有语法错误或请求无法实现。
    & [6 F$ Q* [: C7 d# \5xx        服务器错误 - 服务器未能实现合法的请求。& V$ n5 a  u% }# s
    状态码        意义
    0 @/ {; g6 T% v  ]. i200 OK        客户端请求成功
    4 H# b$ Q- @, l% G: Q206 Parital Content        客户发送了一个带有Range头的GET请求,服务器完成了它+ }9 E8 E8 X& r$ ?. v! d' |1 z% s
    301 Moved Permanently        所请求的页面已经转移至新的url/ t2 V1 L) }- Q- d6 \1 h8 A! ^9 K
    302 Found        所请求的也么已经临时转移至新的url4 S1 B7 s: t7 R: ^5 O8 A
    304 Not Modified        客户端有缓冲的文档并发出了一个条件性的请求, 服务器告诉客户,原来缓冲的文档还可以继续使用+ c, h2 y- g+ T5 Z& q
    400 Bad Request        客户端请求有语法错误,不能被服务器所理解
    1 ]3 H. ], w/ M+ Z2 N: F401 Unanthorized        请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用
    9 t% X$ o( c" X3 x  {403 Forbidden        对被请求页面的访问被禁止6 N. l5 t; i* S+ ~
    404 Not Found        请求资源不存在8 P- s6 ~! p3 ~6 O7 K# p
    500 Internal Server Error        服务器发生不可预期的错误原来缓冲的文档还可以继续使用
    # K0 R0 ^7 }  @1 d/ Z1 `$ p+ B503 Server Unavaliable        请求未完成, 服务器临时过载或当机,一段时间后可能恢复正常
    2 t2 L  E* L8 |* ]4 B9 m3 a什么是持久连接
    7 k% \0 @5 q% \' T$ O
    / z7 h9 H! \( I- Q" YHTTP协议采用“请求-应答”模式,当使用普通模式,即非Keep-Alive模式时, 每个请求/应答客户和服务器都要新建一个连接,完成之后立即断开连接(HTTP协议为无连接的协议)0 Z; W9 x+ R  J
    0 b' Z5 a  S6 ^! g9 b" j
    当使用Keep-Alive模式(又称持久连接、连接重用)时, Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接。
    ( _) E) r. ~) u! C! j# U4 ~, R3 s
    : c3 A' S+ V; A  v0 P" s- m使用了持久连接: D" j! p- j3 U; L* E0 \8 e

    ' ~$ h# n, Q' i$ j+ V请求1->响应1->请求2->响应2->请求3->响应3
    ) X/ Y3 c% c/ z% e
    5 q3 z% `1 d. O0 z  ~. s' [变成了
    7 f" R9 C3 {3 f% c+ z! c
    , b) _' J3 n' g: K) y2 o  l) D; ^请求1->请求2->请求3->响应1->响应2->响应3
    ( O5 Q1 B; ?* ?9 o7 a! t( J3 x2 P) x! a# T3 O( W
    什么是管线化
    * R+ U% @6 K- C6 ?' }# k' T" o5 S/ e: Z
    管线化通过持久连接完成,仅http/1.1 支持此技术
    + L1 ^3 r- o7 r. s  [: v1 G# y只有get和head请求可以进行管线化,而post则有所限制
    1 M- `3 h# V5 }& U7 n5 |2 l. j4 ?( T& w初次创建连接不应启动管线机制,因为对方(服务器)不一定支持HTTP/1.1版本的协议' E: @/ o8 c; k2 {
    + l* `8 \6 J* a* c
    安全
    : e* H# h' f; d4 o8 K# k( U
    + F) K3 r: [6 j' n* L8 RCSRF
    * w% e# B9 G- l1 m6 l基本概念和缩写
    3 z5 K% G- I8 {) J5 t; U9 FCSRF, 通常称为跨站请求伪造,英文名Cross-site request forgery 缩写CSRF。# _; y% `: G6 B4 @
    攻击原理
    ' s' C- b, f% I/ V访问网站B时,网站B引诱点击链接,用户浏览器携带的cookie就被网站B的某些代码访问了。
    ( Z: T" a, ^# r- U- g/ D这利用了web中用户身份验证的一个漏洞:简单的身份验证只能保证请求发自某个用户的浏览器,却不能保证请求本身是用户自愿发出的。0 z+ j, _" A8 m4 u. |0 i
    XSS1 c" y: C4 A, v3 [7 j9 l8 i3 W, C
    基本概念和缩写( e( c/ H$ Z1 k) C" ?- M
    XSS, 跨站脚本攻击, 英文名Cross Site Scripting 缩写XSS。
    ! h* I, q4 j' S" W3 I攻击原理
    $ P5 `, u: M7 @! b% S& @4 R# [输出脚本code
    4 g$ c# c; R& C, ^跨站脚本攻击是指恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。6 x" ^: P5 n; t/ D7 w8 p. P
    xss漏洞通常是通过php的输出函数将javascript代码输出到html页面中,通过用户本地浏览器执行的,所以xss漏洞关键就是寻找参数未过滤的输出函数。4 N5 y1 h1 d  d* h# Q1 r- y# r6 r/ J+ `/ K
    渲染机制类
    ! v% [" h1 A" Y+ I  h
    ; v2 W& e( Q/ H. V7 Y- R- S# d8 ?什么是DOCTYPE及作用3 a% o" A+ b& m! l0 N
    & `, u( @" @5 A6 I
    DTD (document type definition, 文档类型定义)是一系列的语法规则,用来定义XML或HTML的文件类型。2 @4 k* ?  O& P
    作用:浏览器会使用它来判断文档类型, 决定使用何种协议来解析,以及切换浏览器模式。# x( G! L; a2 M/ ~# |
    DOCTYPE是用来声明文档类型和DTD规范的,
    ' s: s. _8 M9 P2 P9 t5 _* }+ r作用:一个主要的用途便是文件的合法性验证。如果文件代码不合法, 那么浏览器解析时便会出一些差错。: m, s7 T. ~" d3 g% E1 J8 f. f" i* Z
    HTML5的DOCTYPE:
    - `! l, y8 f8 x2 O0 n( v
    ( m* v9 Q3 i, Q1 r# I, T+ wHTML4有严格模式和传统模式. k+ B& J4 L  p$ F9 U
    6 _) ?  u+ O  T  Z* v* v8 n
    浏览器渲染过程- g) i5 ^5 w4 h* X
    0 ^7 v; L# z' H  n) I5 _! l- L
    一些概念! A8 n: i1 H0 v' m6 p; y' _* i

    , H* q- R4 ]* j7 D* @( |名称        概念
    4 o/ D, o# l, J8 p& SDOM Tree        浏览器将HTML解析成树形的数据结构。7 b$ g# B% c0 p/ B- e* G4 _7 d
    CSS Rule Tree        浏览器将CSS解析成树形的数据结构。0 `7 L8 [$ x, m( Z
    Render Tree        DOM和CSSOM合并后生成Render Tree。
    % a; Q' a" a/ J8 g1 @' @layout        有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置。
    1 M! R( U" M: _& X& t, Vpainting        按照算出来的规则,通过显卡,把内容画到屏幕上。4 o6 e3 o- f& L. o. q9 Q/ ^
    1。当用户输入一个URL,浏览器就会发送一个请求,请求URL对应的资源4 s5 N5 M4 e4 B* s, c
    2。HTML解析器会将这个文件解析,构建成一棵DOM树
    . Q, m3 Z8 C* Z# l+ `/ y3。构建DOM树时,遇到JS和CSS元素,HTML解析器就将控制权转让给JS或者CSS解析器
    , G* v4 C4 o& w4 d4 p8 A4。JS或者CSS解析器解析完这个元素时候,HTML又继续解析下个元素,直到整棵DOM树构建完成7 ^5 \, K7 \8 U+ `
    5。DOM树构建完之后,浏览器把DOM树中的一些不可视元素去掉,然后与CSSOM合成一棵render树" l) |/ V! j6 {& D" V: d) y
    6。接着浏览器根据这棵render树,计算出各个节点(元素)在屏幕的位置。这个过程叫做layout,输出的是一棵layout树/ p8 y! ?5 b" n( K& Z- f3 q
    7。最后浏览器根据这棵layout树,将页面渲染到屏幕上去
    . U% T8 ]  r  Y2 w) z- V1
      y8 E+ p! v% |- g2! l9 E& n) u; m
    3
    $ B+ _( ^; }! Q: M* o6 F49 g8 ]5 |; @1 a1 X) K
    5* h# ]! B% [, q2 S- k0 A- _3 U
    6
    # t; ]" c; E0 H' Z& }7; B4 ]2 l* s; ]5 U5 z3 Y6 x
    重排Reflow
    % X! w5 ^  M. O: V1 U1 r, K9 Z( M
    定义:当浏览器发现某个部分发生了变化影响了布局,需要倒回去重新渲染,内行称这个回退的过程叫 reflow。
    * E' |$ o. V3 \  }3 x触发Reflow:
    # ^5 i  S6 F- ?. j  ?$ `当你增加、删除、修改dom节点时,会导致Reflow或Repaint; ~# o" B- O- o
    当你移动DOM的位置,或是搞个动画的时候% J$ d8 z3 J$ D4 k$ b! y' ?
    当你修改CSS样式的时候& t9 A3 |$ ]' l, k7 v  h# ^
    当你Resize窗口的时候(移动端没有这个问题),或是滚动的时候
    0 L& G0 s5 f: z0 Y8 U% }9 W+ |当你修改网页的默认字体时
    * |, s/ C* L; u/ w- t; T* o1 l# v重绘Repaint
    " W$ q; l( W5 C+ Z
    9 F9 i/ S' w! ~3 I: D定义: 改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。* L9 x0 Q2 G4 `) K# ~

      E( ~7 P; P; i触发Repaint:
    ) `$ ~& ^4 }6 F
    - W3 x9 E9 v4 D; Q5 X; }4 g8 YDOM改动7 m# ^1 \9 N3 I# s+ {
    CSS改动; {5 L& Q3 @) a/ m& k
    ————————————————
    # F: ~0 E+ O% u+ c5 }$ M版权声明:本文为CSDN博主「ton365」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。* i" @6 K# @- B  w9 ^
    原文链接:https://blog.csdn.net/u012015672/article/details/1059312911 s! I$ I3 N% s7 C; G& J$ V: d/ ^

    0 B( y8 b" ?/ R
    6 T* V2 N8 V, Y- {
    zan
    转播转播0 分享淘帖0 分享分享0 收藏收藏0 支持支持0 反对反对0 微信微信
    您需要登录后才可以回帖 登录 | 注册地址

    qq
    收缩
    • 电话咨询

    • 04714969085
    fastpost

    关于我们| 联系我们| 诚征英才| 对外合作| 产品服务| QQ

    手机版|Archiver| |繁體中文 手机客户端  

    蒙公网安备 15010502000194号

    Powered by Discuz! X2.5   © 2001-2013 数学建模网-数学中国 ( 蒙ICP备14002410号-3 蒙BBS备-0002号 )     论坛法律顾问:王兆丰

    GMT+8, 2026-4-16 06:07 , Processed in 0.456767 second(s), 51 queries .

    回顶部