盒布局(1)

最新推荐文章于 2022-12-15 21:15:30 发布

uncle_Huang

最新推荐文章于 2022-12-15 21:15:30 发布

阅读量104

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/uncle_Huang/article/details/96473728

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

盒布局(1)

inline-block类型
inline-block类型盒属于block盒的一种，但是在显示时具有inline类型盒的特点
用法：
display:inline-block；
使用inline-block类型可以直接将两个div元素进行并列显示，不需要使用float属性，也不需要使用clear属性。
默认情况下使用inline-block类型时并列显示的元素的垂直对齐方式是底部对齐，为了让对齐方式改成顶部对齐，还要给div元素的样式中加入vertical-align属性

使用inline-block类型来执行分列显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒布局</title>
    <style type="text/css">
    @font-face {
        font-family: webfont;
        src: url(毛泽东字体.ttf);
    }
    *{
        font-family: webfont;
    }
    h1{
        text-shadow: 10px 10px 10px rgba(224, 160, 160, 0.411),20px 20px 20px rgba(0, 128, 0, 0.829) ;
        font-style: oblique;
        font-size: 50px;
    }
    /* div{
        width: 150px;
        height: 50px;
        background: rgba(224, 160, 160, 0.411);
        
    } */
    div .div1{
        width:200px;
        display: inline-block; 
        background: rgba(224, 160, 160, 0.411);
        /* float:left; */
    }
    div .div2{
        vertical-align: top;
        width:200px;
        display: inline-block; 
        background: rgba(0, 128, 0, 0.829);
        /* float:left; */
    }
    div .div3{
        display: yellow;
        clear: both;
    }
    /* span{     
        background: rgba(0, 128, 0, 0.829);
    } */
    </style>
</head>
<body>
   <h1>魔道祖师</h1>
   <div>
        <div class="div1">文案：
            前世的魏无羡万人唾骂，声名狼藉。被护持一生的师弟带人端了老巢，
            纵横一世，死无全尸。曾掀起腥风血雨的一代魔道祖师，重生成了一个……
            脑残。
            还特么是个人人喊打的断袖脑残！
        </div>
        <div class="div2">
            我见诸君多有病，料诸君见我应如是。
        </div>
        <div class="div3">
                但修鬼道不修仙，任你千军万马，十方恶霸，九州奇侠，高岭之花，
                但凡化为一抔黄土，统统收归旗下，为我所用，供我驱策！

        </div>
        <!-- <span> 曾掀起腥风血雨的一代魔道祖师，重生成了一个……
            脑残。
            还特么是个人人喊打的断袖脑残！
            我见诸君多有病，料诸君见我应如是。
            但修鬼道不修仙，任你千军万马，十方恶霸，九州奇侠，高岭之花，
            但凡化为一抔黄土，统统收归旗下，为我所用，供我驱策！</span> -->
    </div>
   
</body>
</html>

使用inline-block类型来显示水平菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒布局</title>
    <style type="text/css">
    @font-face {
        font-family: webfont;
        src: url(毛泽东字体.ttf);
    }
    *{
        font-family: webfont;
    }
    h1{
        text-shadow: 10px 10px 10px rgba(224, 160, 160, 0.411),20px 20px 20px rgba(0, 128, 0, 0.829) ;
        font-style: oblique;
        font-size: 50px;
    }
    ul{
        padding: 0;
        margin: 0;
    }
    li{
        list-style: none;
        padding: 10px 20px;
        background-color: aqua;
        border-right:2px solid violet;
        text-align: center;     
        /* float: left; */
        display: inline-block;
    }
    a{
        color: white;
        text-decoration: none;
    }
    </style>
</head>
<body>
   <h1>魔道祖师</h1>
   <ul>
       <li><a href="">第一章</a></li>
       <li><a href="">第二章</a></li>
       <li><a href="">第三章</a></li>
       <li><a href="">第四章</a></li>
       <li><a href="">第五章</a></li>
   </ul>
   
</body>
</html>

inline-table类型
用法：
display:inline-table；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒布局</title>
    <style type="text/css">
    @font-face {
        font-family: webfont;
        src: url(毛泽东字体.ttf);
    }
    *{
        font-family: webfont;
    }
    h1{
        text-shadow: 10px 10px 10px rgba(224, 160, 160, 0.411),20px 20px 20px rgba(0, 128, 0, 0.829) ;
        font-style: oblique;
        font-size: 50px;
    } 
     table{
         display: inline-table;
         vertical-align: bottom;
         width: 200px;
         height: 200px;
         border: solid 2px rgba(76, 240, 76, 0.521);
     }
     td{
         border: solid 2px pink;
         font-size:30px;
     }
    </style>
</head>
<body>
   <h1>魔道祖师</h1>
   主要人物
   <table>
       <tr>
           <td>魏</td>
           <td>无</td>
           <td>羡</td>
       </tr>
       <tr>
            <td>蓝</td>
            <td>忘</td>
            <td>机</td>
        </tr>
        <tr>
            <td>忘</td>
            <td>羡</td>
            <td>曲</td>
        </tr>
   </table>
   闪亮登场
</body>
</html>

list-item类型
可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒布局</title>
    <style type="text/css">
    @font-face {
        font-family: webfont;
        src: url(毛泽东字体.ttf);
    }
    *{
        font-family: webfont;
    }
    h1{
        text-shadow: 10px 10px 10px rgba(224, 160, 160, 0.411),20px 20px 20px rgba(0, 128, 0, 0.829) ;
        font-style: oblique;
        font-size: 50px;
    }
    div{
        display: list-item;
        list-style-type: circle;
        margin-left: 30px;
    }
    </style>
</head>
<body>
   <h1>魔道祖师</h1>
   <div>第一章</div>
   <div>第二章</div>
   <div>第三章</div>
   <div>第四章</div>
   <div>第五章</div>
</body>
</html>

run-in类型与compact类型
将元素指定为run-in类型或compact类型时，如果元素后面还有block类型的元素，run-in类型的元素将被包括在后面block类型元素的内部，而compact类型的元素将被放置在block类型元素的左边。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒布局</title>
    <style type="text/css"> 
    @font-face {
        font-family: webfont;
        src: url(毛泽东字体.ttf);
    }
    *{
        font-family: webfont;
    }
    h1{
        text-shadow: 10px 10px 10px rgba(224, 160, 160, 0.411),20px 20px 20px rgba(0, 128, 0, 0.829) ;
        font-style: oblique;
        font-size: 50px;
    }
    dl.run-in dt{
        display: run-in;
        border: solid 2px green;
        background-color: blueviolet;
    }
    dl.compact dt{
        display: compact;
        border: solid 2px green;
        background-color: blueviolet;
    }
    </style>
</head>
<body>
   <h1>魔道祖师</h1>
   <dl class="run-in">
       <dt>第一句</dt>
       <dd> 前世的魏无羡万人唾骂，声名狼藉。被护持一生的师弟带人端了老巢，
            纵横一世，死无全尸。
        </dd>
   </dl>
   <dl class="compact">
       <dt>第二句</dt>
       <dd>曾掀起腥风血雨的一代魔道祖师，重生成了一个……
            脑残。
        </dd>
   </dl>
</body>
</html>

表格相关类型

元素/所属类型	说明
table/table	整个表格
table/inline-table	整个表格可以被指定为table类型也可以是inline-table类型
tr/table-row	表格中的一行
td/table-cell	表格中的单元格
th/table-cell	单元格中的列标题
tbody/table-row-group	表格中的行的所有行
thead/table-header-group	表格中的表头部分
tfoot/table-footer-group	表格中的脚注部分
col/table-column	表格中的一列
colgroup/table-column-group	表格中的所有列
caption / table-caption	整个表格的标题

none类型
用法：
display:none;

uncle_Huang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
盒布局(1)

盒布局inline-block类型inline-block类型盒属于block盒的一种，但是在显示时具有inline类型盒的特点用法：display:inline-block；使用inline-block类型可以直接将两个div元素进行并列显示，不需要使用float属性，也不需要使用clear属性。默认情况下使用inline-block类型时并列显示的元素的垂直对齐方式是底部对齐，为了...
复制链接

扫一扫