Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.