概念:实现多个栏目的布局,类似于报纸
a) 分栏显示–语法:column-count:值
取值:值是一个栏目的数量
<style type="text/css">
.box{column-count:3;width:500px;}
</style>
</head>
<body>
<div class="box">
本次论坛以“智能互联时代的媒体变革与发展”为主题,由中共中央网络安全和信息化委员会办公室指导,中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办,央视网、中共宁波市委宣传部(市委网络安全和信息化领导小组办公室)共同承办,宁波日报报业集团(甬派传媒)、新浪网协办。
为了对论坛主题进行更深入、透彻地探讨,论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等,共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战,预测未来网络媒体发展趋势,解决技术变革带来的实际问题,分析分享媒体未来发展方向。
截至目前,承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。
</div>
</body>
b) 多栏隔断框–语法:column-rule:值
取值:这里的取值和边框的取值是一样的,也有边框厚度,边框颜色,边框样式
<style type="text/css">
.box{column-rule:5px solid red;column-count:3;width:500px;}
</style>
</head>
<body>
<div class="box">
本次论坛以“智能互联时代的媒体变革与发展”为主题,由中共中央网络安全和信息化委员会办公室指导,中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办,央视网、中共宁波市委宣传部(市委网络安全和信息化领导小组办公室)共同承办,宁波日报报业集团(甬派传媒)、新浪网协办。
为了对论坛主题进行更深入、透彻地探讨,论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等,共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战,预测未来网络媒体发展趋势,解决技术变革带来的实际问题,分析分享媒体未来发展方向。
截至目前,承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。
</div>
</body>
c) 设置每一栏的宽度–语法:column-width:值
取值:值和宽度的值一样
<style type="text/css">
.box{column-width:80px;width:500px;border:1px solid red;}
</style>
</head>
<body>
<div class="box">
本次论坛以“智能互联时代的媒体变革与发展”为主题,由中共中央网络安全和信息化委员会办公室指导,中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办,央视网、中共宁波市委宣传部(市委网络安全和信息化领导小组办公室)共同承办,宁波日报报业集团(甬派传媒)、新浪网协办。
为了对论坛主题进行更深入、透彻地探讨,论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等,共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战,预测未来网络媒体发展趋势,解决技术变革带来的实际问题,分析分享媒体未来发展方向。
截至目前,承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。
</div>
</body>
概念:可以实现类似浮动的效果,但是不会脱离文档流
语法:display:flex
-------------设置一个弹性容器
主要属性(都需要先设置display:flex;):
flex-direction:值
取值:
(1)row横向排列,等同于左浮动浮动效果
(2)row-reverse 横向反向排列,等同于右浮动的效果
(3)column 纵向排列
(4)column-reverse 纵向反向排列,从下到上的排列
flex-wrap:值
取值:
(1)不换行(默认),nowrap
(2)换行, wrap
(3)换行,并反向排列(从下往上排列),wrap-reverse------从下往上,从左往右进行排列
justify-content:值
取值:
(1)从左向右(左对齐),默认,flex-start
(2)从右往左排列(右对齐),flex-end
(3)两端对齐,中间等距离隔开,space-between
(4)两端的空白是中间空白的一半,space-around------------环绕对齐
(5)居中对齐,center
(6)等距离排列,space-evenly
align-content:值
(在换行的时候用)取值:
(1)默认的排列方式,stretch--------靠上排列,但是元素之间有间距
(2)靠上排列(上对齐),flex-start
(3)靠下排列(下对齐),flex-end
(4)垂直上下两端对齐,中间等距离空白,space-between
(5) 两端的空白是中间的空白的一半,space-around
(6)居中对齐,center
(7)等距离摆放,space-evenly
align-items:值
,需要横向排列取值:
(1)flex-start,从起始位置对齐
(2)flex-end,在结束位置对齐--------底部对齐
(3)center,居中对齐---------垂直居中
(4)baseline,在基准线对齐
(5)stretch,拉伸子元素------图片不行
使用场景:当网页结构鲜明,简单,使用弹性布局
align-self:值
取值:
auto:默认值,元素继承了它的父容器的align-items属性,如果没有父容器则为"stretch"
stretch:拉伸
center:居中
flex-start:最上面
flex-end:最下面
baseline:容器的基线
其实这个属性的结果和align-items的一样,只是align-items修饰的弹性容器中的所有子元素,align-self修饰的当前这一个元素。
text-align:center;和margin:auto;的区别
text-align:center;
1.文本水平居中对齐
2.设置在父元素上,作用于子元素(行元素和行内块,不能对块元素生效)
margin:auto;
1.盒子水平居中
2.设置在自身,作用于自身(自己是块元素,在父元素中居中,不能对行元素生效)