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>