Preliminary review
CSS Basics (Part 1)
Common CSS Rules
layout
The box model
In CSS, all elements are surrounded by “boxes”. Understanding the basic principles of these “boxes” is the key to achieving accurate layout and handling the arrangement of elements using CSS.
CSS to form a block – level box
-
Content Box: This area is used to display Content, which can be sized by setting width and height.
-
Padding Box: A blank area that surrounds the content area. The size is set using the Padding properties.
-
Border box: Border box wraps content and inner margins. The size is set by the border attribute.
-
Margin box: This is the outermost area, the empty space between the box and other elements. The size is set by the margin attribute.
box— Block level box (block box) and inline boxes (inline box). These two types of boxes will appear in the page stream (page flow) and the relationship between elements exhibit different behaviors:
-
The box expands in an inline direction and takes up all the space available to the parent container in that direction, which in most cases means that the box is as wide as the parent container
-
Each box will wrap
-
The width and height attributes come into play
-
Padding, margin, and border “push” other elements away from the current box
Unless specified, headings (
, etc.) and paragraphs (
) are block-level boxes by default.
If a box appears inline, it behaves as follows:
-
Boxes do not generate line breaks.
-
The width and height attributes will have no effect.
-
Vertical margins, margins, and borders are applied but do not push other boxes in the inline state away.
-
Horizontal inner margins, margins, and borders are applied and push other boxes in the inline state away.
The element and used as links are inline by default.
Let’s move on to another example
What is the real area of the box element in this example?
Width =410px (350 +25+25+5+5), height =210px(150 +25+25+5+5), padding + border + Content box
You can modify the browser’s default behavior by setting box-sizing: border-box (content-box by default)
If you want to use alternative modes for all elements, and it is common, set box-sizing to<html>Element, and then set all elements to inherit the property, as in the following example
Inline boxes only apply to some block-level box properties.
As you can see, the width and height are ignored. Margins, margins, and borders are valid, but they do not change the relationship of the rest of the content to the inline box
Box model CSS rules
-
Margin: Sets the margin
-
Border: Sets the border
-
Padding: Inside margin
-
Width & height: Content width and height
-
Box-sizing: Modify the definition of width and height
-
Display: Changes whether elements are block-level boxes or inline boxes
For more tips on using the box model and the properties above, and extension properties, head over to MDN.
Normal document flow
The box model explains the size of a block of elements; How is the location of the element block in the entire document determined?
By default, block-level elements are placed in block flow direction based on the writing order of their parent (default: Horizontal-TB)
-
Each block-level element starts on a new line below the previous one,
-
They are separated by a margin.
-
Block-level elements are organized vertically.
Inline elements behave differently
-
They don’t start on another line;
-
They are arranged on the same line as other inline elements as long as there is enough space in the width of their parent block-level elements.
-
If there is not enough space, the spilled text or element is moved to a new line.
Elastic layout
Elastic boxes are a one-dimensional layout method for laying out elements by row or column. Elements can expand to fill extra space and contract to fill smaller Spaces.
-
Simply add the display: flex property to the container. You get a horizontal layout. In terms of the box model, the container is like a block-level element (display.block), but the width is determined by the child elements by default;
-
A child element is similar to an inline-block element and can be set to a width without line breaks. Its original display property is basically ignored, which is an implicit box model state.
This model is very flexible. Can complete 90% of the layout requirements.flex-directionAttribute controls the order in which child elements are arranged
flexContainers are like block-level boxes that can be set to a larger width than child elements need.justify-contentProperty to help you determine how the child elements are allocated, right
Similarly, when the parent container is highly overflowed,align-itemsHelp you determine how vertically aligned the child elements are
These are the most common uses of elastic boxes. Fifty percent of the time, the browser will allocate the right amount of space for each element, but the other half will require additional adjustments. At this point you need to know more about the properties of the elastic box
Css-tricks Elastic Boxes are introduced
Review of what elastic boxes have learned
-
Display: flex: One click to open the elastic box mode, instead of normal document flow
-
Flex-direction: Change the “main axis” of the elastic box
-
Illustration-content: How are the spindle-lines of child elements aligned
-
Align-items: How are the horizontal lines of child elements aligned
Positioning (position)
position: static
Whether it’s a normal document flow or an elastic box, the layout of the elements in the inside affects each other. The front element takes up space, and the back element must be a little bit behind.
This is just one of themPositioning isThat is calledStatic positioningSpecifically CSSposition: static; Default to each element
position: relative
Position can also have other values, such as position: relative
Relative positioning still occupies position in the document flow, but you can use the top, left, bottom, and right attributes to do some offsets
position: absolute
This is called absolute pair positioning. Absolutely positioned elements are completely separate from document flow and elastic boxes. Absolute positioning of the box positioning, size, you can fully specify.
At this point, top,left, is no longer relative to the original position, but relative to a non-static parent container. By the way, a similar position: fixed, whose top,left and other attributes are relative to the browser window
z-index
Because the position attribute of a non-static value allows elements to overwrite each other, CSS provides a Z-index attribute to control which element is overwritten at the top
Decoration related
There are many scenarios and usage techniques that have not been mentioned regarding the use of layout flow, elastic boxes, and absolute positioning. There are also float, table, and grid layouts. This is something that students will continue to explore online.
Let’s take a look at some of the ways CSS can help you decorate your page
The text
background
MDN CSS background property
A border
MDN CSS border attribute
shadow
MDN CSS box-shadow attribute
Interaction related
animation
CSS Excellence
CSS debugging
Sometimes the problem with CSS is that it doesn’t look exactly the way you want it to. You might think that the selector matches the element but nothing happens, or you might think that the size of the box is not what you want. This chapter will get you started debugging CSS and show you how DevTools in modern browsers makes it easier to know what’s going on.
Review the CSS
You can select an element from the page by right-clicking the element and selecting The Inspect element; Select the element from the HTML tree to the left of DevTools. It is the first element on the page, with a border drawn around it.
- In the panel, you can directly switch on and off, edit and add the value of the property.
Understanding box model
The previous section described how a box model calculates its own dimensions. Developer tools can really help you understand this process.
The Layout view shows you a diagram of the box model of the selected element, along with a description of the properties and values that change how the element is displayed. You may not have used the attributes of the element exactly, only the initial values, and the box model may contain descriptions of these attributes.
CSS extensions
CSS preselector
Another way to organize CSS is to take advantage of tools available to front-end developers that allow you to write CSS in a slightly more stylized way. Preprocessing tools run from your original files and turn them into stylesheets.
Representative tools include:
-
less
-
sass
-
stylus
The following uses less as an example to see what functions can be extended by the CSS.
Variable, which will be filled in the corresponding position after compilation
The following uses less as an example to see what functions can be extended by the CSS.
Mhixin, like a function
CSS innovations
CSS has evolved over the years, and we no longer need to write CSS files to write styles.
Styled – Components csS-in-JS scheme, armed with the power of JavaScript
Utility-class solutions, represented by tailwindcss, change styles to HTML files, helping you set design specifications with limited options.
Afterword.
-
This course starts from the birth background and basic definition of CSS, let us have a preliminary understanding of CSS;
-
And then it goes on to show you how to learn CSS properly, which is probably the most important part of this powerpoint. CSS needs to be learned by practice.
-
It introduces the key concepts of CSS such as box model, document flow, layout, positioning, and related CSS properties, and shows the possibility of CSS decorating documents
-
Finally, we took a quick look at how to debug CSS and what tools are available today to help you write CSS better and use CSS in a better way
conclusion
- If there is any mistake above, please point out in the comment section, thank you!
After reading it, give it a thumbs-up and then walk away