MIT Weblab笔记 - Advanced CSS

CSS Combinators

<div class="container">
    <section class="child" id="c1">
        <div>child 1</div>
    </section>
    <div class="child" id="c2">child 2</div>
    <div class="child" id="c3">child 3</div>
    <div class="child" id="c4">child 4</div>
</div>

Descendent Selector

Selects all elements that are descendants (children, grandchildren, etc.) of a specified element:
All <div> inside class container, which are child 1, 2, 3, 4

.container div {
    color: blue; 
}

Child Selector

Only direct <div> children of class container, which are child 2, 3, 4

.container > div {
    color: blue; 
}

Adjacent Sibling Selector

First div sibling after id c1, which are child 2

#c1 + div {
    color: blue; 
}

General Sibling Selector

All div elements that are siblings of an id c1, which are child 2, 3, 4

#c1 ~ div {
    color: blue;
}

Display Types

Block

Block makes an element behave as a block-level element. Some elements have display: block by default: <div>, <p>,<h1> to <h6>, <ul>, <ol>, <li>, <section>, <nav>

Inline

Inline elements do not start on a new line; they only take up as much width as necessary and can sit next to each other horizontally. <span>, <a>, <img> are inline by default.

Flex

Flex is a flexible box. It can control direction, sizing, distribution. All direct children of a flexible container becomes flexible items. See this demo.

Grid

Grid containers consist of grid items, placed inside columns and rows. See this demo.

None

Tells the browser to remove an element from the document. Different from visibility: hidden, which hides the element but still takes up space in the layout.

Content Overflow

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. see the demo.

Animations

Syntax: use percentages to specify intermediate steps

@keyframes animation-name {
  0% {
    /* initial styles */
  }
  50% {
    /* intermediate styles */
  }
  100% {
    /* final styles */
  }
}

Example:

<div class="container">
  <p> balabala </p>
</div>

.container {
  animation: fadeIn;
  animation-duration: 5s;
  animation-delay: 2s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

• opacity changes from 0 to 1 in 5s, after 2s.