# css-layout **Repository Path**: wh543/css-layout ## Basic Information - **Project Name**: css-layout - **Description**: css布局 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2021-10-07 - **Last Updated**: 2021-12-13 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ### 盒子模型 #### css盒模型的注意点 - padding不能为负值，而margin可以为负值 - 背景色会平铺到非margin的区域 - margin-top传递的现象机解决方案 - margin上下叠加的现象及解决方案 #### 块级盒子的特性 - 独占一行 - 支持所有样式 - 不写宽度的时候，跟父容器的宽度相同 - 所占区域是一个矩形 #### 内联盒子的特性 - 盒子不会产生换行 - 有些样式不支持，例如：width、height等 - 不写宽度的时候，宽度由内容决定 #### 自适应盒子 子容器在没有设置宽度的情况下，宽度跟父容器保持一致，不受padding和margin影响。 ``` ``` #### 怪异盒模型 在标准盒模型中，如果给盒设置width盒height，实际设置的是content box。padding和border在加上设置的宽高一起决定了整个盒子的大小。 ![image-20211007102220528](images/image-20211007102220528.png) 在怪异模型中，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。 ![image-20211007102333827](images/image-20211007102333827.png) box-sizing的属性值主要有以下三个： - content-box：默认值，元素的宽高（width/height）= 元素边框（border）+ 元素内边距（padding） + 元素宽高（content width/height） - border-box：元素的宽度或高度等于元素内容的宽度和高度。 - inherit：使元素继承父元素的盒子模型模式 ### 浮动 文档流：文档流是元素在web页面上的一种呈现方式，按照出现的先后顺序进行排列。 当元素被浮动时，会脱离文档流，根据float的值向左或者向右移动，直到它的外边届碰到父元素的内边界或者另一个浮动元素的外边界为止，是CSS布局实现左右布局的一种方式。 #### 清除浮动的方案 - clear属性 - BFC - 空标签 - .clearfix::after{} #### 浮动特性 - 只会影响后面的元素 - 文本不会被浮动元素覆盖 - 具备内联盒子特性：宽度由内容决定 - 具备块级元素特性：支持所有样式 - 浮动放不下，会自动换行 ### 定位样式 CSS position属性用于指定一个元素在文档中的定位方式，其中top、right、bottom和left属性则决定了该元素的最终为止。 ![image-20211007150553564](images/image-20211007150553564.png) #### 相对定位及特性 - 相对定位的元素是在文档中的正常位置偏移给定的值 - 不影响其他元素布局 - 相对于自身进行偏移 （见position/position1.html） #### 绝对定位及特性 - 绝对定位的元素脱离了文档流，绝对定位元素不占据空间 - 具备内联盒子特性：宽度由内容决定 - 具备块级元素特性：支持所有样式 - 绝对定位元素相对于最近的非static父元素定位。当这样的父元素不存在时，则相对于可视区定位 （见position/position2.html，position/position3.html） #### 固定定位及特性 - 固定定位与绝对定位相似，但是会固定在可视区中 - 具备内联盒子特性：宽度由内容决定 - 具备块级元素特性：支持所有样式 - 固定定位元素不受父元素影响 （见position/position4.html） #### 黏性定位及特性 - 黏性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位 （见position/position5.html） ### flex布局 弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。 ![image-20211007155644541](images/image-20211007155644541.png) #### 主轴与交叉轴 ![image-20211007161229407](images/image-20211007161229407.png) #### flex容器与flex子项 ![image-20211007230817359](images/image-20211007230817359.png) ![image-20211007160010811](images/image-20211007160010811.png) ##### 内联与块的上下左右居中布局 ![image-20211007221939895](images/image-20211007221939895.png) flex/demo7.html flex/demo8.html ##### 不定项居中布局 ![image-20211007221911228](images/image-20211007221911228.png) flex/demo9.html flex/demo10.html ##### 均分列布局 ![image-20211007223947611](images/image-20211007223947611.png) flex/demo11.html ##### 子项分组布局 ![image-20211007224944701](images/image-20211007224944701.png) flex/demo12.html flex/demo13.html ![image-20211007160106286](images/image-20211007160106286.png) ![image-20211010214053497](images/image-20211010214053497.png) ##### flex-grow扩展比例 flex/demo14.html ![image-20211008220531064](images/image-20211008220531064.png) flex-grow为1（大于等于1效果一样），就占满剩余的所有空间 ![image-20211008220848420](images/image-20211008220848420.png) flex-grow为0.5，就是在自带的宽度的前提下占用剩余空间的一半（100 + 400*0.5 = 300） flex/demo15.html 当多个元素都有flex-grow属性时，则这些元素将按比例瓜分剩余空间（所有flex-grow的和小于1时分配完仍存在多余空间）。 ![image-20211008221938147](images/image-20211008221938147.png) ##### flex-shrink收缩比例 flex/demo16.html ![image-20211008223539696](images/image-20211008223539696.png) 如果flex-shrink为0则子容器会溢出100px。如果为0.5则会溢出50px。 flex/demo17.html 多个元素的收缩比例由元素的宽度比例决定。 父容器500，子容器1：400，子容器2：300。经过收缩。 子容器1：400-200*(4/7)=285.714 子容器2：300-200*(3/7)=214.285 ##### flex-basic ![image-20211007160257963](images/image-20211007160257963.png) #### 等高布局 flex/demo22.html #### 两列与三列布局 flex/demo23.html #### Sticky Footer(黏性页脚)布局 flex/demo24.html #### 溢出项布局 flex/demo25.html #### 综合案例一：Swiper轮播图 flex/demo26.html #### 综合案例二：知乎导航 flex/demo27.html ### grid网格布局 CSS网格是一个用于web的二维布局系统。利用网格，可以将内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。 ![image-20211011211005007](images/image-20211011211005007.png)