Python 15th Day

HTML element Classification block-level element (Block-level elements)

Block-level elements are elements that are displayed as blocks, and height widths can be set. Contains the following types of:

• Structured block-level elements:
  • <ol>
  • <ul>
  • <dl>
  • <table>
• Terminal block-level elements:
  • <p>
  • <dt>
• Multi-target block-level elements:

  Multi-objective refers to the structure of a document that can be expanded or nested freely, in the form of a terminal. When the multi-object block element is used in a structured way, it contains the connotation of structure, and the semantic connotation is used in the form of terminal.
  A multi-object block element can contain either a block element or a content (a combination of text and row-level elements as content), but not both. The content should be placed in a block element. The block element should not be a sibling of the line-level elements and text, and is limited by the HTML validator, but it should be avoided.

  • <div>
  • <li>

Features of block-level elements:

1. Always start with another line
2. Height, row height and top, bottom margin can be controlled
3. The width defaults to 100% of the container in which it is located, unless you set a width

Inline elements (inline element)

Popular point is the way the text is displayed, in contrast to block-level elements, the height of the inline element width is not set, its width is its own text or the width of the picture. The display feature of inline elements is the same as text display, does not occupy a single line, of course, the inline elements can also become block-level elements, which is through the CSS display:inline and float to achieve.

Features of inline elements:

1. And all the other elements on one line.
2. Height, row height, and top and bottom margins are not variable
3. Width is the width of the text or picture it holds, and it cannot be changed.

With CSS, we can get rid of the limitations of the HTML tag collation in the table above, and freely apply the attributes we need on different tags/elements. For example, we can add the Display:inline property to the block element [UL] tag, and let the original vertical list be displayed horizontally, which is widely used when we set up the Blog navigation bar, and we can also add the inline element [cite] to Display:block Nature, so that it also has properties that start from the new line each time.

Block vs Inline vs Inline-block

Below is a bunch of <div style= "width:50px" ...> with different display:

Inline-block is a mixed type,

• Ability to specify width height
• Not every time you start another line

Modal Dialog

The modal window consists of three parts;

1. A <div> containing the content want to appear when the modal area is activated.
2. The CSS rules which keep the layer hidden until needed and then fullscreen.
3. Javascript which hides and shows the <div>.

The overlay <div>

<id= "overlay">     <Div>          < P > Content want the user to see goes here. </ P >     </ Div > </ Div >

The CSS

1. The CSS rule to take care of the fullscreen/hiding for #overlay.

#overlay {     Visibility:hidden;     Position:absolute;     left:0px;     top:0px;     width:100%;     height:100%;     Text-align:center;     z-index:1000;}

2. THe inner <div>

#overlay Div {     width:300px;     margin:100px Auto;     Background-color: #fff;     border:1px solid #000;     padding:15px;     Text-align:center;}

The Javascript

function Overlay () {    el = document.getElementById ("overlay");    El.style.visibility = (El.style.visibility = = "visible")? "Hidden": "Visible";}

The JavaScript grabs our overlay element and then toggles its visibility property. If it ' s hidden, it makes it visible and vice versa. You could create a function to explicitly show or hide the layer, but I prefer this automatic toggle method since it Requi Res less code.

With the-function in place, we-then-call it whenever we want-show the overlay and then again to hide it. So, somewhere on our page we could add:

<hrefonclick= ' overlay () '>Click here to show the Overlay</a>

When the user clicks on the link our JavaScript would show the overlay.

Within the overlay ' s HTML, we need to add a link to hide it. The code is exactly the same:

Click here to [<hrefonclick= ' overlay () '> Close</a>]

Python 15th Day