Create the landing

What is BFC

BFC: full Block Formating Context:

It is a separate render area that has nothing to do with the outside

How do I create a BFC

  1. The value of float is not None

  2. The value of position is not static or relative

  3. The display value is inline-block, table-cell, flex, table-caption, or inline-flex

  4. The overflow value is not visible

    Functions of BFC:

    Use BFC to avoid margin overlap

    *{ margin: 0; padding: 0; } p { color: #f555; background: yellow; width: 200px; line-height: 100px; text-align:center; margin: 30px; } div{/* Activate BFC */ overflow: hidden; } <p> <div> <p> <p> <div>Copy the code

Clear float, solve the parent element height collapse problem

.par { border: 5px solid rgb(91, 243, 30); width: 300px; /* Activate BFC */ overflow: hidden; } .child { border: 5px solid rgb(233, 250, 84); width:100px; height: 100px; float: left; } <div class="par"> <div class="child"></div> <div class="child"></div> </div>Copy the code

Adaptive two-column layout

<style> *{ margin: 0; padding: 0; } body { width: 100%; position: relative; } .left { width: 100px; height: 150px; float: left; background: rgb(139, 214, 78); text-align: center; line-height: 150px; font-size: 20px; }. Right {/* Activate BFC */ overflow: hidden; height: 300px; background: rgb(170, 54, 236); text-align: center; line-height: 300px; font-size: 40px; } </style> <div class="left">LEFT</div> <div class="right">RIGHT</div>Copy the code

Second, the list

Ordered list:

<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
</ol>
Copy the code

Unordered list:

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
Copy the code

Define a list:

<dl> <dt></dt> <! -- indent --> <dd></dd> </dl>Copy the code

List item style: list-style

Attribute values meaning
none Unlist style
disc By default, the tag is a solid circle
circle The markings are hollow circles
square The markers are solid squares
decimal The marker is a number
The lower – alpha, upper – alpha Tags are upper and lower case English letters 
<style> ul{ list-style: upper-alpha; } </style> <ul> <li> My </li> <li> cat </li> </ul>Copy the code