美文网首页
HTML 5_CSS 3_JavaScript讲义（九） - 盒

HTML 5_CSS 3_JavaScript讲义（九） - 盒

作者: android小菜鸡一枚 | 来源:发表于2017-12-12 21:50 被阅读0次

    （1）.布局相关属性

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> float属性 </title>
    <style type="text/css">
        div {
            border:1px solid black;
            width: 300px;
            height: 80px;
            padding: 5px;
        }       
    </style>
</head>
<body>
<div style="float:left;">
    float:left; 浮向左边
</div>
<div style="float:left;">
    float:left; 浮向左边
</div>
<hr/>
<div style="float:right;">
    float:right; 浮向右边
</div>
<div style="float:right;">
    float:right; 浮向右边
</div>
</body>
</html>

    1.通过float属性实现多栏布局

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 多栏布局 </title>
    <style type="text/css">
        body{
            margin:0px;
        }
        div#container {
            width: 960px;
            margin:auto;
        }
        div>div {
            border: 1px solid #aaf;
            /* 设置HTML组件的width属性包括边框 */
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            border-radius: 12px 12px 0px 0px;
            background-color: #ffc;
            padding:5px;
        }
    </style>
</head>
<body>
<div id="container">
    <!-- float:left;浮向左边 -->
    <div style="float:left;width:220px">
        <h2>疯狂软件开班信息</h2>
        <ul>
            <li>2011年11月10日&nbsp;已满已开班</li>
            <li>2011年12月02日&nbsp;爆满已开班</li>
            <li>2012年02月08日&nbsp;已满已开班</li>
        </ul>
    </div>
    <!-- float:left;浮向左边 -->
    <div style="float:left;width:500px;">
        <h2>疯狂软件介绍</h2>
        &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
        &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、李韩飞、黄勇、陈辉等老师将带给广大学习者“非一般”的疯狂。
    </div>
    <!-- float:left;浮向左边 -->
    <div style="float:left;width:240px">
        <h2>公司动态</h2>
        <ul>
            <li>《疯狂Java讲义》(第2版)上市</li>
            <li>泰豪电网软件公司来校召开现场招聘会</li>
            <li>疯狂学子赴武汉光谷软件园入职</li>
            <li>新华南方来校现场招聘</li>
        </ul>
    </div>区
</div>
</body>
</html>
    image.png

    2.使用clear属性实现换行

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> clear属性 </title>
    <style type="text/css">
        div>div{
            width: 220px;
            padding: 5px;
            margin:2px;
            float:left;
            background-color: #ddd;
        }
    </style>
</head>
<body>
<div>
    <div>疯狂Java联盟</div>
    <div>疯狂软件教育</div>
    <div style="clear:both;">关于我们(设置了clear:both;)</div>
    <div>疯狂成员</div>
</div>
</body>
</html>
    image.png

    3.使用clip属性控制剪裁

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> clip属性 </title>
    <style type="text/css">
        div {
            position:absolute; 
            font-size: 30pt;
            border:2px solid black;
            background-color: #ccc;
            width: 550px;
            padding: 5px;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div style="top:0px; clip:rect(16px 400px auto 30px);">
    rect(16px 400px auto 30px);
</div> 
<div style="top:120px; clip:rect(24px 480px auto 60px);">
    rect(24px 480px auto 60px);
</div> 
<div style="top:240px; clip:rect(36px 520px auto 90px);">
    rect(36px 520px auto 90px);
</div> 
<div style="top:360px; clip:rect(36px auto auto 120px);">
    rect(36px auto auto 120px);
</div> 
</body>
</html>
    image.png

    4.控制组件的滚动条

    overflow overflow-x overflow-y

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> overflow属性 </title>
    <style type="text/css">
        div {
            width: 300px;
            height: 70px;
            border: 1px solid black;
            white-space: nowrap;
            margin: 15px;
        }
    </style>
</head>
<body>
<div>
    <h3>不设置overflow属性</h3>
    测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow:hidden;">
    <h3>overflow:hidden;</h3>
    测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow:auto;">
    <h3>overflow:auto;</h3>
    测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow-x:hidden">
    <h3>overflow-x:hidden;</h3>
    测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow-y:hidden">
    <h3>overflow-y:hidden;</h3>
    测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</body>
</html>
    image.png

    （2）.盒模型和display属性

    1.两种最基本的盒模型

    block类型: 默认占据一行
    inline类型：允许在一行放置多个组件,通过CSS设置高度和宽度不起作用

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 基础盒模型 </title>
    <style type="text/css">
        div,span{
            width: 300px;
            height: 40px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div>div元素一</div>
<div>div元素二</div>
<span>span元素一</span>
<span>span元素二</span>
</body>
</html>
    image.png

    2.none值

    display:none 隐藏目标对象
    visibility属性：hidden和visible 元素页面的空间依旧会保留

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 隐藏元素 </title>
    <style type="text/css">
    /* 设置div元素的宽度、高度、背景色和边框 */
    div{
        width:300px;
        height:40px;
        background-color:#ddd;
        border:2px solid black;
    }
    </style>
</head>
<body>
<input type="button" value="隐藏" 
    onclick="document.getElementById('test1').style.display='none';"/>
<input type="button" value="显示" 
    onclick="document.getElementById('test1').style.display='';"/>
<div id = "test1">
    使用display控制对象的显示和隐藏
</div>
<input type="button" value="隐藏"
    onclick="document.getElementById('test2').style.visibility ='hidden'"/>
<input type="button" value="显示"
    onclick="document.getElementById('test2').style.visibility ='visible'"/>
<div id = "test2">
    使用visibility控制对象的显示和隐藏
</div>
<hr/>
</body>
</html>
    image.png
    image.png

    3.inline-block盒模型

    既不会占一行，同时也可以支持width,height指定高度和宽度
    默认情况下inline-block盒模型的组件将会采用底部对齐的方式，底部在同一条水平线上，可使用vertical-align:top实现顶部对齐

    实现一个横向排列的导航菜单

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 导航菜单 </title>
    <style type="text/css">
        body>div{
            text-align: center;
            margin: auto;
        }
        div>div{
            /* 设置为inline-block盒模型，保证一行显示 */
            display: inline-block;
            border: 1px solid black;
        }
        a {
            text-decoration:none;
            /* 设置为block盒模型，允许设置高度、宽度 */
            display: block;
            width: 120px;
            padding: 10px;
            /* 设置默认背景色 */
            background-color: #eee;
        }
        a:hover {
            /* 设置鼠标悬停时的背景色 */
            background-color: #aaa;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div>
    <div>
        <a href="http://www.crazyit.org">疯狂Java联盟</a>
    </div>
    <div>
        <a href="http://www.fkjava.org">疯狂软件教育</a>
    </div>
    <div>
        <a href="http://www.fkjava.org/companyInfo.html">关于我们</a>
    </div>
    <div>
        <a href="http://www.crazyit.org">疯狂成员</a>
    </div>
</div>
</body>
</html>
    image.png

    4.inline-table盒模型

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> inline-table盒模型 </title>
    <style type="text/css">
        td {
            border: 1px solid black;
        }
        table{
            width: 360px;
            border-collapse: collapse;
            /* 设置表格显示为inline-table盒模型 */
            display: inline-table;
            /* 设置顶端对齐 */
            vertical-align: top;
        }
    </style>
</head>
<body>
前面内容
<table style="">
    <tr><td>疯狂Java讲义</td><td>疯狂Ajax讲义</td></tr>
    <tr><td>疯狂XML讲义</td><td>疯狂Android讲义</td></tr>
</table>
后面内容
</body>
</html>
    image.png

    5.表格相关的盒模型

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 表格相关的盒模型 </title>
    <style type="text/css">
        div>div {
            display: table-row;
            padding: 10px;
        }
        div>div>div{
            display: table-cell;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div style="display:table;width:400px;">
    <div style="display:table-caption;">疯狂Java体系图书</div>
    <div>
        <div>疯狂Java讲义</div>
        <div>疯狂Android讲义</div>
    </div>
    <div>
        <div>疯狂Ajax讲义</div>
        <div>疯狂XML讲义</div>
    </div>
<div>
</body>
</html>
    image.png

    6.list-item盒模型

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> list-item </title>
    <style type="text/css">
        /* 设置div以list-item的盒模型显示 */
        div{
            display: list-item;
            list-style-type: square;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div>疯狂Java讲义</div>
    <div>疯狂Android讲义</div>
    <div>轻量级Java EE企业应用实战</div>
</body>
</html>
    image.png

    通过list-item盒模型实现多级列表的效果

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 多级列表 </title>
    <style type="text/css">
        body>div{
            display: list-item;
            list-style-type: disc ;
            margin-left: 20px;
        }
        div>div{
            display: list-item;
            list-style-type: square;
            margin-left: 40px;
        }
    </style>
</head>
<body>
<div id="div1">
    疯狂Java体系图书
    <div>疯狂Java讲义</div>
    <div>疯狂Android讲义</div>
    <div>轻量级Java EE企业应用实战</div>
</div>
<div id="div2">
    疯狂Java相关
    <div>疯狂Java联盟</div>
    <div>疯狂软件教育</div>
    <div>疯狂Java实训营</div>
</div>
</body>
</html>
    image.png

    7.run-in盒模型

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> run-in </title>
    <style type="text/css">
        span {
            border: 2px solid gray;
            width: 200px;
            height: 40px;
            margin: 8px;
        }
        /* 为div元素定义边框、高度、宽度 */
        div {
            border: 1px solid black;
            width: 400px;
            height: 60px;
        }
    </style>
</head>
<body>
    <span style="display:run-in;">display:run-in</span>
    <div>block的div</div>
    <span style="display:run-in;">display:run-in</span>
    <div style="display:inline-block;">inline-block的div</div>
</body>
</html>
    image.png

    （3）.对盒添加阴影

    1.使用box-shadow属性

    hOffset:控制阴影在水平方向的偏移
    vOffset:控制阴影在竖直方向的偏移
    blurLength:控制阴影的模糊程度
    scaleLength:控制阴影的缩放程度
    color:控制阴影的颜色

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> box-shadow属性 </title>
    <style type="text/css">
        div {
            width: 300px;
            height: 50px;
            border: 1px solid black;
            margin: 30px;
        }
    </style>
</head>
<body>
<div style="box-shadow: -10px -8px 6px #444;">
    box-shadow: -10px -8px 6px #444;（左上阴影）
</div>
<div style="box-shadow: 10px -8px 6px #444;">
    box-shadow: -10px 8px 6px #444;（右上阴影）
</div>
<div style="box-shadow: -10px 8px 6px #444;">
    box-shadow: -10px 8px 6px #444;（左下阴影）
</div>
<div style="box-shadow: 10px 8px 6px #444;">
    box-shadow: 10px 8px 6px #444;（右下阴影）
</div>
<div style="box-shadow: 10px 8px #444;">
    box-shadow: box-shadow: 10px 8px #444;（右下阴影，不指定模糊程度）
</div>
<div style="box-shadow: 10px 8px 20px #444;">
    box-shadow: 10px 8px 20px #444;（右下阴影、增大模糊程度）
</div>
<div style="box-shadow: 10px 8px 10px -10px red;">
    box-shadow: 10px 8px 10px -10px red;（右下阴影、缩小阴影区域）
</div>
<div style="box-shadow: 10px 8px 20px 15px red;">
    box-shadow: 10px 8px 20px 15px red;（右下阴影、放大阴影区域）
</div>
</body>
</html>
    image.png

    2.对表格及单元格添加阴影

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> box-shadow属性 </title>
    <style type="text/css">
        table {
            width: 500px;
            border-spacing: 10px;
            box-shadow: 10px 10px 6px #444; 
        }
        td {
            box-shadow: 6px 6px 4px #444; 
            padding: 5px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>疯狂Java讲义</td>
        <td>疯狂Android讲义</td>
    </tr>
    <tr>
        <td>轻量级Java EE企业应用实战</td>
        <td>疯狂Android讲义</td>
    </tr>
</table>
</html>
    image.png

    （4）.CSS3多栏布局

    1.CSS3新增的分栏功能

    column-count

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 分栏布局 </title>
    <style type="text/css">
        div#content {
            column-count: 2;
            -moz-column-count: 2;
            -o-column-count: 2;
            -webkit-column-count: 2;
        }
    </style>
</head>
<body>
<div id="content">
    <h2>疯狂软件介绍</h2>
    &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
    &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、李韩飞、黄勇、陈辉等老师将带给广大学习者“非一般”的疯狂。
</div>
</body>
</html>
    image.png

    columns:复合属性，同时指定栏目宽度和栏目数
    column-width:指定每个栏目的宽度
    column-count:指定栏目数
    column-rule:用于指定个栏目之间的分隔条
    column-rule-width:用于指定栏目之间分割条的宽度
    column-rule-style:设置分隔条的线型
    column-rule-color
    column-gap:指定各栏目之间的间距

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 分栏布局 </title>
    <style type="text/css">
        div#container{
            width: 1100px;
            border: 1px solid black;
        }
        div#content {
            /* 设置栏目数， 以及各栏目的宽度*/
            columns: 240px 3;
            -moz-columns: 240px 3;
            -o-columns: 240px 3;
            -webkit-columns: 240px 3;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="content">
        <h2>疯狂软件介绍</h2>
        &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
        &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、李韩飞、黄勇、陈辉等老师将带给广大学习者“非一般”的疯狂。
    </div>
</div>
</body>
</html>
    image.png

    示范更复杂的分栏属性

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 分栏布局 </title>
    <style type="text/css">
        div#container{
            margin:auto;
            width: 840px;
            border: 1px solid black;
        }
        div#content {
            /* 设置栏目数， 以及各栏目的宽度*/
            columns: 240px 3;
            -moz-columns: 240px 3;
            -o-columns: 240px 3;
            -webkit-columns: 240px 3;
            /* 设置栏目之间的间距*/
            column-gap: 50px;
            -moz-column-gap: 50px;
            -o-column-gap: 50px;
            -webkit-column-gap: 50px;
            /* 设置栏目之间的分隔条*/
            column-rule: 10px inset #aaa;
            -moz-column-rule: 10px inset #aaa;
            -o-column-rule: 10px inset #aaa;
            -webkit-column-rule: 10px inset #aaa;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="content">
        <h2>疯狂软件介绍</h2>
        &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
        &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、李韩飞、黄勇、陈辉等老师将带给广大学习者“非一般”的疯狂。
    </div>
</div>
</body>
</html>
    image.png

    2.使用盒模型实现多栏布局

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 盒模型实现多栏布局 </title>
    <style type="text/css">
        body{
            margin:0px;
        }
        div#container {
            display: box;
            display: -moz-box;
            display: -webkit-box;
            width: 960px;
            text-align: left;
        }
        #container>div {
            border: 1px solid #aaf;
            /* 设置HTML组件的width属性包括边框 */
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            border-radius: 12px 12px 0px 0px;
            background-color: #ffc;
            padding:5px;
        }
    </style>
</head>
<body>
<div style="margin:auto;text-align:center;">
    <div id="container">
        <div style="width:220px">
            <h2>疯狂软件开班信息</h2>
            <ul>
                <li>2011年11月10日&nbsp;已满已开班</li>
                <li>2011年12月02日&nbsp;爆满已开班</li>
                <li>2012年02月08日&nbsp;已满已开班</li>
            </ul>
        </div>
        <div style="width:500px;">
            <h2>疯狂软件介绍</h2>
            &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
            &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、李韩飞、黄勇、陈辉等老师将带给广大学习者“非一般”的疯狂。
        </div>
        <div style="width:240px">
            <h2>公司动态</h2>
            <ul>
                <li>《疯狂Java讲义》(第2版)上市</li>
                <li>泰豪电网软件公司来校召开现场招聘会</li>
                <li>疯狂学子赴武汉光谷软件园入职</li>
                <li>新华南方来校现场招聘</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
    image.png

    box-orient:设置box盒模型里子元素的排列方向,有horizontal,vertical
    box-ordinal-group:设置boxhe盒模型里子元素的显示顺序
    box-flex:设置box盒模型里子元素自适应宽度的比例

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 垂直排列 </title>
    <style type="text/css">
        div#container {
            border: 1px solid black;
            padding: 5px;
            width: 600px;
            height: 140px;
            display: box;
            display: -moz-box;
            display: -webkit-box;
            box-orient: vertical;
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;
        }
        div>div {
            border: 1px solid #aaf;
            /* 设置HTML组件的width属性包括边框 */
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            border-radius: 12px 12px 0px 0px;
            padding:5px;
        }
    </style>
</head>
<body>
<div id="container">
    <div>栏目一</div>
    <div>栏目二</div>
    <div>栏目三</div>
</div>
</body>
</html>
    image.png

    将boxhe盒模型里子元素排列方式改为水平排列,使用box-ordinal-group属性指定元素的显示顺序

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 水平排列 </title>
    <style type="text/css">
        div#container {
            border: 1px solid black;
            padding: 5px;
            width: 600px;
            height: 140px;
            display: box;
            display: -moz-box;
            display: -webkit-box;
            box-orient: horizontal;
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
        }
        div>div {
            border: 1px solid #aaf;
            /* 设置HTML组件的width属性包括边框 */
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            border-radius: 12px 12px 0px 0px;
            padding:5px;
        }
    </style>
</head>
<body>
<div id="container">
    <div style="box-ordinal-group:2;-moz-box-ordinal-group:2;
    -webkit-box-ordinal-group:2;">栏目一</div>
    <div style="box-ordinal-group:1;-moz-box-ordinal-group:1;
    -webkit-box-ordinal-group:1;">栏目二</div>
    <div style="box-ordinal-group:2;-moz-box-ordinal-group:3;
    -webkit-box-ordinal-group:3;">栏目三</div>
</div>
</body>
</html>
    image.png

    使用box-flex属性可以让box盒模型中的子元素自动占满整个父容器

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 水平排列 </title>
    <style type="text/css">
        div#container {
            border: 1px solid black;
            padding: 5px;
            width: 600px;
            height: 140px;
            display: box;
            display: -moz-box;
            display: -webkit-box;
            box-orient: horizontal;
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
        }
        div>div {
            border: 1px solid #aaf;
            /* 设置HTML组件的width属性包括边框 */
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            border-radius: 12px 12px 0px 0px;
            padding:5px;
        }
    </style>
</head>
<body>
<div id="container">
    <div style="box-flex:1;-moz-box-flex:1;
    -webkit-box-flex:1;">栏目一</div>
    <div>栏目二</div>
    <div style="box-flex:3;-moz-box-flex:3;
    -webkit-box-flex:3;">栏目三</div>
</div>
</body>
</html>
    image.png

    相关文章

      网友评论

          本文标题：HTML 5_CSS 3_JavaScript讲义（九） - 盒

          本文链接：https://www.haomeiwen.com/subject/kpfnixtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|HTML 5_CSS 3_JavaScript讲义（九） - 盒|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！