floating

Some features of float

  • A floating element can be moved left or right until its outer edge hits a border containing the parent element or another floating element
  • The floating element is not in the document flow, so the non-floating elements below fill in below the floating element (floating element is promoted)
  • Inline elements can also float and their width and height can be set

Some problems caused by floating

  • Problem 1: Parent element height cannot be stretched
  • Problem 2: Non-floating elements of the same class as the floating element fill in below the floating element (masking phenomenon)

Some solutions to problem one

  1. Sets a fixed height for the parent element
  2. Set overflow:hidden for the parent element
  3. Add pseudo-elements, you can add after pseudo-class to the parent element (you can append the generic class Clearfix to all floating elements to clear floats)
.clearfix::after{
    content:"";
    display:block;
    clear:both;
}
Copy the code

Some solutions to problem two

  1. Inside the parent element, floating element at the end, add a “wall”, set the property clear:both
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clear">My name is wall</div>
</div>
Copy the code
.container{
    width:100%;
    border:2px solid # 000000;
}
.left{
    width:100px;
    height:100px;
    background-color:rgb(52.128.250);
    float:left;
}
.right{
    width:100px;
    height:100px;
    background-color:rgb(52.128.250);
    float:left;
}
.clear{
    clear:both;
}
Copy the code

Locate the position

Several positioning methods

  • Static: The default value, that is, no positioning
  • Relative: Relative to its position in the normal document flow (that is, when not moved)
  • Absolute: Absolute positioning, relative to the nearest level (parent element) positioning (from the immediate parent element up to the root element)
  • Fixed: Fixed positioning, positioning relative to the browser’s viewable area
  • Sticky: sticky positioning, can be thought of as a combination of relative positioning and fixed positioning, combined with the experience of the example (need to drag the scroll bar to try, compared with relative)
<div class="prev">prev</div>
<div class="container"></div>
<div class="next">next</div>
Copy the code
.prev{
    width:100px;
    height:100px;
    background-color:yellow;
}
.container1{
    position:sticky;
    border:2px solid black;
    width:300px;
    height:300px;
    top:40px;
}
.next{
    width:100px;
    height:2000px;
    background-color:yellow;
}
Copy the code

Position and float are similar and different

Inline elements can be set to float and absolute, elements can be detached from the document flow, and their width and height can be set

The floating element after the non-floating element does not override the floating element until it touches the border of the non-floating element. ; For Absolute, when setting top, left… The above elements may be overwritten.

As an example, when I add float:left to the next class, the box named next stops when it hits the border of Container. Add position: Absolute to the next class; top:300px; The next box is overlaid on top of the Container box.

<div class="prev">prev</div>
<div class="container"></div>
<div class="next">next</div>
Copy the code
.prev{
    width:100px;
    height:100px;
    background-color:yellow;
    float:left;
}
.container{
    border:2px solid black;
    width:300px;
    height:300px;
    /*float:left*/
    /*position:absolute; top:300px; * /
}
.next{
    width:100px;
    height:100px;
    background-color:yellow;
}
Copy the code

Block-level elements and inline elements

Some block-level labels

Div, H1-H6, P, OL, ul, Li, DL, TABLE, BR, form, etc. Newline display, width and height can be set, line and block can be set.

A tag for some inline attributes

Span, a, em, strong, select, option, img, input, textarea, etc. Inline display, only line tags (and some special line tags), and no width and height (except for IMG, INPUT, and textarea).

On the display

Some values for display

  • Block: indicates the block type. The default width is the width of the parent element. The width and height can be set
  • Inline: Inline elements are displayed in the same line. The default width and height are the content width. The width and height cannot be set
  • Inline-block: Inline block-level elements. The default width and height are the content width. The width and height can be set and displayed in the same line
  • None: Elements are not displayed, leaving the document flow
  • Inherit: inherit the value of the display attribute from the parent element

Display: none and visibility: hidden

  • Display: None hides the corresponding element from the document flow (i.e., no space is allocated to it in the document flow; elements around it close)
  • Visibility :hidden hides the corresponding element, but retains the original space in the document flow

Some styles in CSS can and cannot be inherited

  • Inheritable: font-size, font-family, color
  • Not inheritable: border, padding, margin, width, height

Those related to fonts can be inherited; those related to size generally cannot

CSS priority

! Word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important

Some addition and subtraction used in the combination of selectors

Often used in the center

Given the wide high

.father{
    position:relative;
    width:100%;
    height:100%;
}
.son{
    position:absolute;
    width:100px;
    height:100px;
    top:50%;
    left:50%;
    margin-top: -50px;
    margin-left: -50px;
}
/ * more... * /
Copy the code

Not to high wide

.father{
    position:relative;
    width:100%;
    height:100%;
}
.son{
    position:absolute;
    width:100px;
    height:100px;
    top:50%;
    left:50%;
    transform:tanslate(-50%, -50%);
}
/ * more... * /
Copy the code

The font in the middle

Text-align :center; text-align:center; letter-spacing

Some of the gains from listening to UI class

A design book recommended by the course teacher. Read the Design Book for You when you have time.

Some key words: hierarchy, theme color, consistency

  • Contrast: If two elements have different meanings, make them distinct
  • Repetition: Visual elements of the design should be repeated throughout the work
  • Intimacy: Elements that are related to each other should be placed together
  • Alignment: No element can be placed arbitrarily and should always be visually related to at least one other element
  • Hierarchy: The goal of intimacy + contrast keeps the user focused and out of sight
  • Consistency: Alignment + repetition, limit the scale of the user’s visual perception, and quickly establish a sense of familiarity with the web design language

Here first ‘steal’ some pictures, original portal: juejin.cn/post/699656…