Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "what are the basic contents of Css?", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what are the basic contents of Css?"

Block elements, inline elements

A block element is an element that occupies the full width and is a newline character before and after.

Such as: h _ 2 ~ (1) p _ (1) div

Inline elements only need the necessary width and do not force line breaks.

Span, i,a

Frame model

All HTML elements can be thought of as boxes, including margins, borders, padding, and actual content.

Margin-clears the border area. Margin has no background color, it is completely transparent

Border-the padding and content around the border. The border is affected by the background color of the box.

Padding-clears the area around the content. Will be affected by the background color filled in the box

Content-the contents of the box, displaying text and images

When the width and height attributes are set for an element, only the width and height of the content area are set. You know, full-size elements, you must also add fills, borders and margins.

Width of total element = width + left fill + right fill + left border + right border + left margin + right margin

The final formula for calculating the total height of the element is as follows:

Height of total element = height + top fill + bottom fill + upper border + lower border + upper margin + bottom margin

Margin,padding

Margin clears the area of the surrounding elements (outer borders). Margin has no background color and is completely transparent

Margin can individually change the top, bottom, left, and right margins of an element. You can also change all attributes at once.

Abbreviated attributes:

Margin:25px 50px 75px 100px

Corresponding, top, right, bottom, left

Margin:25px 50px 75px

Correspondence: up, left and right, down

Margin:25px 50px

Correspondence: up and down, left and right

Margin:25px

Corresponding: 4 margins

Padding:

When the Padding (inner margin) of an element is cleared, the area that is "released" will be filled with the background color of the element.

Abbreviated attributes act like magin

Float

The element can only float horizontally, moving left or right until it touches a border or another floating element, and other text streams will surround it.

Several floating elements will be adjacent to each other and of the same height, which is also different from inline-block, which has spacing

Clear the floating clear:both using clear

CSS selector, combination selector

Id selector

# para1 {text-align:center;color:red;}

Class selector

.center {text-align:center;}

The style of the class under an element

P.center {text-align:center;}

Descendant selector

Div p {background-color:yellow;}

Recursive selection, all p elements under div can be their own child elements or child elements-child element selector

Div > p {background-color:yellow;}

It only works on its own child elements, not recursively.

Neighboring sibling selector

Div+p {background-color:yellow;}

The first p element adjacent to the selected one needs to have the same parent element.

Ordinary neighbor sibling selector

Div~p {background-color:yellow;}

To select all adjacent p elements, you need to have the same parent element-nested selector

P {color:blue;text-align:center;} .marked {background-color:red;}. Marked p {color:white;}

All p elements under .marked set up a style identical descendant picker.

Packet selector

H2,h3,p {color:green;}

Use commas to separate and merge elements of the same style, which is equivalent to

H2 {color:green;} h3 {color:green;} p {color:green;}

The above is about the content of this article on "what is the basic content of Css?" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.