Div+css Height Knowledge Tutorial
DIV CSS high profile
The css height here refers to the height of the set object controlled by CSS. Use CSS property to Word height. Units can be used with px,em and other commonly used px (pixels) as HTML units.
-
Height Level table of Contents
-
- Height altitude syntax
- High usage
- HTML Original Height setting
- CSS Heights height case
- CSS Height High Summary
Height grammar-TOP
1. High Basic grammar
Height:auto Setting height automatically
(Usually the default height is auto, which increases from the applicable content, usually if you want to be highly adaptive without setting)
height:20px Setting the height to a fixed value
2. CSS Height usage structure
#divcss5 {height:50px}
Set the Divcss5 object box height to 50px (pixels)
3. Height High grammar structure analysis diagram
CSS Height Heights Syntax Structure Analysis diagram
Extended reading: CSS Row high line-height
Description: "#divcss5" is named for CSS, which represents the object CSS style in curly braces.
Two, the height style usage-TOP
height:50px Set object height to 50px
Height:50em Set object height to 50 relative length em
Usually there is no effect on a div height as a percentage alone
Extended reading: HTML EM tags
CSS self-adapting height
Generally we need to increase the height of the width as the content increases. At this point we do not need to set the height to achieve this effect. There is also no need to use Height:auto to achieve a high degree of self-adaptation . Usually, by default, the height value is auto, and the object height is the adaptive height.
Commonly used px (pixels) as units
The original height element of the HTML tag is set in-TOP
1), set table height: <td height= > Content </td>
2), set img Image height height:
The above height of the value of no units, do not need to add units, add units instead of error, the default is px pixels in length units.
HTML Raw Height property and Div+css Height Control
Previously HTML directly set the height of width= "300" in this way embedded in the table label, and without units, the default in px (pixels) units.
Table TR TD table height style Set instance HTML code:
- <table>
- <tr>
- <TD Height="+"> My height is 100px</td>
- </tr>
- <tr>
- <TD Height=""> I height 50px</td>
- </tr>
- </table>
Two rows of tables with a height of 100px and 50px are respectively set
Set height height in HTML tags case
Four, CSS height application case-TOP
We set a box named DIVCSS5, set a height of 200px box, in order to visually watch the height setting effect, we then add 1 pixels red border to this box, if not set width, will full screen 100% width, so we set a CSS width widths of 80px properties.
1, the height of the case CSS code:
#divcss5 {height:200px;border:1px solid #F00; width:80px}
/* CSS Comment Description: Set the red CSS border, height 200px, Width 80px */
2, the height case HTML source code fragment:
<div id= "DIVCSS5" > I height for 200px</div>
3. Case
CSS div Height Application usage case
Online Demo: View case
Five, CSS height high-summary-TOP
You typically use CSS heights to set height-length units on objects. In general, we need to set the height of the box object, only need to add a height to the CSS class value added. Height cannot set a percentage height such as "height:50%" and the height of the set percentage is invalid. This tutorial explains the difference between CSS height and HTML height, and I hope you can master the setting and usage of the height style property.
Div+css Height Knowledge Tutorial