Div+css Height Knowledge Tutorial

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

1. Height altitude syntax
2. High usage
3. HTML Original Height setting
4. CSS Heights height case
5. 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:

2. <table>
4. <tr>
6. <TD Height="+"> My height is 100px</td>
8. </tr>
10. <tr>
12. <TD Height=""> I height 50px</td>
14. </tr>
16. </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