盒子布局模式

最新推荐文章于 2024-07-05 17:28:52 发布

Claire_girl

最新推荐文章于 2024-07-05 17:28:52 发布

阅读量288

点赞数

分类专栏： html css 文章标签： css html5

本文链接：https://blog.csdn.net/Claire_girl/article/details/119668306

版权

html 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS布局的四种主要模式：默认文档流、浮动布局、伸缩盒布局和定位布局。在浮动布局中，重点讨论了`float`属性和清除浮动的方法。对于伸缩盒，解释了主轴和交叉轴的概念，以及`flex-grow`, `flex-shrink`和`flex-basis`的作用。最后，对定位布局中的`position`属性进行了阐述，包括静态、相对、绝对、固定和粘滞定位的特点及应用场景。" 114376371,7786149,CentOS7安装NVIDIA驱动及CUDA+CUDNN详细教程,"['Linux', '驱动安装', 'GPU计算', 'CUDA开发', '系统配置']

摘要由CSDN通过智能技术生成

 <div class="xpsf">
     新品首发
     <!--居中-->
     <div class="wrapper">
         <div >
             <ul class="p_list">
                 <li>one</li>
                 <li>two</li>
                 <li>three</li>
                 <li>four</li>
             </ul>
         </div>
     </div>
 </div>

1.默认文档流（解决y轴的问题）
块级元素，独占一行空间，div默认宽度100%，高度由内容决定，可以指定宽高。
div p ul>li
块元素默认从上往下排列（块元素给他最终的孩子设定高度）

<div>
     <div>
         <div></div>
         <div></div>
         <div></div>
     </div>
     <ul>
         <li></li>
         <li></li>
         <li></li>
     </ul>         
 </div>

2.浮动布局（x轴）
尽量给块元素设定宽度而非高度
(1)float:left;
浮动元素：
1）脱离文档流
2）块元素的宽度不再是100%，由内容决定
3）块元素不再支撑父元素
4）同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素，
会发生换行
(2)clear
清理浮动
left 不与左浮动元素在同一行显示
right 不与右浮动元素在同一行显示
both

 .xpsf ul.p_list>li{
   	 float:left;
}
.xpsf ul.p_list::after{
    content: '';
    display:block;
    clear:both;
}

3.伸缩盒和布局（x轴）
应用场合：父子结构

     div.container > div
     ul.container > li
     (1)概念
         伸缩盒容器 div.container、ul.container
         伸缩和元素 div li
         主轴 默认主轴x轴  伸缩和中，伸缩盒子元素沿着主轴来进行排列
         交叉轴 与主轴垂直的轴
     (2)规则
      ①伸缩盒容器（加在父盒子上） 
      		display：flex;
             		强制让它的子元素沿着主轴方向显示，并且不会脱离文档流
             		交叉轴上元素的高度如果没有指定，那么应该和父元素保持一致 
             flex-direction:row; 
                   定义主轴方向  row 主轴为x ；column 主轴为y；  
             flex-wrap:nowrap; 
                  当子元素的长度加起来超过主轴上的宽度，默认不换行 
             align-items:stretch;   
                   定义伸缩盒容器中的子元素在交叉轴上的排列方式
              justify-content:space-around;
                   定义伸缩盒容器中的子元素在主轴上的排列方式

！！！！注意这个主轴和交叉轴不是绝对的，是看flex-direction:定义的是row还是column！！！！

    .xpsf ul.p_list{
    display:flex;; 
     flex-direction: row; 
    /height:100px; 
     align-items: center; 
}

②伸缩盒元素
flex-basic;
主轴上的基础长度
flex-grow;
主轴上剩余空间分配的份数（分数）
flex-shrink;
主轴上亏损空间的分摊份数（亏损）

4.定位布局（z轴）
position:
static 静态（非定位元素）
relative 相对（定位元素）
absolute 绝对（定位元素）
fixed 固定（定位元素）
sticky 粘滞（定位元素）
定位元素的特点:可以使用定位规则 top right bottom left
1)相对定位
①不脱离文档流
②相对于它原来所在位置移动
2)绝对定位
①脱离文档流
②相对于距离它最近的父元素就行移动。如果所有的父元素都不是定位元素，则相对于浏览器视口移动
一般情况下，绝对定位元素嵌套在相对元素内部使用
3)固定定位
①脱离文档流
②相对于浏览器视口进行定位
4)粘滞布局
①在没有达到阈值的时候不脱离文档流（相对），达到阈值脱离文档流（固定布局）
②通过left right top bottom设定

    布局应用：
     特殊场景布局：二级栏目；广告；回到顶部;模态框
     实现块元素的居中
     left/margin-left