Professional training day 8 CSS box model + positioning + simple css3 animation

There are not many things learned in one day today, and it is a little simpler than the previous day, but today's knowledge is more flexible, skillful, and experienced than yesterday's, but they all have common characteristics. It takes a lot of practice to master.

  1. Box model:

    1. Under standard browsers:
      the actual width of all labels on the page=width+border+padding+margin
      (padding, margin, and border are all calculated in the left and right directions)
    2. padding: is the distance between the content of the label and the edge of the label. Abbreviation: padding;
      padding has four directions: top, right, bottom, left;
      the setting of padding will increase the footprint of the label based on the set width;
      padding The main function is to set the padding. The effect is: the content itself remains unchanged; but the label will actually be enlarged; the
      block label can be set with padding in all four directions, which can play a placeholder role;
      the line label, Only the horizontal direction works, the vertical direction does not work;
    3. margin: the distance between the label and the label;
      abbreviation: the outer margin;
      the margin has four directions in the setting: top, right, bottom, left;
      margin: 15px 16px 17px 18px;
      margin: 15px 20px; top and bottom margins 15px, left and right Margin 20px;
      margin: 0 auto; can center the block label with a fixed width horizontally;
      when to use margin: 0 auto
      1. There is only one block tag on a line;
      2. The block label width is not 100%;
    4. The principle of using margin-top:
      if there is a small box in a large box;
      then when we set margin-top to the small box, the two boxes will come down together; this phenomenon is called margin merging;
      solution: we can first Set the height of the parent to the height of the child, and then set a padding-top to the parent.
      At this time, the child is treated as the content of the parent, so that the upper margins of the child and the parent can be opened.
    5. margin: The two boxes are in the vertical direction, if they both have upper and lower margin values.
      So what is the distance between the two boxes? The distance between two boxes in the vertical direction, whichever is larger with the outer margin.
      In the horizontal direction, the distance between the two boxes is the sum of the margins;
    6. According to the comprehensive knowledge of the box model:
      when we are measuring the page design diagram provided by the UI designer; we need to pay attention:
      when measuring, it must be measured closely to the content. Set a width for the width of the content;
      then add border, padding, margin.
      Including div or image in each line break in the code, the interface is 6-8 pixels. There will be a gap.
  2. Positioning: position:relative relative positioning; absolute absolute positioning; fixed fixed positioning;
    1. The role of positioning:
    freely change the position of the label, and there will be no layout errors due to the position of the label moving;
    2. How to use positioning : The
    first step, select the positioning method:
    position:relative/absolute/fixed;
    the second step, select the positioning value:
    top:20px;left:50px;
    3. The first positioning: relative positioning: relative
    relative positioning: relative The feature of
    relative positioning from its original position: after the original label is removed, its original position still exists and will not be filled.
    Usage of relative positioning:
    selector {position:relative;top:40px;left:50px;}
    4. The second positioning: absolute positioning:
    The reference point of absolute positioning is divided into: 1. Default reference point. 2. Custom reference point
    1. Default reference point:
    take the upper left corner of the browser display page as the reference point;
    2. Custom reference
    point Set any kind of positioning for the parent of the label that participates in absolute positioning, then the
    parent will becomes the reference point for the child.
    5. The third positioning: fixed positioning: fixed; less used in the early stage
    Reference point: the upper left corner of the browser
    6. z-index: Set the hierarchical relationship of labels;
    Because in positioning, our multiple labels will be positioned in one position, at this time the new label will cover the old label,
    so we need to adjust the hierarchical relationship of the labels positioned together;
    adjustment method: use z- index: To set:
    z-index: The value of any number greater than 0, whoever has a larger value, will be ranked at the top;

  3. CSS3 animation:
    attributes describing the action process: @keyframes;
    @keyframes mainly divides an action process into several action points;
    each point corresponds to a group of animations.
    All points are shown as percentages;
    @keyframes{
    0%{action1}
    10%{action2}
    50%{action3}
    80%{ action4} 100%{action5
    }
    }
    then the percentages between Setting, the larger the interval, the longer the time interval, the slower the action;
    if we want the action process to be bound to a label, we can
    use the animation setting on the label to bind the action process;
    animation: animation The name of the animation The whole time of the animation The motion curve of the animation The number of times the
    animation Name of the animation: custom name, the number cannot appear first;
    the full time of the action can be set: s, ms; the motion curve of the animation
    is generally linear;
    Play times: Value: 1. Take a fixed number of times, for example, 1 100; 2. Permanent loop infinite;

This evening was very interesting. A mock interview was held. As a student who was interviewed, I asked a lot of questions, including the projects I did during the university. The gap between the thinking and the things learned, and the mastery of professional terminology is not very proficient, some things can be done, but not spoken.
Question 1. Please introduce yourself
Question
2.
Your simple future plan Is the basic process of the management system?
Next are a few knowledge questions:
Question 1: How to set the default parameters of methods in java
Question 2: How does ajxs implement data access
Question 4: Branch loop
The last question, your What is the salary requirement.
I did a reflection – knowledge is not systematic, a network of knowledge cannot be formed in the brain, and knowledge is one-sided.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324590769&siteId=291194637