Web front-end Development Basics Lesson Four (CSS element classification)

Element classification

Before we explain the CSS layout, we need to know something beforehand, in CSS, the tag elements in HTML are broadly divided into three different types: block elements , inline elements (also called inline elements) , and inline block elements .

The most common block elements are:

<div>, <p>,

The commonly used inline elements are:

<a>, <span>, <br>, <i>, <em>, <strong>, <label>, <q>, <var>, < Cite>, <code>

used in Inline block Elements are:

, <input>

Element Classification--block-level elements

What is a block-level element? In HTML <div>, <p>, display:blockthe setting is to display the element as a block-level element. The following code is the conversion of inline element a into a block element , so that the a element has a block element feature.

A{display:block;}

Block-level element features:

1. Each block-level element starts with a new line, and the subsequent element also begins a row. (True overbearing, one block-level element exclusive row)

2, the height of the element, width, row height, and the top and bottom margin can be set.

3, the element width is not set, is its own parent container of 100% (and the width of the parent element consistent), unless a width is set.

Element Classification--block-level elements

What is a block-level element? In HTML <div>, <p>, display:blockthe setting is to display the element as a block-level element. The following code is the conversion of inline element a into a block element , so that the a element has a block element feature.

A{display:block;}

Block-level element features:

1. Each block-level element starts with a new line, and the subsequent element also begins a row. (True overbearing, one block-level element exclusive row)

2, the height of the element, width, row height, and the top and bottom margin can be set.

3, the element width is not set, is its own parent container of 100% (and the width of the parent element consistent), unless a width is set.

Element classification--inline elements

In HTML,,<span>, <a>, <label>, <input>, <strong>, and <em> are typical inline elements (inline elements ) (inline) element. Of course, block elements can also display:inline be coded to set elements as inline elements . The code below is to convert the block element div into an inline element , so that the DIV element has an inline element feature.

div{     Display:inline;} ......<div> I want to become an inline element </div>

Inline element Features:

1, and other elements are on one line;

2, the height of the element, the width and the top and bottom margin is not set;

3. The width of the element is the width of the text or Picture it contains, and it cannot be changed.

Small friends you look at the right side of the code snippet, there is no problem, there is a gap between the inline elements, the problem is described in this section of the wiki, interested in the small partners can go to see.

Element classification-inline block elements

Inline block elements (inline-block) are features that have inline elements, block elements, and code that display:inline-block sets elements as inline block elements. (css2.1 New),, <input> tag is this inline block tag.

Inline-block Elemental Features:

1, and other elements are on one line;

2, the height of the element, width, row height, and the top and bottom margin can be set.

Tip: The next section is to use video animations to explain the box model in CSS.

Element classification-inline block elements

Inline block elements (inline-block) are features that have inline elements, block elements, and code that display:inline-block sets elements as inline block elements. (css2.1 New),, <input> tag is this inline block tag.

Inline-block Elemental Features:

1, and other elements are on one line;

2, the height of the element, width, row height, and the top and bottom margin can be set.

Tip: The next section is to use video animations to explain the box model in CSS.

<! DOCTYPE Html>"Content-type"Content="text/html; charset=gb2312"/><title> inline block element </title><style type="Text/css">a{Display:inline-Block; width:20px;/*width does not work by default*/height:20px;/*height does not work by default*/Background:pink;/*set the background color to pink*/text-align:center;/*Set Text Center display*/}</style>1</a><a>2</a><a>3</a><a>4</a></body>View Code
Box model--border (i)
The border of the box model is the line around the content and the filter, which you can set its thickness, style and color (border three properties).
The following code is div to set the border thickness to 2px, the style is solid, the color is red border:
div{    border:2px  solid  Red;}
The above is an abbreviated form of the border code, which can be written separately:
div{    border-width:2px;    Border-style:solid;    border-color:red;}
Attention:
1. Border-style (border Style) common styles are:
Dashed (dashed line) | Dotted (point line) | Solid (solid line).

2. Colors in Border-color (border color) can be set to hexadecimal colors, such as:
Border-color: #888;//Don't forget the well in front.

3, the width of the border-width (border width) can also be set to:
Thin | Medium | Thick (but not very common), most often with pixels (px).
<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> Border </title><style type="Text/css">p{border:2px dotted #ccc;}</style>"I'm coming, I'm coming. "I looked around for four weeks, so I didn't raise my hand. </p> </body>View Code
Box model--border (two)
Now there is a question, what if you want to set the bottom border separately for the P tag, while the other three sides don't set the border style? CSS styles allow styles to be set only for one direction of the border:
div{border-bottom: 1px solid red;}
You can also use the following code to implement other three-side (top, right, left) border settings:
BORDER-TOP:1PX solid red;border-right:1px solid red; border-left:1px solid red;


Box model--width and height
The width and height of the box model is not the same as the width and height of the object we normally speak of, the width (width) and high (height) defined within the CSS, which refers to the content range filled in.
So the actual width of an element (width of box) = left border + Left box + Left padding + content width + right padding + right Border + right edge.
The height of the element is also the same.
Like what:
CSS code:
div{    width:200px;    padding:20px;    border:1px solid red;    margin:10px;    }
HTML code:
<body>   <div> text content </div></body>
The actual length of the element is: 10px+1px+20px+200px+20px+1px+10px=262px. The element box model can be viewed under Chrome browser, such as:
<! DOCTYPE html>"content-type" content= " text/html; charset=gb2312 "><title> width and height </title><style type="text/css">li{    Border-bottom:1px dotted #ccc;    width:200px;height:30px;    padding:20px;    margin:10px:</style>
Box Model--fill
You can set the distance between the element content and the border, which is called "padding". Fills can also be divided into top, right, bottom, and left (clockwise). The following code:
div{padding:20px 10px 15px 30px;}
The order must not be confused. You can write the above code separately:
div{   padding-top:20px;   padding-right:10px;   padding-bottom:15px;   padding-left:30px;}
If the top, right, bottom, and left fills are 10px; you can write this.
div{padding:10px;}
If the upper and lower fills are the same as 10px, about the same as 20px, you can write:
div{padding:10px 20px;}
<! DOCTYPE html>"content-type" content= " text/html; charset=gb2312 "><title> fill </title><style type="text/css">#box1 {    width:100px;    height:100px;    padding:10px;        border:1px solid red;} </style>"box1"> Box 1</div> </body>
View Code
Box model--boundary
The distance between the element and other elements can be set using the boundary (margin). The boundary can also be divided into upper, right, lower and left. The following code:
div{margin:20px 10px 15px 30px;}
You can also write separately:
div{   margin-top:20px;   margin-right:10px;   margin-bottom:15px;   margin-left:30px;}
If the upper-right bottom-left boundary is 10px, you can write this:
div{margin:10px;}
If the upper and lower bounds are the same as 10px, and about the same 20px, you can write:
div{margin:10px 20px;}
Summary: The difference between padding and margin, padding in the border, margin outside the border.
<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> margin </title><style type="Text/css">div{width:300px;    height:300px;    border:1px solid red; } #box1 {margin-bottom:30px;}</style>"Box1">box1</div> <div id="Box2">box2</div> </body>
Web front-end Development Basics Lesson Four (CSS element classification)