实践笔记之CSS布局技巧｜青训营## 引言课程中我们了解到布局(Layout)就是确定内容的大小和位置，将根据元素、容

引言

课程中我们了解到布局(Layout)就是确定内容的大小和位置，将根据元素、容器、兄弟节点和内容等信息来计算。

布局详情

浮动

CSS设置float会使元素向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
设置该属性后，元素被当做block类型。
需设置具体height值。
父元素需设置height
浮动元素脱离文档流但不会脱离文本流，其浮动时不会影响周围的盒子模型，但会影响文字。

clear清除HTML元素的向左、向右“浮动”特性。

定位

position:static; // 默认值，非定位元素
position:relative; //相对定位，不脱离文档流
position:absolute; // 绝对定位，脱离文档流，相对非static祖先元素定位
position:sticky;  //粘性定位，相对于视口绝对定位(导航栏随着页面下滑常居顶部时常用到）

平时我们常用"子绝父相"的定位方法,祖先元素在标准流中占位置，然后子元素脱离标准流，相对于祖先元素进行定位。

Flex布局

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex-direction属性:

决定主轴的方向（即项目的排列方向）。

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap属性:

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap: 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属性:

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 auto (1 1 auto) 和 none (0 0 auto)。

Grid布局

将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

实例

浮动布局

常见应用有文本环绕布局，两栏布局和三栏布局等。

文本环绕.png

.float_left{
  float:left;
  color:red;
  font-size:25px;
}

二栏布局.png

    .img{
      float:left; 
      width:50px;
       height:50px;
    }
    .hide{
      overflow:hidden;
    }

定位布局

子绝父相：

.word{
        position:relative;
    }
    .img{
		position:absolute;
        left:220px;
        top:100px;
	}

子绝父相.png

粘性定位:导航栏随着页面下滑常居顶部。

.nav{
position:sticky;
}

弹性盒子布局

导航栏采用flex布局，根据justify-content属性分布。

nav ul {
  box-sizing: border-box;
  width: 100%;
  height: 89px;
  padding: 0 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

采用自适应布局，满足条件时导航栏将因为flex-direction属性会改变排列方向。

@media screen and (max-width: 900px) {
  ul.responsive {
    flex-direction: column;
    padding: 0;
  }
}

总结

这些都只是部分应用技巧和方法，CSS布局尤为重要，我们要熟悉各种布局的原理和使用。在实际的项目中，各种布局技术都将会用到，我们要具体分析和使用，合理运用各个布局技术，满足实际设计开发需求。