SOURCE

console 命令行工具 X clear

                    
>
console
<article>
<h1>Inline Elements</h1>
<p>Inline elements occupy the space required by the content, and nothing more. They do not take width and height values.</p>

<h2>Example</h2>
<p>Anchor tags are inline elements: they take up the width required by their content and not the entire width of the page.</p>

<div class="border">
  <a href="#">Home</a>
  <a href="#">Portfolio</a>
  <a href="#">Contact</a>
</div>
  
  <h2>What happens when we set a margin on an inline-level element?</h2>
  <p>Inline elements ignore top and bottom margins but observe the left and right margins.</p>
  
  <div class="border margins">
    <a href="#">Home</a>
    <a href="#">Portfolio</a>
    <a href="#">Contact</a>
  </div>
  
  <p>In the above example, we requested a margin of 30px on all sides. However, the browser ignored the top and bottom margins.</p>
  
  <h2>What about padding?</h2>
  <div class="border padding">
    <a href="#">Home</a>
    <a href="#">Portfolio</a>
    <a href="#">Contact</a>
  </div>
  <p>Inline elements accept padding on all sides.</p>
  
  <h2>Floating Inline Elements</h2>
  <div class="border floating-inline">
    <a href="#">Home</a>
    <a href="#">Portfolio</a>
    <a href="#">Contact</a>
  </div>
  <p>Floating an inline element changes its display value to block, which makes it subject t all block-level characteristics. Thus, floated inline elements can take margins, padding, heights, and widths.</p>
  
  <h1>Block Elements</h1>
  <p>Block-level elements require the entire width of the page and always start with a new line. They can have margins and padding. When you omit the width, block elements expand to fill their parent container's natural width; when you omit the height, they expand to fit the content.</p>
  <h2>Example</h2>
  <p><code>div</code> elements are block-level</p>
  
  <div class="box-1"> This div has no explicit width or height.</div>
  
  <p>Without an explicit width or height, the box fills the entire width and uses as much height as it needs to fit the content.</p>
  
  <div class="box-2">
    This div has no explicit width but a height of 60px; it also has both padding and margins of 20px on all sides.
  </div>
    <p>With an explicit height of 60px plus margins and padding, the box still fills the entire width (including the padding and margins), but now requires the requested height.</p>
  
  <div class="box-3">
    This div has a width of 90px and no explicit height.
  </div>
  
  <p>With an explicit width of 90px, the box collapses down to 90px width but expands the height to ensure the text still fits.</p>
  
  <div class="box-4">
    <p>This div has a width of 180px and a height of 120px; it also has both padding and margins of 20px on</p>
  </div>
  
  <p>With an explicit width of 180px and height of 120px, the box take on the requested dimensions. However, the content can overflow the box as it does here.</p>
  
  <h2>Floating Block Elements</h2>
  <h3>Floating block elements with no width or height</h3>
  
  <div class="fl box1">
    Box - 1 - Floated Left
  </div>
  
  <div class="fl box2">
    Box - 2 - Floated Right
  </div>
  
  <p>Floated block-level elements that don't have a width collapse down to the width required by the content. Thus, multiple floated blocks can fit on the same line as shown above where we float one item left and the other right.</p>
  
  <h3>Flosting block elements with width and height set.</h3>
  
  <div class="box1 float">Box - 1 - Floated Left</div>
  <div class="box2 float">Box - 2 - Floated Right</div>
  <p>When you specify the widths on floated block-level elements, the browser will observe the widths. In the above example, our blocks have widths of 40% and 50%.</p>
  
  <h3>Can we change an inline element into a block element?</h3>
  <p>Let's use the anchor tag as an example.</p>
  
  <div class="block anchors">
    <ul>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </ul>
  </div>
  
  <p>Yes, we can change a block element to an inline and vice versa. You can change the <code>display</code> property regardless of the previous value.</p>
  
  <h2>Inline-Block Elements</h2>
  <p>Inline-block elements are inline elements that take on most block properties, such as width and height.</p>
  
  <h3>Example</h3>
  <p>Let's use <code>inline-block</code> to create a navigation bar:</p>
  
  <div class="inlineblock">
    <ul>
      <a href="#">Home</a>
      <a href="#">Portfolio</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </ul>
  </div>
  
  <p>We achieved similar results when we floated the anchor elements. It's as though you get two elements in one: you have the flow properties of inline elements combined with most properties of block elements.</p>
  
  <section id="floats">
    <h2>Floats and Positioning Elements</h2>
  </section>
  
  <h3>Floats</h3>
  <p>The browser removes floated elements from the normal flow. Floated elements automatically become block-level elements with change: two or more floated elements can fit on the same line.</p>
  
  <h3>Example</h3>
  <div class="top box1">Box 1</div>
  <div class="top box2">Box 2</div>
  <div class="box3">Box 3</div>
  
  <p>Elements that follow a floated element wrap around it. However, we don't want this behavior above, so we applied clear:both property to the third div. There are two other values for clear, left and right, but we typically want both.</p>
  
  <p>There are other ways to clear floats. One technique is the <strong>clearfix</strong> method:</p>
 <pre>
  <code>
          elementName::after {
            content: " ";
            display:block;
            clear: both;
          }
  </code>
 </pre>
  <p>Here we append the ::after pseudo-element to the parent element's selector.</p>
  
  <h2>Positioning</h2>
  <p>We sometimes want to position elements at specific locations on the page. The normal page flow and floats can't do this with the precision we often want. We can use CSS positioning in this case. There are four positioning types:</p>
  <ul>
    <li><i>Static</i></li>
    <li><i>Fixed</i></li>
    <li><i>Relative</i></li>
    <li><i>Absolute</i></li>
  </ul>
  
  <h2>Static Positioning</h2>
  <p>The element renders at its normal position on the page. That is, the browser uses the standard page flow. All elements default tom static positioning.</p>
  
  <h2>Fixed Positioning</h2>
  <p>Lets you place an element at a fixed position in the browser window; it will remain in place even when you scroll the page. You need the top, bottom, right, and left properties to position the element.

The browser removes elements with fixed positioning from the page flow. It does not leave a gap in the location where the browser would have positioned it otherwise.

The blue box on the bottom-left corner of the page is a fixed position element.</p>
  
  <h2>Relative Positioning</h2>
  <p>Relative positioning positions an element at a location relative to its normal position. Unlike fixed positioning, relative positioning does not remove an element from the page flow; in fact, you can observe a gap in the flow indicating the original position.</p>
  <div class="wrapper"></div>
  <div class="relbox">I use relative positioning.</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non cumque repellat sapiente vitae nihil debitis accusamus, odit, tempore id reiciendis consequatur necessitatibus veritatis, distinctio vel, cum repellendus numquam blanditiis perferendis?</p>
  
  <h2>Absolute Positioning</h2>
  <p>Absolute positioning removes an element from the normal page flow and positions it at an absolute position relative to its parent element. If the parent element is the <body>, the position is absolute relative to the complete page.</p>
<div>
  <div class="abs-box">I use absolute positioning.</div>
</div>
<p>The green box shows uses absolute positioning.</p> 
</article>
article {
  border: 1px solid black;
  padding: 1rem;
}

.fl.box1 {
  float: left;
  background-color: dodgerblue;
  border: 1px solid red;
  color: white;
}

.fl.box2 {
  color: white;
  background-color:red;
  float: right;
}

.box1.float {
  background-color: tomato;
  color: white;
  padding: 30px;
  float: left;
  width: 40%;
  box-sizing: border-box;
}

.box2.float  {
  background-color: dodgerblue;
  color: white;
  padding: 30px;
  float: right;
  width: 50%;
  overflow: hidden;
  box-sizing: border-box;
}

h1, h2, h3 {
  font-family: sans-serif;
  color: #ce4a4a;
}

.border {
  border: 2px dashed black;
  padding: 1.8rem;
  width: 75%;
  margin-left: 1rem;
}

a {
  text-decoration: none;
  color: black;
}

p {
  margin: 2rem 0;
  clear: both;
}

.border a {
  padding: 0.1rem;
}

.border.margins a {
  margin:  30px;
}

.border.padding a {
  background-color: green;
  color: white;
  padding: 30px;
}

.border.floating-inline {
  height: 115px;
}

.border.floating-inline a {
  color: white;
  background-color: green;
  float: left;
  padding: 30px;
  margin: 15px;
  border: 3px solid darkgreen;
}

.box-1 {
  background-color: blue;
  color: white;
}

.box-2 {
  box-sizing: border-box;
  background-color: green;
  color: white;
  height: 60px;
  padding: 20px;
  margin: 20px;
}

.box-3 {
  background-color: tomato;
  width: 90px;
  color: white;
}

.box-4 {
  box-sizing: border-box;
  background-color: pink;
  color: white;
  height: 120px;
  width: 180px;
  padding: 20px;
}

.block.anchors a {
  background-color: dodgerblue;
  color: white;
  display: block;
  margin: 10px;
  text-align: center;
  padding: 10px;
}

.inlineblock a {
  padding: 1.5rem 3rem;
  margin: 0.25rem;
  background-color: dodgerblue;
  color: white;
}

section#floats {
  border-top: 2px dashed black;
}

section#floats h2 {
  margin-left: 25%;
}

.top {
  padding: 30px;
  box-sizing: border-box;
  color: white;
}

.top.box1 {
  background-color: orange;
  width: 50%;
  float: left;
  text-align: center;
}

.top.box2 {
  background-color: dodgerblue;
  float: right;
  width: 50%;
  text-align: center;
}

.box3 {
  background-color: green;
  clear: both;
  padding: 20px;
  text-align: center;
  color: white;
}

.relbox {
  box-sizing: border-box;
  display: inline-block;
  color: white;
  position: relative;
  padding: 1.5rem 3rem;
  bottom: -45px;
  border-radius: 10px;
  right: 90px;
  background-color: orange;
  padding: 25px 35px;
  margin-bottom: 30px;
  width: 325px;
}

.abs-box {
  position: absolute;
  backround-color: green;
  color: white;
  left: 230px;
  margin-bottom: 30px;
  padding: 25px 35px;
  top: -30px;
  width: 200px;
}