CSS布局

最新推荐文章于 2024-09-10 18:37:52 发布

Alongxx

最新推荐文章于 2024-09-10 18:37:52 发布

阅读量71

点赞数

本文链接：https://blog.csdn.net/Alongxx/article/details/120134194

版权

定位布局伸缩盒布局响应式设计媒体查询 Bootstrap

关键词由CSDN通过智能技术生成

1.定位布局

   position: static;   // 默认，静态
       relative
           相对点：该元素在文档流中初始的位置
           是否脱离文档流：不脱离
           最佳实践：一般不移动，作为相对点
       absolute
           相对点：距离它最近的父定位元素，如果没有父定位元素，那么就只能相对于浏览器视口
           是否脱离文档流：
       fixed
           相对点：相对于视口，并且不会随着浏览器的滚动而滚动
           是否脱离文档流：脱离
       sticky
           相对点：
           是否脱离文档流：

当元素上的position的取值为relative absolute fixed sticky之一，我们就认为当前这个元素为定位元素。定位布局可以使用定位属性，比如 left、right、top、bottom

2.伸缩盒布局

   作用：与浮动布局的作用类似，用于将一个容器中多个子元素【块元素】在一行中多列排列，常用于响应式布局（移动端）

   概念：
       主轴：flex-direction定义，row - x; column - y
       交叉轴：与主轴垂直的轴 y, x

1. 子元素都是沿着主轴来排列的
2. 一般建议给容器添加宽高，子元素在容器中排列

   使用：
       <ul>
           <li></li>
           <li></li>
           <li></li>
       </ul>

       ul 容器
           display: flex;                    让容器成为伸缩盒容器
flex-direction: row;        容器中子元素的排列方式，row-沿着x轴
flex-wrap: wrap;
justify-content: space-around;
       li 子元素
           flex-basis                主轴中基准值，主轴是x轴，相等于width
           flex-grow                主轴中剩余空间分配所占据份数
flex-shrink            主轴中如果有亏损，所占亏损的份数
           flex                            速写
       ul {
           display: flex;
       }