Preface: Here is the record of some notes I wrote when I was on the job, because my personal documents have not been organized much except in the group sharing meeting and the personal computer. I am also looking for a new job recently. By the way, I will sort out my previous notes.

Float properties: float, clear

Characteristics of the

Floating elements can only float left or right, not up or down

Floating elements do not overlap each other

The display attribute will be completely disabled

You can set the width and height

They don’t have a single line

grammar

float:none/left/right;
Copy the code

Box model: border, margin, padding

Rounded border: border-radius

Shadow: text-shadow, box-shadow

Clear float:

Property: clear Value: left right both

Commonly used way

​

2. The floating element's parent div defines overflow:hidden 3. Float the parent element's fixed width heightCopy the code

positioning

Relative positioning

position: relative
top:xx
bottom:xx
left:xx
right:xx
Copy the code

Position oneself relative to original position

The original physical location is still occupied after the element is moved

Absolute positioning

position: absolute
Copy the code

The element does not occupy its original physical location

Reference location: browser (0,0) or outer element (parent node, parent node……) Have positioning (not static)

Fixed position

position: fixed
top
bottom
right
left
Copy the code

You can hold the element’s position in the browser form

z-index

You can set the display order of ** positioned elements ** (this does not work if it is not a positioned element)

z-index: 1
Copy the code

The larger the larger the upper, the z-index refers to the element order at the same time, the latter is above

display

Each element has a default attribute, such as div(display:block), span(display:inline).

// Common attributesnone(Alternatively, visibility: hidden, which still occupies the row element and will only be visible if it is visible; Opacity: sets opacity0~1Block: Specifies an object as a block-level element with width and height attributes. Exclusive row. Inline-block: specifies an object as an inline block element with width and height attributes. Specify an object as a cell of the table, and the sibling elements with this property will share a row as cellsCopy the code

The box model

The W3C recommends thinking of elements on a web page as boxes.

The box model defines four areas: content Content (usually objects with width and height) Padding Inside margin Border Border Margin

Positioning center

margin: 1pxauto; / / the focus is onauto
Copy the code

Note: Outer space merge, only up and down merge, no left and right merge. There are merges between parent and sibling elements, and there are no merges between margins of floating elements

// Add a border to the parent element:1px solid red; 
Copy the code

From the outside

The empty area surrounding the border of an element

  • Creates extra white space outside the element
  • The margins are transparent

grammar

margin:value
Copy the code

Value The value can be pixel, %, auto, or negative

A border

The style of the border must be set to make it appear

> > < p style = "margin: 0.0px 0.0px 0.0px; padding: 0.0px; outline: none; None // No borderCopy the code

General writing order: width, style, color

padding

  • Space between the content area and the border
  • Enlarges the area occupied by the element’s border
  • Grammar: padding: value

Standard box: the width and height of the border should be recorded within the width and height of the box model (actual element size = width and height +border+padding), but not the margin

box-sizing: content-box
Copy the code

Weird Box: Actual size of elements = width and height

box-sizing: border-box
Copy the code