css 小结3

1 块元素排斥其他元素与其一行，内部可以容纳其他块元素和行元素，有高度宽度，可以有四个方向的MARGIN属性，
如DIV,P,H1-H6,HR等都是块元素；

2 行元素可以一行，不能包含块元素，无法定义高度和宽度，可以定义MARGIN-LEFT,MARGIN-RIGHT，无法定义MARGIN-TOP和MARGIN-TOP；

常见的有SPAN,STRONG,S,U,A,EM标签

3 使用DISPLAY:inline 行内元素   display:block 块元素；
inline-block:行内块元素，有如下特点：
    1）可以定义WIDTH和height;
    2) 可以和其他行内元素一行；
   常见的有IMG标签和INPUT标签
<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 display:none和visibility:hidden区别；display:none为彻底的无了这个空间，visibility:hidden为看不到，但依然占据空间；

5 display:table-cell,可以让图片垂直居中
<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》（海贼王、航海王）简称“OP”，是日本漫画家尾田荣一郎作画的少年漫画作品。在《周刊少年Jump》1997年34号开始连载。描写了拥有橡皮身体戴草帽的青年路飞，以成为“海贼王”为目标和同伴在大海展开冒险的故事。</span>
        </div>

    可以看到，两个DIV的高度相等，自动适应，高度由内容中最大的决定；

7 自动平分元素
    当父元素{display:none};
    子元素{dispplay:table-cell;}
      如果父元素给定一定的高度，则父元素宽度就根据子元素的个数进行自动平均划分；
   <style type="text/css">
        *{padding:0;margin:0;}
        ul
        {
            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去除

猜你喜欢