前段学习（三）web布局

web布局

CSS常用布局

什么是CSS布局

通过CSSS去拾取网页中的元素，并且控制他们相对于普通文档流、周边元素、父容器甚至浏览器窗口的位置，通过CSS布局可以覆盖默认的布局

布局的基本概念

布局分为两个部分，尺寸和定位

• 盒子模型（尺寸）

• 普通文档流（定位）

  • 从左到右

  • 从上到下

普通文档流

普通文档流可分为三种元素

• 块级元素（block）

  独占浏览器页面的一行， 可为元素设置宽高，例如p、div

• 行内元素（inline）

  与块级元素不同，不会独占一行，可允许多个元素排列，宽高由内容撑开，例如img、a标签

• 行内块级元素（inline-block）

  前两者的结合，可将多个元素排列一行，并且可以为元素设置宽高

以上三者可通过display属性进行转化,，例如display：inline表示将元素转化为行内元素

合理布局的作用

1. 使得内容更加清晰

2. 页面载入更快（html和css文件是并行加载）

3. 有利于搜索引擎的爬取

CSS flex布局

什么是flex布局

flex是flexbox的缩写，意为“弹性布局”。这是一种灵活自适应的布局方式，可实现横向和纵向的一维布局

任何一个容器都可以指定为flex布局

flex容器

flex容器在包含两根轴：主轴（main axis）和交叉轴（cross axis），两轴的边界对应flex容器的边界，可通过更改css属性，改变flex容器中各元素的摆放

flex容器上的属性

• flex-direction: 控制flex元素的排列方向

• flex-wrap: 控制flex元素的换行

• flex-flow: 前两个元素的复合属性

flex元素上的属性

• flex-basis： 控制容器在主轴方向上的大小

• flex-grow：处理容器剩余空间

• flex-shrink: 处理容器溢出空间，默认为1

• flex: 前三个元素的复合属性

元素对齐方式

• align-items: 针对交叉轴

• justify-content: 针对主轴

为什么使用flexbox

因为flexbox可以实现

• 处理元素外部空间分布（指定父级元素为flex）

• 处理元素内部空间分布(（指定元素自身为flex）

flex的适用场景

主要适用场景

• 导航

• 拆分导航（justify-content:space-between）

• 元素居中

• 绝对底部（正文flex-grow :1）

CSS定位

定位

定位能够把一个元素从它原来在正常布局流中位置移动到另一个位置，是对元素位置的微调

• position

  • static:静态定位（元素默认布局）

  • relative:相对定位（需添加偏移量）

  • absolute:绝对定位（找不为static的父类元素）

  • fixed:固定定位（相对于浏览器的视口）

  • sticky:粘性定位（relative和fixed结合）

浮动

浮动，顾名思义就是将该元素从正常的布局流中移除，其他周围元素环绕在该浮动元素周围。浮动会改变该元素本身和正常布局流中其他元素的行为，导致其他元素行为混乱，因此现并不提倡。

• float :left/right（向左浮动、向右浮动）

• clear:清除浮动