Some of the knowledge learned on this week's web page

The first is the navigation, it is a page header, we put it in Nav, add a UL unordered list.

In the following sections, first divide the chunks. Fill in the content after you finish the stroke.

Transform:rotate (deg); Warp rotation 40 degrees

|              | |

Rotational degree of deformation

Transform:scale (0.5); Reduced by 0.5

Transform:scale (0); Zoom 5

Box Model:

Block-level elements:

1 occupy all available degrees and start with a newline;

2 is usually used to compare large chunks of content, such as headings or structural elements;

Example: div p h1-h6 HR br ul li semantic/semantic structure elements

Inline elements:

1 occupy the width of the content, one after another in the same row;

2 is typically used to compare small chunks of content, such as some words that are set to some bold or italic.

Example: span a i em b strong img Input label

Property: Dispiay:line-bork

Whether it can inherit: no

Default value: Inline

Maargin margin: The distance from the other boxes;

Border border:

padding padding: The optional distance between the border and the content;

Content Height and width

Content

Overflow:hidden if overflow is hidden

Overflow:scroll

Overflow:auto

Sets the maximum and minimum width of the current element in the browser

Max-width:;

Min-width:;

Sets the maximum and minimum height of the current element in the browser

Max-height:;

Min-height:;

Visualization mode:

The visual formatting model is a mechanism that regulates the arrangement of multiple boxes in a page, interacts with each other, and the final size and position is made up of a large number of CSS specifications that govern how the elements are laid out.

Include Fast:

1 Each element has a containing block, which is an area where elements are placed in the page.

2 typically the element's containing block is the contents of its parent element box Content-box.

3 The root element has no parent element so its containing block is initialized to contain fast (HTML), and its placement area is the entire area.

The visual format model specifies three positioning systems:

1 General flow (general flow document)

2 Floating

3 Absolute Positioning

Positioning System judgment: Start-Judge position value is absolute or fixed--is-absolute positioning-end

--no--judging whether the value of float is left or right----floating--end

--no--general flow--end

How do I make one contain fast/center: (Give value first, can set width)

Horizontal direction: Margin:auto;

width:10px;

Vertical direction: margin is Auto:o

Height is auto: adapts to height

Floating: Off the regular document flow

element is a floating element default value when the value of the float property of an element is left or right: none

Floating box Position: Float:left left floating float:right right float

1 left floating box up left: go up first, go left;

2 Right floating box up and left: go up first, go right;

3 The top edge of the floating box must not be higher than the top edge of the last box;

4 If the remaining space cannot be lowered, the box moves downward until sufficient space is available to hold the box and then move left to right.

When the regular flow of the box meets the floating:

1 floating box will avoid the regular flow box;

2 The regular flow box will ignore the floating box placement;

3 when calculating the automatic height of the conventional flow box, ignore the floating box;

Height collapse: The height of the conventional flow box ignores the floating box

Clear float: Clears the float for an element, allowing the element to appear below the floating element when placed.

Clear

Whether or not to inherit: No

Default value: None does not clear

Value: Clear:none not clear

Clear:left Clear left Float

Clear:right Clear Right float

Clear:both all Clear

Used for the last element: Clear:both prevent parent element, height collapse

Absolute positioning: Absolute contains a block must have a position, a layer of upward looking;

Absolute positioning: Empty the original position, out of the document flow, fixed document flow is the same.

Fixed positioning: Fixed fix, empty the original position.

Relative positioning: The element's original position is offset by increment and decrement, and continues to occupy the space of the element's original position.

Z-index:1 setting the level of the z-axis (top or bottom)

Requirements: Z-index to be used with position.

The larger the value, the higher the upward.

opacity:0;

Opacity:1;

Transition:all 2s;

Navigation list Effects:

The format that is written in CSS:

Ul>li:last-child:hover Li:nth-of-type (1) {

transition-delay:0s; (Delay 0 seconds)

Opacity:1;

Transorm:none No change

}

Ul>li:last-child:hover Li:nth-of-type (2) {

transition-delay:300ms; (Delay 300 milliseconds)

Opacity:1;

Transorm:none

}

Ul>li:last-child:hover Li:nth-of-type (3) {

transition-delay:600ms; (delay 600 milliseconds)

Opacity:1;

Transorm:none

}

Picture hover time-varying vibration, zoom out slowly disappear

CSS columns:. box{

Width:;

Height:;

Background:url ("path")

}

. Box > Img:hover {

opacity:0; Transparent 0

Width:; The width of the picture

Height:; Picture of the High

Transform:scale (1.3,1.3); Zoom in 1.3 times times

Transition:all 1s;

}

Color changes from the middle of a text bottom border to the left and right sides

Div li{

List-stype:none; No dots.

Float:left; Floating

Text-align:center; Center text

margin-left:10px; Move to the left 10px

position:relative; Relative positioning

}

Div Li:: before {

Content:: "";

boreder:2px solid white;

bottom:0px;

width:0%

left:50%

Transition:all 3s;

Position:absolute;

}

Div Li:hover:: before {

width:100%;

LEFT:OPX;

BORDER:2PX solid red;

}

input {padding left:10px; Set the content indentation of the input box

boreder:1px solid red; Set the color of the border of the input box

Outline:none; Uncheck the Focus box after the input box is selected (do not focus frame)

Color:green; Change the color of words at input

}

Html:input type = "Text"

Css:input::-webkit-input-placeholder

{color:lightgreen;

} Set the input box prompt information color

WebKit is the Google prefix, each browser prefix is not the same.

Some of the knowledge learned on this week's web page