HTML5权威指南读书笔记12（第21章）--创建布局postion，z-index，column-count，display：flex，box-flex、algin、pack，table

本文链接：https://blog.csdn.net/weixin_43745804/article/details/110100806

1、概述

在这里插入图片描述

2、定位内容的位置

在这里插入图片描述

<head>
    <style type="text/css">
    	<!--使用static和默认属性一致-->
        div{ position: static; top: 50px; left: 150px; width: 400px; height: 400px; border: 3px solid red;}
        <!--使用absolute和产生偏移，四个方向起作用-->
        div{ position: absolute; top: 50px; left: 150px; width: 400px; height: 400px; border: 3px solid red;}
        <!--使用relative和相对父级元素产生偏移，四个方向起作用-->
        img{ position: relative; top: 50px; left: 150px; border: 3px solid red;}

    </style>    
</head>
<body>
    <div>
        <img src="images/gril03.jpg">

    </div>

</body>

3、z-index设置元素的层叠顺序

z-index可以为负值，值越小，越靠后

<head>
    <style type="text/css">
        .myimg{z-index: 3; position: absolute;}
        .myz{z-index: -3;position: absolute; width: 300px; height: 300px; background-color: red;}
    </style>    
</head>
<body>
    <div class="myimg">
        <img src="images/gril03.jpg">
    </div>
    <div class="myz">dfa</div>
</body>

4、插播个float图文混排

在这里插入图片描述

<head>
    <style type="text/css">
        img{ float: left; margin: 5px; }
        p{ text-align: left; }
    </style>    
</head>
<body>
    <div>
        <p>随着Python应用越来越广泛，学习Python相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，比较知名的网站如知乎、豆瓣、果壳等，再加
            <img src="./images/gril03.jpg"/>上之前自己数据分hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
            hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
            hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
            hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，比较知名的网站如知结合数据分析可视化进行深入研究。</p>
    </div>
</body>

5、column-count创建多列布局

在这里插入图片描述

<head>
    <style type="text/css">
        img{ float: left; margin: 5px; }
        p{ text-align: left; column-count: 3;  column-fill: balance; column-rule: medium solid blueviolet; column-gap: 35px;
            column-width: 95px;
        }
    </style>    
</head>
<body>
    <div>
        <p>随着Python应用越来越广泛，学习Python相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，比较知名的网站如知乎、豆瓣、果壳等，再加
            <img src="./images/gril03.jpg"/>上之前自己数据分hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
            hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
            hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
            hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，比较知名的网站如知结合数据分析可视化进行深入研究。</p>
    </div>
</body>

6、display：flex创建弹性盒布局

需要一个容器布置display：flex，容器内设置多个弹性布局元素，使用以下属性进行设置，但是在正式实现标准前必须使用display：-webit-box-flex
flex-align：对齐
flex-direction：方向
flex-order：顺序
flex-pack：
在这里插入图片描述
可伸缩元素不能包含浮动元素（float），因此为了实质上的浮动不影响到其他元素，要对可伸缩元素包裹一个容器

7、-webit-box-flex伸缩多个元素，分配多个伸缩元素空间

<head>
    <style type="text/css">
        #container{ display: -webkit-box; width: 100%; height: 400px; border: 1px solid green;}
        p{width: 50px; border:1px solid gray; padding: 15px;}<!--这里的width实际上就是装个样子，不会按照这个值显示-->
        .first{-webkit-box-flex: 3;}
        .second{-webkit-box-flex: 1;}
        .third{-webkit-box-flex: 2;}
    </style>    
</head>
<body>
    <div id="container">
        <p class="first">hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Python搭建网站，后面会</p>
        <p class="second">比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
            hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，比较知名的网站如知结合数据分析可视化进行深入研究。</p>
        <p class="third">on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Pytho</p>
    </div>
</body>

在这里插入图片描述

8、-webit-box-align处理垂直空间对齐方式

<head>
    <style type="text/css">
        #container{ display: -webkit-box; -webkit-box-direction: reverse; -webkit-box-align: end; width: 100%; height: 400px; border: 1px solid green;}   
        p{width: 50px; border:1px solid gray; padding: 15px;}
        .first{-webkit-box-flex: 3;}
        .second{-webkit-box-flex: 1;}
        .third{-webkit-box-flex: 2;}

    </style>    
</head>
<body>
    <div id="container">
        <p class="first">hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Python搭建网站，后面会</p>
        <p class="second">比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
            hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，比较知名的网站如知结合数据分析可视化进行深入研究。</p>
        <p class="third">on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Pytho</p>
    </div>
</body>

在这里插入图片描述

9、-webit-box-pack处理最大尺寸

弹性盒模型伸缩时不会超过内容元素的最大尺寸值。如果存在多余空间，浏览器会伸展元素，直到达到最大允许尺寸。box-pack定义了在所有的可伸缩元素均达到最大尺寸的情况下，多余空间依然未分配完毕时该如何处理
在这里插入图片描述

<head>
    <style type="text/css">
        #container{ display: -webkit-box; -webkit-box-pack:justify; width: 100%; height: 400px; border: 1px solid green;}   
        p{ width: 150px; max-width: 250px; border:1px solid gray; padding: 15px;}
        .first{-webkit-box-flex: 3;}
        .second{-webkit-box-flex: 1;}
        .third{-webkit-box-flex: 2;}

    </style>    
</head>
<body>
    <div id="container">
        <p class="first">hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Python搭建网站，后面会</p>
        <p class="second">比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
            hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
            同时国内用Python开发的网站越来越多，比较知名的网站如知结合数据分析可视化进行深入研究。</p>
        <p class="third">on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
            比较熟悉，所以这系列文章将讲述Pytho</p>
    </div>
</body>

10、display:table创建表格布局

在这里插入图片描述

<head>
    <style type="text/css">
        #table{ display: table;}
        div.row{display: table-row; background-color: lightcoral;}
        p{ display: table-cell; border: 1px solid gray; padding: 15px; margin: 15px;}
        img{float: left;}
    </style>    
</head>
<body>
    <div id="table">
        <div class="row">
            <p>hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
                同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
                比较熟悉，所以这系列文章将讲述Python搭建网站，后面会</p>
            <p>比较知名的网站如知析和网络爬虫一直使用的是Python，对它
                比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
                hon相关知识越来越多的人选择。最新研究，<img src="./images/gril03.jpg"/>
                Python已成为美国top高校最受欢迎的语言，
                同时国内用Python开发的网站越来越多，比较知名的网站如知结合数据分析可视化进行深入研究。</p>
            <p>on开发的网站越来越多，比较知名的网站如知析和<img src="./images/gril03.jpg"/>网络爬虫一直使用的是Python，对它
                比较熟悉，所以这系列文章将讲述Pytho</p>

        </div>
        <div class="row">
            <p>hon相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，
                同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它
                比较熟悉，所以这系列文章将讲述Python搭建网站，后面会</p>
            <p>比较知名的网站如知析和网络爬虫一直使用的是Python，对它
                比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
                hon相关知识越来越多的人选择。最新研究，<img src="./images/gril03.jpg"/>
                Python已成为美国top高校最受欢迎的语言，
                同时国内用Python开发的网站越来越多，比较知名的网站如知结合数据分析可视化进行深入研究。</p>
            <p>on开发的网站越来越多，比较知名的网站如知析和<img src="./images/gril03.jpg"/>网络爬虫一直使用的是Python，对它
                比较熟悉，所以这系列文章将讲述Pytho</p>

        </div>
        
    </div>
</body>