css summary 3

1 A block element excludes other elements and its line, can accommodate other block elements and line elements inside, has height and width, and can have MARGIN attributes in four directions,
such as DIV, P, H1-H6, HR, etc. are block elements;

2 lines Elements can be one line, cannot contain block elements, cannot define height and width, can define MARGIN-LEFT, MARGIN-RIGHT, cannot define MARGIN-TOP and MARGIN-TOP;

common tags are SPAN, STRONG, S, U, A, EM

3 Use DISPLAY:inline inline element display:block block element;
inline-block:inline block element, has the following characteristics:
    1) WIDTH and height can be defined;
    2) It can be in line with other inline elements;
   common are IMG tags and INPUT tags
<style type="text/css">
        span
        {
            display:inline-block;
            width:60px;
            height:100px;
            background-color:red;
        }
    </style>
</head>
<body>
    <span></span >
    <span></span>
    <span></span>

4 The difference between display:none and visibility:hidden; display:none means that the space is completely lost, and visibility:hidden means that it cannot be seen, but still occupies space;

5 display :table-cell, can center the image vertically
<style type="text/css">
        div
        {
            display:table-cell;
            width:150px;
            height:150px;
            border:1px solid gray;
            vertical-align:middle;
            text- align:center;
        }
        img{vertical-align:middle;}
        div+div{border-left:none;}
    </style>
</head>
<body>
    <div><img src="images/haizei1.png" alt=""/></div>
    <div><img src="images/haizei2.png" alt=""/></div>
    <div><img src="images/haizei3.png" alt=""/></div>

6 等高布局
    可以使用display:table-cell完成；
<style type="text/css">
        #wrapper{display:table-row;}
        #img-box
        {
            display:table-cell;
            vertical-align:middle;     /*垂直居中*/
            text-align:center;        /*水平居中*/
            width:150px;
            border:1px solid red;
        }
        #text-box
        {
            display:table-cell;
            width:200px;
            border:1px solid red;
            border-left:none;
            padding:10px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="img-box">
            <img src="images/haizei1.png" alt=""/ >
        </div>
        <div id="text-box">
            <span>"ONE PIECE" (One Piece, One Piece), referred to as "OP", is a juvenile comic work by Japanese cartoonist Eiichiro Oda. Serialized in Weekly Shonen Jump on the 34th, 1997. It describes the story of a young Luffy with a rubber body and a straw hat, who aims to become "One Piece" and embarks on an adventure in the sea with his companions. </span>
        </div>

    As you can see, the heights of the two DIVs are the same, they are automatically adapted, and the height is determined by the largest one in the content;

7 Automatically bisect the element
    as the parent element {display:none};
    the child element {dispplay:table- cell;}
      If the parent element is given a certain height, the width of the parent element will be automatically divided equally according to the number of child elements;
   <

        {
            list-style-type:none;
            display:table;
            width:300px;
        }
        li
        {
            display: table-cell;
            height:60px;
            line-height:60px;
            text-align:center;
            color:White;
        }
        ul li:nth-child(1){background-color:Red;}
        ul li:nth-child(2){background-color:Orange;}
        ul li:nth-child(3){background-color:Blue;}
        ul li:nth-child(4){background-color:silver;}
        ul li:nth-child(5){background-color:Purple;}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>

8 去除INLINE-BLOCK元素间距
    <style type="text/css">
        *{padding:0;margin:0;}
        ul{list-style-type:none; font-size:0;}
        li
        {
            display:inline-block;
            width:60px;
            height:60px;
            line-height:60px;
            font-size:30px;
            text-align:center;
            color:White;
            background-color:Purple;
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>

设置父元素：font-size:0去除

Guess you like