16th chapter CSS Box model [bottom]

Learning Essentials:

1. Element visibility

2. Element box type

3. Floating of elements

Keynote Teacher: Li Tinghui

This chapter focuses on the CSS box model in HTML5, learning how to understand the appearance configuration of elements and the overall layout of the document.

A Element visibility

You can use the Visibility property to achieve the visibility of an element, which can generally be combined with JavaScript to achieve the effect. The style sheet is as follows:

Property	Value	Description	CSS version
	Visible	Default value, the element is visible on the page.	2
Visibility	Hidden	Elements are not visible, but occupy space.	2
	Collapse	The elements are not visible, hiding the rows and columns of the table, if not the table, as with hidden.	2

Set element hidden, but placeholder

{    visibility: hidden;}

Hide rows or columns of a table, but not placeholder, Chrome and Opera do not support

{    visibility: collapse;}

Two Element box type

The display property in the CSS box model allows you to change the box type of the element itself. So what are the box types of the elements? Mainly: 1. Block-level elements (chunks), 2 inline elements (inline), 3 inline-block-level elements (inline blocks), 4. Hide elements.

1. block-level elements

The so-called block-level element is the element that can set the element size and isolate the functionality of other elements. such as:<div>, <p> and other document elements.

2. Inline elements

The so-called inline element, unable to set the element size, can only adapt to the content, cannot isolate other elements, and the other elements will follow immediately thereafter. such as:<span>, <b> and other text elements.

3. inline - block element

The so-called inline-block element, you can set the element size, but cannot isolate elements of other elements. such as .

Property	Value	Description	CSS version
	Block	The box is a block-level element	1
Display	Inline	box as inline element	1
	Inline-block	box for inline-block element	2
	None	box not visible, no placeholder	1

To turn inline elements into block-level elements

{    background: silver;     width: 200px;     height: 200px;     Display: block;}

Convert block-level elements to inline elements

{    background: silver;     width: 200px;     height: 200px;     display: inline;}

Convert block-level elements into inline-block elements

{    background: silver;     width: 200px;     height: 200px;     display: inline-block;}

Hide elements and do not occupy a bit

{    display: none;}

The display property also has a lot of values, some of which are explained later, and some support is not good or not yet supported, thus omitting. If you are interested, you can refer to the CSS3 manual.

Three Floating of elements

CSS box model has a kind of called floating box, that is, through the float property to create the box floating direction, the style sheet is as follows:

Property	Value	Description	CSS version
	Left	Floating elements on the left	1
Float	Right	Floating elements on the right	1
	None	Disable floating	1

Achieve cascading effects

{    background: Gray;     float: left;}  {    background: maroon;     Float: left;}  {    background: Navy;     Float: left;}

Implement element right float

{    background: Navy;     float: right;}

To cancel the float of an element

{    background: Navy;     float: none;}

There is a problem with the float just now: When an element box is floated, the following elements are automatically stacked, causing the element to be invisible or partially invisible. We can use the clear property to handle it.

clear

properties	value	description	CSS version
None	Allow floating on both sides	1

	Left	The left side of the border must not float	1
	Right	Right border must not float	1
	Both	No floating on either side	1

Non-floating on both sides

{    background: Navy;     Clear: both;}

16th chapter CSS Box model [bottom]