【前端】-017-页面制作-CSS-布局

css布局，元素摆放模式

display

设置元素的显示方式

1. inline，行元素

• 默认宽度为内容宽度
• 不可设置宽度和高度
• 同行显示，元素内部换行
• 常用标签元素：<span>、<a>、<label>、 <strong>、<em>

2. block，块元素

• 默认为父元素的宽度
• 可设置宽度和高度
• 换行显示
• 常用标签元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<li><table>、<address>、<blockquote> 、<form>

3. inline-block，内联块状元素

• 默认内容宽度
• 可以设置宽度和高度
• 前后元素同行显示
• 后续元素 or 本身会 ？ 整块换行
• 常用标签元素：<input>、<textarea>、<select>...<button>

4. none，不显示元素，后续元素会占据不显示元素的位置

可参考：【前端学习】-015-页面制作-CSS-盒模
案例：
a. block元素的水平居中布局
b. 居中导航

position

css属性的定位方式，通过参照定位后设置即可。

1. 位置参数：top right bottom left z-index,设置元素边缘和参照物的距离
2. 定位方式：

• relative,在文档流中，根据文档流的顺序排列；参照物为元素本身；通常作为绝对定位元素的参照物；
• absolute,脱离文档流；默认宽度为内容宽度；参照为第一个定位元素或根元素
  • 案例：轮播头图
• fixed,脱离文档流；默认宽度为内容宽度；参照物为视窗
  • 案例：固定顶栏布局\遮罩布局\三行自适应布局

float

An element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

1. 常用语法：float: left | right |
2. 特征：

• 默认为内容宽度，在父元素容器中居左或居右显示；
• 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
• float后续元素的内容是在float元素后显示

3. 清除浮动对后续元素的影响：clear属性：both |left |right，应用于浮动元素的后续元素，清楚浮动的格式影响（适用于块级元素）

.clearfix:after{
            content: "123";
            display: block;
            height: 0px;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }

4. 案例：两列布局

flex

1. 基本概念

   
   Flex.png

定义：多行多列，间隔自适应。间隔对齐？
- 弹性容器：flex元素在的元素，设置display: flex即可
- 弹性元素：在文档流中的直接子元素才是弹性元素
- 主轴：main flex
- 辅轴：cross flex

2. 特性

• 方向

  • flex-direction

    
    flex-direction

  • flex-wrap

    
    flex-wrap

  • flex-flow：一次性设置两个属性

    
    FLex-flow.png
  • order：初始值为0，整数越大，排在对应主轴的后方

• 弹性

  • flex-basis，The flex-basis CSS property specifies the flex basis which is the initial main size of a flex item.

    
    flex-basis

  • flex-grow，页面剩余空间分配

    
    Paste_Image.png

  • flex-shrink，剩余空间，默认值为1，就是三个子容器压缩的比例是一样的 1:1:1

  • flex弹性属性复合语法如下:
    flex: [ <flex-grow> <flex-shrink> ? || <flex-basis> ]，初始值为0 1 main-size

  资料<a href=http://zhoon.github.io/css3/2014/08/23/flex.html“”>[1]</a>：

flex-basis作用就是width的替代品， 如果子容器设置了flex-basis或者width，那么在分配空间之前，他们会先跟父容器预约这么多的空间，然后剩下的才是归入到剩余空间
父容器再把剩余空间分配给设置了flex-grow的容器。
如果同时设置flex-basis和width，那么width属性会被覆盖,有一点需要注意，如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高。
如果子容器的宽度和小于父容器宽度，那么要么父容器换行要么压缩子容器的宽度（采用flex-shrink），shrink定义了压缩比例

• 对齐

  • 设置主轴对齐方式：justify-content

    
    justify-content.png

  • 设置辅轴对齐方式：align-items

    
    align-item.png

  • 设置每一个flex item在辅轴的对齐方式：align-self

    
    align-self

  • 设置多行弹性分布：align-content

    
    align-content.png
  • 案例：三行两列自适应

---

参考资料：
[1]. http://zhoon.github.io/css3/2014/08/23/flex.html
[2]. https://www.404forest.com/2015/12/17/简谈flex属性——flex-grow、flex-shrink、flex-basis都是干啥的/