最新公告
  • 欢迎您光临立业阁,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 盒子内部对齐box-pack属性与box-align属性详解_css教程


    本篇文章给大家带来的内容是关于盒子内部对齐box-pack属性与box-align属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    当弹性元素与非弹性元素混合排版时,有可能会出现所有子元素的尺寸大于或小于盒子的尺寸,从而出现盒子空间不足或者富余的情况。这时就需要一种方法来管理盒子的空间。如果子元素的总尺寸小于盒子的尺寸,则可以使用box-align和box-pack属性进行管理。

    CSS3新增的box-pack属性和box-align属性,分别用于定义盒元素内部“子元素”的水平方向和垂直方向上的富余空间管理方式。这些对齐方式,对盒元素内部的文字、图形以及子元素都是有效的。

    一、水平对齐box-pack属性

    box-pack属性可以在水平方向上对盒子的富余空间进行管理。

    二、垂直对象box-align属性

    box-align属性可以在垂直方向上对盒子的富余空间进行管理。

    三、实际应用

    在CSS2中,如果想要让文字垂直居中,往往都是设置height属性值等于line-height属性值 ,不过学习了这一节,我们只要让div元素使用box-align属性(排列方向默认为horizontal),文字就可以垂直居中了。

    举例1:文字自适应居中(包括垂直居中和水平居中)

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>盒子内部对齐box-pack属性与box-align属性</title>
        <style type="text/css">
            div
            {
                width:200px;
                height:160px;
                display:-webkit-box;
                -webkit-box-align:center;
                -webkit-box-pack:center;
                background-color:pink;
            }
        </style>
    </head>
    <body>
        <div>php中文网</div>
    </body>
    </html>

    微信截图_20181023144035.png

    举例2:图片自适应居中(包括垂直居中和水平居中)

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>盒子内部对齐box-pack属性与box-align属性</title>
        <style type="text/css">
            #control
            {
                margin-bottom:10px;
            }
            #view
            {
                width:160px;
                height:100px;
                display:-webkit-box;
                -webkit-box-orient:horizontal;
                -webkit-box-align:center;
                -webkit-box-pack:center;
                border:1px solid silver;
            }
        </style>
        <script src="jquery-1.11.3.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#range_width").change(function () {
                    var num = $(this).val();
                    $("#value_width").text(num + "px");
                    $("#view").css("width", num + "px");
                });
                $("#range_height").change(function () {
                    var num = $(this).val();
                    $("#value_height").text(num + "px");
                    $("#view").css("height", num + "px");
                });
            })
        </script>
    </head>
    <body>
        <div id="control">
            宽度:<input id="range_width" type="range" min="160" max="320" value="160"/><span id="value_width">160px</span><br />
            高度:<input id="range_height" type="range" min="100" max="240" value="100"/><span id="value_height">100px</span>
        </div>
        <div id="view"><img src="../App_images/lesson/run_css3/css3.png" alt=""/></div>
    </body>
    </html>

    13-6-2.png

    以上就是对盒子内部对齐box-pack属性与box-align属性详解的全部介绍,如果您想了解更多有关CSS3视频教程,请关注liyege。

    以上就是盒子内部对齐box-pack属性与box-align属性详解的详细内容,

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 1162会员总数(位)
    • 111858资源总数(个)
    • 8本周发布(个)
    • 2 今日发布(个)
    • 241稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    冀ICP备19022365号-1 百度地图

    [email protected]

    立业阁(www.liyege.cn)免费提供wordpress主题模板、dedecms模板、帝国cms模板、小说网站源码、电影网站源码以及网络技术分享,建站源码,小说模板,电影模板,网赚教程,VPS推荐