[the more CSS learns, the more we go back] contains the problem of block height?

  css2.2 document  stipulates: 


 for elements whose  position  is  static  or  relative ,  containing block  is  content box  of the most recent ancestor element  block container box  (except  margin ,  border ,  padding ); 


 can be obtained: the containing block of  div-sharpinner  is the content area of the box generated by  div-sharpouter . Since the height of this content area is  200px  ( div-sharpouter  does not have  margin ,  border ,  padding ), the height of the containing block is also  200px ; 


 according to the CSS authoritative Guide (P275, fourth Edition): 


 vertical formatting also has seven related properties: margin-top, border-top, padding-top, height, padding-bottom,border-bottom, and margin-bottom. 
  The values of these seven properties  must equal  the height of the block box"s containing block. 



 you can get  1px  +  2px  +  3px  +  10px  +  3px  +  2px  +  1px  =  200px ; 


 the conclusion is certainly wrong, but the authoritative guide should not be wrong (the quotation section is the same in both the third and fourth editions of the book), and the document will not be wrong, so there must be something wrong with my own understanding. I hope someone can solve the problem!
Front-end html javascript css
Dec.20,2021

first: popular dot subbox contains the content block of the nearest parent box

the second of these values refers to the inequality that all elements of the content block wrapped in the parent box are not a child element that is not fully filled.

the height of the height of the block box, block box is not the height of the element.
Select the inner element in Chrome, and you can see that the bottom margin is not 1 and extends all the way to the bottom of the outer element. This bottom margin should be the block-level box of the inner element.

come in with a happy face and go out with a confused face

you can get: the containing block of div-sharpinner is the content area of the box generated by div-sharpouter

you can't draw the following conclusion from the above sentence:

since the height of the content area is 200px, the height of the containing block is also 200px

an inclusion block is an inclusion block, and it is not said that it is equal to the content height

the authoritative guide is clearly incorrect (or at least incomplete). Take another counterexample: in the case of, containing block highly fixed and overflow:visible , subblocks can overflow, which is not in line with its statement. Even if the height of containing block is auto , the upper and lower margin can still collapse, which is still not true.

since we refer to the specification, why not read the calculation part by the way, which is much clearer than the book expression.

I think what I'm talking about here is that when
does not set the height of the outer, the height of the outer is calculated from this equation, instead of setting the height first and then forcing the equation to hold.

box-sizing
you need to know about this property
portal

Previous: Which stable point do spring boot2.x or spring boot1.x choose?

Next: How should functional programming be understood?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4388c-439b9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4388c-439b9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?