In depth analysis of assessment questions

##In depth analysis of assessment questions

1 write a triangle

Implementation method: set a box, set the length and width of the box to 0, then set the thickness and color of a border for the box, and finally change the direction of the border you want to keep and other colors to transparent
Implementation principle: if the width and height are set to 0, the surrounding borders can be accumulated to a point to form four triangles. Finally, set the color of other boxes to transparent to print a triangle
Implementation code

<body>
    <div class="triangle"></div>
</body>
<style type="text/css">
    .triangle {
        height: 100px;
        width: 100px;
        background-color: #ABCDEF;
        border-top: 50px solid green;
        border-left: 50px solid blue;
        border-right: 50px solid black;
        border-bottom: 50px solid red;
    }
</style>

###2 learned selectors and their weights
####Learned selector
ID Selector
2. Element selector
3. Class selector
4. Wildcard selector
5. Attribute selector
6. Pseudo class selector
Select a state of some elements
1) link: the state of the hyperlink when it is not accessed
2) visited: status after hyperlink access
3) hover: mouse over state
4) Active: active state, mouse down state
7. Pseudo element selector
before
after

####More pseudo elements

  1. first-child
    Select the first child element
    First of type, select the first element of the specified type among the child elements
  2. last-child
  3. nth-child
    Select the specified child element
    even: keyword, equivalent to 2n
    odd: keyword, equivalent to 2n+1
  4. nth-of-type
    Select the element of a certain type among the specified child elements

More pseudo element selectors

  1. first-letter
    Select the first letter in the element
  2. first-line
    Select the first line of text in the element
  3. selection
    Select the text selected by the user

Weight of selector

  1. Thousands: if it is an inline style, Mark 1; otherwise, mark 0
  2. Hundredth: equal to the number of all id selectors in the selector
  3. Ten bits: equal to the number of all class selectors, attribute selectors and pseudo class selectors in the selector
  4. Bits: equal to the number of all element selectors and pseudo element selectors in the selector
    Each binary is 256

3 centering mode

Vertical center: height = line height
Horizontal center: text - align:center
div Center: set the absolute positioning of the box to 0 up, down, left and right, but set margin equal to auto

##Solve the problem of high collapse
Set a style for the parent element as follows

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

Causes of high collapse;
In the regular flow, the height of the box is supported by the class content. Because the floating elements will be completely separated from the regular flow box, the regular flow cannot check the floating in itself, resulting in no height.
Solution analysis, set a pseudo element selector after, and generate a blank box at the end of the box. It is clear that the floating in front is that the height is not collapsing

4 three column layout (fixed on both sides and adaptive in the middle)

Positioning method

 .contecontainer{
            position: relative;
           width: auto;
            height: 500px;
        }
        .left{
            position: absolute;
            width: 200px;
            height: 500px;
            background-color: blue;
            left: 0;
        }
        .right{
            position: absolute;
            width: 200px;
            height: 500px;
            background-color: brown;
            right: 0;

        }
        .center{
            margin-left: 200px;
            margin-right: 200px;
            background-color: darkgoldenrod;
            /* width:100%; */
            height: 500px;
            text-align:center;
        }

2 floating method

<style>
    body,
    html,
    .container {
        height: 100%;
        padding: 0;
        margin: 0;
    }
    /*Left column floating left*/
    .left {
        float: left;
        height: 100%;
        width: 200px;
        background: pink;
    }
    /*Middle bar adaptation*/
    .main {
        height: 100%;
        margin: 0 200px;
        background: skyblue;
    }
    /*Right column right float*/
    .right {
        float: right;
        height: 100%;
        width: 200px;
        background: pink;
    }
</style>

Solve the problem of white edge of picture

resolvent
1 change the display attribute of img to block
2 set font size 0 in img
Cause of problem
img is a line box. It will not monopolize a line, and blank folding will occur
The line box does not break lines in the page, and the block box has only one line, so img will also display the following spaces

Tags: css3 html css

Posted on Sun, 05 Dec 2021 05:36:17 -0500 by Nic