How to realize width and height adaptation by HTML and CSS
Editor to share with you how HTML and CSS achieve width and height self-adaptation, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
Width adaptive
The element width is set to 100%. (the width of the block element defaults to 100%) or does not set the width (width); (width is the width of the parent element)
Highly adaptive
1) Adaptive element height: height:auto; or not set; 2) element height adaptive window height setting method: html,body {height:100%;} Note: if the height of the child element changes with the height of the parent element, then the parent element must have a height.
Minimum height adaptation
Min-height attribute: minimum height; (this attribute is not recognized by IE6 browsers) hack1:min-height:value;_height:value;hack2:min-height:value; height autoheight importantposition height
Floating element parent element is highly adaptive (highly collapsed)
When the child element floats and the parent element does not have a height, the parent element will collapse highly.
The solution of high collapse
Hack1: add a declaration to the parent element overflow:hidden; (trigger a BFC) hack2: add an empty div below the floating element and add a declaration to the element: div {clear:both; height:0; overflow:hidden;} hack3: universal clear floating method
Selector: after {
Content: ""
Clear: both
Display: block
Height: 0
Overflow: hidden
Visibility: hidden;}
Visibility:hidden/ hiding
The difference between visibility:hidden; and display:none;: the visibility:hidden; attribute makes the object invisible, but the amount of space occupied by the object on the page remains unchanged, leaving a blank area, while the display:none attribute makes the object disappear completely and no longer occupy space.
Pseudo-object selector
1),:: after: used with the content attribute to define the content after the object. Syntax: selector:: after {content: "text";} selector:: after {content:url (image path);} such as: div::after {content:url (logo.jpg);} div::after {content: "text content";} 2),:: before: used with the content attribute to define the content in front of the object. Div::before {content: "put content before it";} 3),:: first-letter defines the style of the first character in the object. Description: * (this pseudo element can only be used for block-level elements) 4),:: first-line: defines the style of the first line in the object. * (this pseudo-element can only be used for block-level elements.)
The above is all the content of the article "how HTML and CSS achieve width and height adaptation". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
