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

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="data: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="data: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>

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

HTML5权威指南----读书笔记
<!DOCTYPE html> <html> <head><meta name = 'keywords' content="HTML5权威指南--- ...
mysql数据库权威指南_MySQL_MySQL权威指南读书笔记(三)，第二章：MYSQL数据库里面的数 - phpStudy...
MySQL权威指南读书笔记(三) 第二章:MYSQL数据库里面的数据用想用好MYSQL,就必须透彻理解MYSQL是如何看待和处理数据的.本章主要讨论了两个问题:一是SQL所能处理的数据值的类型:二是 ...
HTML5权威指南读书笔记03（第7，8章）--icon，base，锚点，一些七七八八的元素
1.使用ico图标如果标志文件位于服务器/favicon.ico(服务器根目录,则不需要link),浏览器自动匹配该文件 <link rel="shortcut icon" ...
HTTP权威指南读书笔记
<<HTTP权威指南>>读书笔记第一部分:Web的基础第1章:HTTP概述主要内容 1.什么是HTTP 2.HTTP的基本组件 HTTP HTTP:HTTP(Hypert ...
MongoDB权威指南读书笔记——CRUD
插入并保存文档插入是向MongoDB中添加数据的基本方法.可以使用Insert方法向目标集合插入一个文档:db.foo.insert({"bar" : "baz&quo ...
计算机网络和http权威指南读书笔记
计算机网络笔记网络层网络层向上提供无连接的,尽最大努力交付的数据报服务网络层不提供数据质量承诺物理层使用的中间设备叫转发器repeater 数据链路层叫网桥bridge 网络层叫路由器rout ...
MapReduce总结 + 相关Hadoop权威指南读书笔记（未完......欢迎补充，互相学习）
文章目录 MapReduce概述 MapReduce优缺点 MapReduce核心思想 MapReduce进程 MapReduce编程规范 WordCount 案例实操本地测试集群测试 Hadoo ...
小白的《HTML5权威指南》笔记（第一部分）
第一章基本了解HTML5 什么是HTML5? HTML5是一种标准,负责制定HTML标准的是W3C(World Wide Web Consortium,万维网联盟). HTML5不仅仅是HTML规范 ...
OCA/OCP Oracle 数据库12c考试指南读书笔记：第17章: Moving and Re-organizing Data
SQL*LOADER支持异构,DATA PUMP只支持Oracle数据库移动数据的方式 SQL*LOADER,DATA PUMP和外部表. 创建和使用DIRECTORY 对象 Oracle DIRE ...