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

This article is to share with you what are the basic knowledge points in Css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Block elements, inline elements

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

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

Box 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;}

Thank you for reading! This is the end of this article on "what are the basic knowledge points in Css?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.