BASE
Just take a rough record of things that are unfamiliar and need attention.
Css learning still needs to understand some very classic layout ~~~
Although there are a lot of frameworks to help you, you need to fine-tune it, or try to be more controllable.
- Floating because the default div comes out with a vertical code, float: left starts horizontally from the left, and float: right does the same.
- Margin is the distance between elements.
margin: top right bottom left
margin: up, down, left and right
margin: up, down, left, and right
- I have heard a saying about padding padding, but I do n’t know if it makes sense. Say what can be solved by padding, not margin.
The three writing methods are the same as the above margin. Another padding: The margin is the same for the top, bottom, left and right.
Note: margin will not change the size of the element, but padding will change the size of the original element itself.
- Block elements and inline elements
Block element: Div is the most basic block element
1. Supports width and height margin, padding
2. The width is 100% by default, on a line by itself
Inline element: span The most basic inline element
1. The width and height will change as the content changes
2. Support margin, padding
3. Do not monopolize a line
Block elements can be nested
inline elements at will, only inline elements can be nested
- border-border
- background
Background -position background coordinates
put two parameters. The second parameter defaults to center
. The first parameter is the x axis. The
second parameter is the y axis. It
supports the writing of right / bottom / left / top / center.
Font
- font
font-family: "Font 1", "Font 2", "Font 3", "Font 4", "Font 5", "Font 6"
If there is no font 1, you will find font 2, and so on. . .
- line-height which I think is very important
Set your own internal height position
When the size of line-height is the size of the element, it will be in the middle of the element
This thing can control the elements in the line ~
That is, if there is a div block element in the middle, it will be invalid! ! !
Percentages, numbers are supported, but percentages are inherited from the parent.
- How to use font-style italic text
italic => is the italic font used
oblique => is to make the font italic
- font-variant (Ignore it is useless)
- Abbreviation of font attribute (red frame part)
Positioning Grey is always important! ! ! ! ! !
Positioning, layout, b station has a large number of classic layout videos, you can refer to the portal
- position
The relative positioning (left, right, top, bottom z-index (who can cover who's attributes) z-axis is equivalent to the feeling of what is placed at the top level in Excel, etc. The application of the actual project I have met before: For example, when a child window pops up, add a mask to the parent window, the z-index of the child window is greater than the z-index of the mask is greater than the parent window ) (the z axis supports negative numbers)
Relative positioning will not affect the original position , and the displayed elements will change position. . . . . .
- Absolute positioning
Out of standard flow
Absolute positioning will not leave the original position
Absolute positioning is based on the positioned parent node.
But if the parent node is not located, it is the parent node is not located, not the parent node, please note that
Then you will always find the outermost node until the body node.
- Window positioning
<!DOCTYPE html>
<html>
<head>
<title>01 PAGE</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
#div1{
margin-top: 300px;
margin-left: 300px;
background-color: rosybrown;
height: 160px;
width: 160px;
position: relative;
float: left;
}
#div2{
margin-top: 30px;
margin-left: 30px;
background-color:saddlebrown;
height: 60px;
width: 60px;
position:absolute;
}
#div3{
margin-top: 0px;
margin-left: 0px;
background-color:seagreen;
height: 160px;
width: 160px;
position: fixed;
}
</style>
<script type="text/javascript">
</script>
</head>
<body style="height: 2000px;">
<div id="div3"></div>
<div id="div1">
<div id="div2"></div>
</div>
<!-- <div id="div3"></div> -->
</body>
</html>When the window scrolls, his div will move, but the elements positioned by the window will not move ~~~
This thing, I have encountered this practical application in previous projects, that is
This requires how to scroll the window, and also reserves a button that can pop up a sub-window to modify the conditions for searching for commodities.
It can always be located at a certain position on the screen.
The course teacher said, for example, that kind of advertisement will always be in a suspended state somewhere on the screen. . . . . .
- Parent positioning: What is the positioning of the parent, what is the positioning of himself.
inherit a child div nested in a div, if the inheritance positioning method is used, then what is the positioning of his parent div, what is the way he is.
eg: The father is a window. If it doesn't scroll, he is also a window and won't scroll.
The father is absolute and will follow away, he is also absolute, will follow away.
If the parent is also inherit, then you need to look at the parent again.
- The default value is no positioning static
display
float can turn elements in rows into block elements! ! ! ~~~
In addition, display: block can also be used to program block-like elements.
The variable block element is that the line width and height you set will have an effect.
- I do n’t know how to use it in the industry
- So is it possible to swing sideways and support width and height.
- Red and green is the width and height of the div, but can not be placed sideways
- The yellow gray is the element in the span line, which can be placed horizontally, but it does not support the width and height (the following picture is the effect after adding the inline-block, and the width and height are not supported when not added)
- So inline-block was born, which can be placed sideways and can support width and height.
Elemental Percentage Unit
Another word: the default of block elements is width, which is 100% by default, so they only occupy a line, but the height is 0, so when you do n’t set it, you ca n’t see him. For example, at this time, you directly write a div under the body, and set his height to 50% or something, you ca n’t see him, but if at this time, you set the height of html and body to 100 %, You can see the 50% div you just made. You must pay attention to this point.
the above
