04.html layout method width and height adaptive

The width and height of the layout method is adaptive.
What is the width and height of the adaptive web
page? The width and height of the elements are often defined in the web page layout. But many times we hope that the size of the element can be automatically adjusted according to the window or sub-elements, which is adaptive.
It can make web page display more flexible, and can adapt to display under different devices, different windows and different resolutions.
Implement
width adaptive
block-level element width is the default auto
highly adaptive
elements {height: auto;} / write highly
minimum width / maximum width
min-width
max width-
minimum height / maximum height
min-height
max-height
occurring Problem
Height collapse The
parent element does not set the height, and the child element is set to float, the parent element will collapse in height. (Essentially the effect of floating)
Solution
Add the declaration overflow: hidden; to the parent element (Disadvantage: it will hide the overflow
element. Add an empty block element below the floating element, and add a declaration to the element: clear: both; height:0;overflow:hidden;
Disadvantages: an empty tag is added to the structure, which is not conducive to code readability and reduces the performance of the browser.
Universal clear method
selector: after{content:".";clear:both ;display:block;height:0;visibility:hidden; }
parent container selector {zoom:1;}/In order to be compatible with IE6, IE7 /
pseudo-type selectors (pseudo-elements)
:after
:before
:first-letter
:first-line
element hiding and showing
attributes: visibility
hidden
visible
inherit
attribute display
none
block
the difference between the two
visibility: hidden; attribute will Make the object invisible, but the space occupied by the object on the web page has not changed, and the display:none property will hide the content and the space will disappear.
Filter Filter
is a way to show or hide rules or declarations for a specific browser or group of browsers.
Common filters
Underline attribute filter
When an underline is added in front of an attribute, the statement is ignored because standard browsers cannot recognize underlined attributes, but it will continue to parse in IE6 and lower browsers This rule.
Syntax: selector {_ attribute: attribute value;}
!important keyword filter
It means that the attached statement has the highest priority. But because IE6 and lower versions cannot recognize it (important), we can use this bug of IE6 as a filter to be compatible with IE6 and other standard browsers.
Syntax: selector {attribute: attribute value!important;}
For example
Compatible elements have a minimum height adaptive method:
hack1:min-height:value; _height:value;
hack2:min-height:value; height:auto!important; height:value; (recommended)
/+Attribute filter
when After an attribute is added in front , the attribute can only be recognized by IE7 and below browsers, and other browsers ignore the effect of this attribute.
Syntax: selector {*attribute: attribute value;}
below ie9
Syntax: selector {attribute: attribute value\9;}
ie8 and above
Syntax: selector {attribute: attribute value\0;}
element height adaptive window height
setting Method
html,body{height:100%;}
Adaptive element height: height:100%;
iframe
nests other pages in the webpage
Syntax: