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

This article mainly shows you "what are the common skills of CSS grammar", the content is simple and clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the common skills of CSS grammar" this article.

Box model

Content-box (W3C standard box model)

Border-box (IE Box Model)

The specific differences are: 1. Once the width of the border-box is determined, it will not change. Width = border + padding + content width 2. Content-box will increase or decrease according to padding. Width = width of the content

BFC

Is a container, inside and outside do not affect each other, remember: when clearing floats, if you use overflow: hidden, there are shortcomings, if beyond the range, then it is hidden

Trigger principle

1 root element 2 float attribute is not none, for example, left, right3 position is absolute or fixed4 display is inline-block, table-cell, table-caption, flex, inline-flex5 overflow is not visible, such as hidden, auto

Rules

1. The internal Box will be placed vertically, one after another. two。 The margin of two adjacent Box that belong to the same BFC will overlap. 3. The area of BFC does not overlap with float box. 4. BFC is an isolated independent container on the page, and the child elements in the container will not affect the outer element 5. Floating elements also participate in the calculation when calculating the height of the BFC

Action

1. Clear the float, and the height of the floating element in the BFC will also participate in the calculation of 2. Prevent margin overlap

Clear float

.clearfix: after {content:', height:0; display: block; visibility: hidden; clear: both; line-height:0;// row height is 0}

Overall Arrangement

Floating layout

Titlebody {margin: 0; padding: 0;}. Left {float: left; width: 300px; height: 100px; background-color: red;}. Right {float: right; width: 300px; height: 100px; background-color: blue;}. Center {margin: 0px 300px 0px 300px; background-color: black; height: 100px;} 1 2 3

Disadvantages: there will be the problem of collapse

Flex layout

Title.father {display: flex;}. Left {width: 300px height: 100px; background-color: red;}. Center {flex:1; height: 100px; background-color: black;}. Right {width: 300px; height: 100px; background-color: blue;}

Absolute positioning

Titlebody {margin: 0; padding: 0;}. Left {position: absolute; left:0px; left:300px; height: 100px; background-color: red;}. Right {position: absolute; right:0px; width: 300px; height: 100px; background-color: blue;}. Center {position: absolute; left:300px; right:300px; background-color: black; height: 100px;} 1 2 3

CSS optimization

(1) compress (2) attribute concatenation: font: font-style font-weight font-size (3) inheritance: font clolr (4) CSS put into Head, reduce reflow repaint above is "what are the common skills of CSS grammar?" all the content of this article, thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to 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.