布局模式有以下5种： display

块（Block），用于网页中的部分（节）display：block
行内（Inline），用于文本display：inline
表，用于二维表数据 display：grid
display：inline-block
定位，用于元素的明确位置 display：
flexbox模型 display：flex

app

adoble-xd/skech /蓝湖

标准文档流

正常情况下是流式布局，按顺序从上往下，一块接一块，右边有位置也不会占用。默认的块的宽度会充满整个页面。

块级元素和行内元素

行内元素：占据行内容部分，和行内其他元素并排。能接受宽高，默认为父级的100%；
块级元素：霸占一行，不能和其他元素并列。能接受宽高，默认为父级的100%；

html中
- 文本级元素：p、span、a、b、i、u、em
- 容器级元素：div、h系列！、li、dt、dd
PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。

css分类：只有p不一样。
- 行内元素：除了p所有的文本标签，都是行内元素。
- 块级元素：所有容器级元素+p。

相互转换：display

块级元素转行内元素
        div{
            display:inline;
        }
  //-此时这个div不能设置宽度、高度；
    -此时这个div可以和别人并排了
    
    
行内元素转块级元素：
    span{
        display：block；
    }
   // - 此时这个span能够设置宽度、高度
    - 此时这个span必须霸占一行了，别人无法和他并排
    - 如果不设置宽度，将撑满父亲
    
两者兼具：inline-block
- 设置inline-block也可以使元素兼具行内元素和块级元素的属性，
- 也可以达到浮动并排的效果，
- 但是无法控制居左还是居右，只能从左到右排列。

浮动

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：脱离标准流

css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位 | 属性 |描述 | | --- | --- | none | 表示不浮动，所有之前讲解的HTML标签默认不浮动 | | left | 左浮动 | | right | 右浮动 | | inherit | 继承父元素的浮动属性

标准文档流：

浏览器默认的HTML布局方式，这种布

浮动的性质（后果）

设置浮动属性后，元素就会脱离文本流，又叫"脱标"。父级元素坍塌，子元素间位置改变
设置浮动属性后，没有块级元素和行内元素的区别了。都可以设置宽高。
浮动元素会相互贴靠。改变浏览器窗口大小，会向规定方向移动。
浮动的元素有“字围”效果，让div浮动，p不浮动。div挡住了p，但不会挡住p中的文字，形成“字围”效果。总结：标准流中的文字不会被浮动的盒子遮挡住。初期一定要遵循一个原则：永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。eg： div本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩。

浮动的清除

给父级元素加高度：相当于关住内部元素。

子元素浮动后，父元素如果未设置高度，则高度会变成0，直接影响布局。

给盒子使用clear:both;这个属性

.box2 {
            clear: both; //清除左右浮动对象
        }    //这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。
              margin失效的本质原因是：上图中的box1和box2，高度为零。

clear就是清除，both指的是左浮动、右浮动都要清除。clear:both的意思就是：不允许左侧和右侧有浮动对象。

隔墙法/内墙法：

   .clear {
            clear: both;
            height: 10px;
        }
        
  //防止第一个div贴到第二个div，中间放一个div，设置clear属性，
  中间的div不能用margin属性但是可以用height。 
  缺点：很多冗余元素

overflow:hidden溢出隐藏

  .box1 {
            overflow: hidden;  
            //hidden,auto,√  visible ×
            
//所有溢出边框的内容，都要隐藏掉
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上`overflow:hidden`; 那么，父亲就能被儿子撑出高了。

        }

5. 采用伪元素:after

该方法的缺点是，IE6/IE7不识别:after伪元素，存在兼容性问题。

该方法中最好为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素。

css
.box{ width:700px; margin:0 auto; border:2px solid green;}
.div{ width:300px; height:200px; background:red; float:left;}
.div{ width:300px; height:200px; background:red; float:left; margin-left: 10px;}
.clearfix:after { 
     content:""; /*content属性是必须的，其值可以为空*/
     display:table; /*采用此方法可以有效避免浏览器兼容问题*/
     clear:both;
}

html
<div class="box clearfix">
    <div class="div">1</div>
    <div class="div">2</div>
</div>

浮动的特点

1.浮动的元素，讲向左或者向右浮动，浮动到包围元素的边上，或者上一个浮动元素的边上为止。

2.浮动的元素，不再占用空间，且浮动元素的层级要高于普通元素。

3.浮动的元素，一定是块元素，不管之前是什么元素。

4.如果浮动的元素没有指定宽度的话，浮动后会尽可能变窄，因此浮动元素要指定宽和高。

5.一行的多个元素，要浮动大家一起浮动。

*1.box model

浮动布局/传统布局

利用position+display+设置块的float属性，变成浮动布局；
一般网页布局：logo商标栏-navigation导航栏-左侧边栏left-sidebar--content内容栏--右侧边栏right-sidebar
兼容性最好，但是效率低。

三栏式布局

1.左中右div分别设置float属性，配合margin-left定位，中间的主体栏用内嵌div的左右margin值撑开距离。 2.左中右div分别设置float属性，配合margin-left定位，中间三栏用container包含，给container加左右padding。 3.左右俩栏用float固定在左右，中间栏放在左右的后面，于是实现了三栏自适应布局。

俩栏式布局

*2.flex布局

为盒模型提供最大的灵活性，任何容器都可以设置flex布局，包括块级和行内元素、；自适应。
当为父盒子设置flex布局之后，子元素的float、clear、vertical-align属性将失效。
采用flex布局的元素，比如div，称为flex容器，该元素的所有子元素比如span，自动变为容器的flex项目。（通过父级控制子级）
有自己的一套属性，效率高，兼容性强。（一维）
如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器。
容器属性、项目属性：容器是外面的大盒子，项目是包含在容器里面的 www.w3school.com.cn/css/css3_fl…

属性（容器属性、项目属性）	描述
display	规定用于 HTML 元素的盒类型。
容器属性	写在容器里面,都有initial和inherit
flex-direction	规定弹性容器内的弹性项目的方向。row、roe-reverse 、column、column-reverse
flex-wrap	规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。默认是不会换行的。nowarp、warp、warp-reverse
flex-flow	flex-direction 和 flex-wrap 的简写属性。
justify-content	(`水平x`)当弹性项目没有用到主轴上的所有可用空间时， `justify-content:和direction一致的方向`对齐这些项目。flex-start默认、flex-end 、center、stretch、`space-between、space-around四周均分、space-evenly`间隔一样
align-items	（`单行`垂直`y`）当弹性项目没有用到主轴上的所有可用空间时，`align-items:表示和direction相反`的方向对齐这些项。flex-start、flex-end、center、stretch、`baseline:第一条线`、
align-content	（`多行y方向`）修改 flex-wrap 属性的行为。，但是`出现多行，有多条轴`的时候的对齐方式,一行一条轴不起作用。flex-start默认、flex-end 、center、stretch、`space-between、space-around`
项目属性	写在某项目上
order	`x方向`同一容器内弹性项目的顺序。值越小越往前，默认为0.+-
align-self	`y方向`用于弹性项目。覆盖容器的 align-items 属性。单个项目的y竖向对齐方式，脱离容器的对齐方式。默认auto，继承父级align-items，如果没有父级等同于stretch
flex	flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。`分配父元素剩余空间`。`flex:1自适应，0，1，auto`
flex-grow	定义项目的放大比例；剩余空间按比例分配。默认为0：即使有剩余空间，也不放大。
flex-shrink	定义项目的缩小比例，项目相对于其余弹性项目的收缩量；剩余空间按个空间shrink比例缩小。默认为1：空间不足，项目要缩小。0代表不缩小，负值无效。
flex-basis	*针对英文单词，中文汉字不存在下面的情况 1.规定弹性项目的初始长度width。只和width有关 2.当只有width，内容width超出给的px，不会自动填充；3.只有flex-basis，内容宽度超出给的flex-basis，会自动填充，basis就是最小宽度。4.width和flex-basis一起使用，不会填充，俩者的最大值为实际宽度。5.如果有width-max和width-min，受到限制等于最大值

特殊写法

属性	说明
flex: auto;	flex: 1 1 auto;
flex: none;	flex: 0 0 auto;
flex: 0%	flex: 1 1 0%;
flex: 100px;	flex: 1 1 100px;
flex: 1;	flex: 1 1 0%;
	auto表示width生效，宽度取决于设置的width；
	前两个数字为1 1时，子元素自动扩展、缩小，第三个基准值则不重要了。

*3.grid布局

网格布局，最强大的css布局方案，知识点多，但兼容性不如flex。（二维）
由行列形成一个一个的单元格。列（column）** 行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter） /gap。几块组成area，网格线：line。

步骤

1.与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项，页面不会直接变化，还只有一个网格项。
（如需使 HTML 元素充当网格容器，您必须把 display 属性设置为 grid 或 inline-grid。）

.container {
    display: grid;
}

grid 属性是以下属性的简写属性：

grid-template-rows 定义列的高度和个数
grid-template-columns 定义列的个数（有几个就是几个）和宽度
grid-template-areas 规定使用命名项目的网格布局。
grid-auto-rows
grid-auto-columns 自动尺寸
grid-auto-flow

设置宽度的三种方式

1.px 2.% 3.fr： {grid-template-columns ：1fr 2fr 300px}
三列中前俩列按照1：2分配除开300px后的剩余空间。

属性

属性	描述

	容器属性：盒子
`grid-template`（-row/-columns）	需要多少个行列就写几个值，不填写/auto：自动均分。
	`repeat`（重复次数n，重复的数值）：设置的宽度一致时使用
	repeat(`auto-fill`,100px)：单元格宽度一定，盒子宽度不定，自动填充。
	`fr`： repeat（4，1fr）驷等分，fr表示按多少等分
	grid-template-row：ifr `minmax（min，max）`
	`auto`：表示由浏览器自己决定
	`[]`：[c1]100px 定义网格线名称，出现线。
`grid-row/column-gap` (grid-row-gap /grid-column-gap)	item之间的距离
`grid-template-areas`
`grid-auto-flow`	子元素的排放顺序 `row`: 先行后列，`column`：先列后行 `row dense`：增加空间利用率，行列都可用。
`justify-items / align-items`	`单元格内容`的对齐方式。`start end center stretch`
	简写：`place-items`: center center
`justify-content/ align-content`	`整个内容`的对齐方式。`start end center stretch space-around space-between space-evenly`
`grid-auto-column/row`	多出来的items的宽高，因为开始有设置多少个项目area
	项目属性：每个单元格item
`grid-column/row-start/end` 定位	从哪根row/column网格线开始结束
	简写：grid-column：1/3；从垂直方向的第一根开始第三根结束
	从开始或者最后网格线开始，跨越几个items，扩大grid-column-start：span 2；grid-column-end：span 2；
`grid-area`	1.指定区域，放在哪个区域（配合grid-template-area）
	2.简写：grid-column-start:1 +grid-column-end:3 +grid-row-start:1 +grid-row-end:3 ===grid-area:1/1/3/3
`justify-self align-self`	对单独的一个items，独立于其他的。`start end center stretch`
	简写：`space-self`

4.column布局？多列式布局multicol*

属性

属性	描述
	容器属性
`column-count`	将创建指定数量的列，宽度由浏览器平均分配
`column-width`	：浏览器将按照你指定的宽度尽可能多的创建列；任何剩余的空间之后会被现有的列平分。这意味着你可能无法期望得到你指定宽度，除非容器的宽度刚好可以被你指定的宽度除尽。.container { column-width: 200px;}
`column-gap`	列间间隙
`coulumn-rule`	在列间加入一条分割线；宽度样式颜色column-rule: 4px dotted rgb(79, 185, 227);
	项目属性
`background-color`
`border`
`padding`
`margin`
`防止内容折断`	`break-inside: avoid;`
	`page-break-inside: avoid;`

2.6 css之布局