Learn a little css notes on the front end, referring to the tutorial of Mr. Pink, a dark horse programmer.
1. Inline elements
1. One line can display multiple
2. The width and height are expanded by the content by default
3. The width and height cannot be set
Representative tags: a, span , b, ui, s, strong, ins, em, del
2. Inline block elements
1. One line can display multiple
2. You can set the width and height
Representative label:
input, textarea (text box), button, select
3. Element display mode conversion
display:block converted to block-level elements
display:inline-block converts inline elements
display:inline converts to inline elements
4. Box model
padding inner margin
margin margin
frame
solid solid line
border-style: solid;
dashed dotted dotted
The upper border is red, and the rest are blue. Running the code from top to bottom should be written like this
border: 2px solid blue; border-top: 2px solid red;
padding padding also affects the box size. Just subtract the weight and height directly
Center the box horizontally
margin collapse
The product module case guarantees that the picture is displayed completely
.box img {
width: 100%;
Five: rounded border
1. The square is set to a circle
border-radius: 100px; becomes a circle
or
border-radius: 50%;
2. The rectangle becomes rounded and the rounded
rectangle is set to half the
height width: 200px;
height: 400px;
border -radius: 200px;
3.border-radius Set border-radius clockwise from the upper left corner of the rectangle
: 200px 100px 20px 30px
6. Box Shadow/Text Shadow
box-shadow: 10px 10px 10px 10px black;
text shadow
Seven, floating
page layout
1. Standard stream
2. floating
3. Positioning
Vertical is the standard flow
Float for horizontal alignment
Role: Allows multiple block-level elements to be arranged in a row
off label
Floating Notes
clear float
CSS writing order (important)
position
positioning = positioning mode + edge offset
sprite map
font icon
mouse style
