码迷,mamicode.com
首页 > Web开发 > 详细

CSS 定位 显示 排列

时间:2018-04-20 20:40:23      阅读:826      评论:0      收藏:0      [点我收藏+]

标签:rev   pac   居中   ref   flex   between   定位   auto   列表   

定位

position用来定位时,主要有三种:

1、position:relative  对应原来的位置来定位

2、position:absolute  对应父元素的窗体来定位

3、position:fixed  对应浏览器的窗体来定位

 

显示

display用来显示元素的显示方法:

1、display:block  设置元素以块元素显示

2、display:inline  设置元素以行内元素显示

3、display:inline-block  多用<ul>标签、用来将列表转为水平显示

 

排列

排列有很多种样式可以设置:

1、margin:auto  将外边距设置为自动,可以将内容居中

2、align-content :

  对齐弹性盒的 <div> 元素的各项:

    align-content :space-around    项目位于各行之间留有空白的容器内

    align-content :space-between    项目位于各行之前、之间、之后都留有空白的容器内

    align-content :center      项目位于容器的中心

    align-content :flex-start     项目位于容器的开头

    align-content :flex-end     项目位于容器的结尾

  效果

3、align-items: 

    align-items:stretch    将项目拉伸以适应容器

 

CSS 定位 显示 排列

标签:rev   pac   居中   ref   flex   between   定位   auto   列表   

原文地址:https://www.cnblogs.com/blackfriday/p/8893144.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!