css布局技巧

1. Flexbox布局：
   CSS3引入的Flexbox布局是一种非常灵活的布局方式，它可以轻松实现多行和多列布局，使得布局变得更加简单和易于管理。
           采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
   
   容器的属性：
   flex-direction属性决定主轴的方向（即项目的排列方向）。

   flex-direction: row | row-reverse | column | column-reverse;
   row（默认值）：主轴为水平方向，起点在左端。
   row-reverse：主轴为水平方向，起点在右端。
   column：主轴为垂直方向，起点在上沿。
   column-reverse：主轴为垂直方向，起点在下沿。

   flex-wrap属性定义，如果一条轴线排不下，如何换行。

   flex-wrap: nowrap | wrap | wrap-reverse;
   nowrap（默认）：不换行。
   wrap：换行，第一行在上方。
   wrap-reverse：换行，第一行在下方。

   flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

   flex-flow: <flex-direction> <flex-wrap>;

   justify-content属性定义了项目在主轴上的对齐方式。

   justify-content: flex-start | flex-end | center | space-between | space-around;
   flex-start（默认值）：左对齐
   flex-end：右对齐
   center： 居中
   space-between：两端对齐，项目之间的间隔都相等。
   space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

   align-items属性定义项目在交叉轴上如何对齐。

   align-items: flex-start | flex-end | center | baseline | stretch;
   flex-start：交叉轴的起点对齐。
   flex-end：交叉轴的终点对齐。
   center：交叉轴的中点对齐。
   baseline: 项目的第一行文字的基线对齐。
   stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

   align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
   flex-start：与交叉轴的起点对齐。
   flex-end：与交叉轴的终点对齐。
   center：与交叉轴的中点对齐。
   space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
   space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
   stretch（默认值）：轴线占满整个交叉轴。

   项目的属性:
   order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

   order: <integer>;

   flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

   flex-grow: <number>; /* default 0 */

   flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

   flex-shrink: <number>; /* default 1 */

   flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

   flex-basis: <length> | auto; /* default auto */

   flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

   align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

   align-self: auto | flex-start | flex-end | center | baseline | stretch;

2. Grid布局：
   CSS Grid布局是一种基于网格的布局方式，它可以让你以非常灵活的方式布置你的内容，同时确保你的设计可复用、可维护和可扩展。
   

   属性	描述
   column-gap	指定列之间的间隙
   gap	row-gap 和 column-gap 的简写属性
   grid	grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
   grid-area	指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
   grid-auto-columns	指的默认的列尺寸
   grid-auto-flow	指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
   grid-auto-rows	指的默认的行尺寸
   grid-column	grid-column-start 和 grid-column-end 的简写属性
   grid-column-end	指定网格元素列的结束位置
   grid-column-gap	指定网格元素的间距大小
   grid-column-start	指定网格元素列的开始位置
   grid-gap	grid-row-gap 和 grid-column-gap 的简写属性
   grid-row	grid-row-start 和 grid-row-end 的简写属性
   grid-row-end	指定网格元素行的结束位置
   grid-row-gap	指定网格元素的行间距
   grid-row-start	指定网格元素行的开始位置
   grid-template	grid-template-rows, grid-template-columns 和 grid-areas 的简写属性
   grid-template-areas	指定如何显示行和列，使用命名的网格元素
   grid-template-columns	指定列的大小，以及网格布局中设置列的数量
   grid-template-rows	指定网格布局中行的大小
   row-gap	指定两个行之间的间距

3. 定位布局：
   position 的四个值：static、relative、absolute、fixed。
   绝对定位：absolute 和 fixed 统称为绝对定位;
   相对定位：relative;
   默认值：static;
   使用position属性可以将元素放置在页面上的任何位置，你可以使用top、bottom、left和right来调整元素的位置。
   relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。
   absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。
    

4. 响应式设计：
   使用CSS3的Media Query功能可以根据设备的大小和分辨率来调整样式和布局，从而实现响应式设计。

   @media not|only mediatype and (mediafeature and|or|not mediafeature) {
     CSS-Code;
   }

   not, and, 和 only 可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。
   not, only 和 and 关键字含义:
       not: not 运算符用于否定媒体查询，如果不满足这个条件则返回 true，否则返回 false。 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。 如果使用 not 运算符，则还必须指定媒体类型。
       only: only 运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。 当不使用 only 时，旧版本的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将其样式应用于所有屏幕。 如果使用 only 运算符，则还必须指定媒体类型。
       , (逗号) 逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此，如果列表中的任何查询为 true，则整个 media 语句均返回 true。 换句话说，列表的行为类似于逻辑或 or 运算符。
       and: and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。
   媒体类型：

   值	描述
   all	用于所有设备
   print	用于打印机和打印预览
   screen	用于电脑屏幕，平板电脑，智能手机等。
   speech	应用于屏幕阅读器等发声设备

   媒体功能:

   值	描述
   aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
   color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
   color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
   device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
   device-height	定义输出设备的屏幕可见高度。
   device-width	定义输出设备的屏幕可见宽度。
   grid	用来查询输出设备是否使用栅格或点阵。
   height	定义输出设备中的页面可见区域高度。
   max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
   max-color	定义输出设备每一组彩色原件的最大个数。
   max-color-index	定义在输出设备的彩色查询表中的最大条目数。
   max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
   max-device-height	定义输出设备的屏幕可见的最大高度。
   max-device-width	定义输出设备的屏幕最大可见宽度。
   max-height	定义输出设备中的页面最大可见区域高度。
   max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
   max-resolution	定义设备的最大分辨率。
   max-width	定义输出设备中的页面最大可见区域宽度。
   min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
   min-color	定义输出设备每一组彩色原件的最小个数。
   min-color-index	定义在输出设备的彩色查询表中的最小条目数。
   min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
   min-device-width	定义输出设备的屏幕最小可见宽度。
   min-device-height	定义输出设备的屏幕的最小可见高度。
   min-height	定义输出设备中的页面最小可见区域高度。
   min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
   min-resolution	定义设备的最小分辨率。
   min-width	定义输出设备中的页面最小可见区域宽度。
   monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
   orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
   resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
   scan	定义电视类设备的扫描工序。
   width	定义输出设备中的页面可见区域宽度。

5. 元素居中：使用text-align:center可以将文本居中，使用margin:auto可以将元素居中，同时使用position和transform也可以实现元素居中。
   多行文本垂直居中:

   div{height:300px; display:table-cell; vertical-align:middle}

   块级元素居中:

   定位居中方法:(知道子盒子尺寸的情况下可以使用)
   dev{position:absolute;top:50%;margin-top:-50px;left:50%;margin-left:-50px;}
   
   利用css3里面的calc函数:(知道子盒子尺寸的情况下可以使用)
   dev{position:absolute;top:calc(50% - 50px); left: calc(50% - 50px); }
   
   定位居中方法:(不知道子盒子尺寸的情况)
   dev{position:absolute; top:0; bottom:0; right:0; left:0; margin:auto;}
   
   css3里面的位移:(不知道子盒子尺寸的情况)
   dev{position:absolute;top:50%; left: 50%; transform:translate(-50%,-50%)}

   弹性盒居中方法:

   dev{display:flex; justify-content:center; align-items:center}

   
    

6. 浮动：使用float属性可以将元素向左或向右浮动，从而使得其他元素可以绕过它。

   dev {
   	float:right;
   }

   值	描述
   left	元素向左浮动。
   right	元素向右浮动。
   none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
   inherit	规定应该从父元素继承 float 属性的值。