Notes 7-13

1. css

1. Background-related colors

<style>
    body{
        background-color: red;
        background-image: url("../pic/photo.jpg");
        background-repeat:no-repeat;
        /*background-position: inherit;*/
    }
</style>

 

Background-color: Background color

Background-image: Set the background image, you need to set the url address of the image

Background-repeat: Select whether to replicate, repeat-x, horizontal replication; repeat-y, vertical replication

Background-position: Select the location

You can also encapsulate these attribute values directly into a backgrounds, writing order: background color, background image, whether to copy, image location, so that the code is more concise.

background: red url("../pic/photo.jpg") no-repeat right;

 

2. Size-dependent properties

Height: Height

Width: Width

div{
    height: 100px;
    width: 100px;
}

Max-height:

Min-height:

Max-width:

Min-width:

3. Method of hiding attributes

Visibility: Hidden after that means that only the content is hidden, but it still exists.

Display: Next to none, the content is lost, and it doesn't occupy a place.

Display can set the display mode of elements

Inline: Block set elements can be displayed inline, and width and height are invalid. The size of space depends on the content of the element.

Inline-black: Block set elements can be displayed inline with some features of block set elements, such as setting size using width and height attributes

i. Block set elements can be converted to inline elements by defining display=inline-black;

ii. Inline elements can be converted to block set elements by defining display= black;

li{
    display: inline-block;
    width: 300px;
    height: 300px;
    background-color: green;
}
span{
    width: 200px;
    height: 200px;
    display: block;
    background-color: blue;
}

 

4. Box Model

1. Margin: Outside margin

Margin-top,margin-right,margin-bottom,margin-left

Usage

1) margin: 30px, which means that the distance between the upper and lower sides and the outer margins is 30px;

2) Margin-left:30px, set the left and right margins separately

3) Margin: 10px 20px 30px 40px; set the upper right and lower left four margins to 10px 20px 30px 40px;

2. Padding: Inside margin

Like margin, attributes have, and they have

3. Border: Boundary Border

Border-width; border width

Border-style: Border line type

Border-color: Border color

Optimized writing can also be used

border: 50px groove blue;

4. Outline contour, used in the same way as border

3. Location

Location methods are static, fixed, relative, absolute

Static: Static positioning (default)

Without positioning, elements normally appear in the flow and are not affected by attributes from top to bottom.

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: static;
    }
</style>

Fixed: Dynamic Location

#div1{
    width: 200px;
    height: 200px;
    background-color: blue;
    /*left: 50px;*/
    /*top: 50px;*/
    position: fixed;
    /*z-index: 3;*/
}
#div2{
    width: 200px;
    height: 200px;
    background-color: yellow;
    left: 50px;
    top: 30px;
    position: fixed;
    /*z-index: 2;*/
}

As a result, fix location can remove div s from the stream, and relocation depends on left and top. After repositioning, there will be overlap. We can use z-index to realize who is on the top and who is on the top.

Relative: Relative

#div1{
    width: 200px;
    height: 200px;
    background-color: blue;
    /*left: 50px;*/
    /*top: 50px;*/
    position: static;
    /*z-index: 3;*/
}
#div2{
    width: 200px;
    height: 200px;
    background-color: yello
    left: 50px;
    top: 30px;
    position: relative;
    /*z-index: 2;*/
}
#div3{
    width: 200px;
    height: 200px;
    background-color: yello
    left: 100px;
    top: 60px;
    position: relative;
    /*z-index: 2;*/

}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
//Relative positioning can jump out of flow without affecting other positioning.
Absolute: Absolute
#div1{
    width: 200px;
    height: 200px;
    background-color: blue;
    /*left: 50px;*/
    /*top: 50px;*/
    position: static;
    /*z-index: 3;*/
}
#div2{
    width: 200px;
    height: 200px;
    background-color: yellow;
    left: 50px;
    top: 30px;
    position: absolute;
    /*z-index: 2;*/
}
#div3{
    width: 200px;
    height: 200px;
    background-color: yellow;
    left: 40px;
    top: 20px;
    position: absolute;
    /*z-index: 2;*/
}

From the results, we can see that the elements of absolute positioning can be extracted from the stream and positioned by the left attribute.

Similar to fixed, but different from reference

Does Fixed refer to the root element and move as the screen moves?

Absolute refers to the parent container and moves with the screen