前端入门笔记 03 —— Web（html CSS）布局

常用布局

包含两个定义： 尺寸 定位

定义通过CSS拾取网页元素，控制他们控制普通文档流，周边元素，父容器，浏览器窗口

• 覆盖默认布局行为
• 盒子模型
• 普通文档流 （左到右，上到下）
  • 块级元素（可定于宽高）
  • 行内元素（宽高取决于内部的块级元素）
  • 行内块级元素

使用display进行元素类型转换

目的：

• 内容清晰
• 页面载入
• 搜索引擎的爬取

flex布局

flexbox 弹性布局

• 一维
• 任何一个容器都可以成为flex布局

flex容器

主轴，交叉轴：决定边界，内部的元素都是flex元素

flex属性

flex容器的属性

• flex-direction
• flex-warp
• flex-flow(前两个值的浓缩)

摆放方式：水平左到右、右到左，竖直上到下、下到上

溢出内容会导致其他item被挤压

flex元素的属性

• flex-basis 控制 main size,若同时设置flex-basis和width，flex-basis优先级更高
• flex-grow 容器剩余空间处理
• flex-srhink 容器溢出空间处理
• flex（三个浓缩）

grow

container下设置了一个item和item-two

一开始不设置其他属性的效果

600px的宽度有100px未被分配

这时候设置item-two下属性flex-grow为1

最后自动填充

shrink

width改为450

五个框被等比例挤压

后续开启shrink为1（注意！这个元素其实默认为1，所以你得把别的框改成0才行）

最后只有3被挤压

（当然shrink其实也可以设置为2或者其他数字，会有不同的shrink组合会有不同的变化比例）

元素对齐

• align-items 上下居中
• justify-content 水平居中

适用场景

1. 导航
2. 拆分导航
   justify-content : space-between
3. 元素居中

   	align-items : center
   	justify-content : center
   

4. 绝对底部(底部的UI要固定在底部而不是跟随在正文的下方——也就是你正文结束了，中间要有空白，而不是让底部跟着正文让空白跟着底部)
   flex-grow: 1

CSS定位

把元素再正常布局流的位置移动到另一个位置

定位

1. static
2. relative
3. absolute
4. fixed
5. sticky

使用这些内容的时候需要设置好属性top和left

relative

.container
{
	border : 1px solid #66;
	width : 500px;
	height : 300px;
	margin : 100px;
}
.child
{
	width: 100px;
	height:100px;
	background-color: red;
}

其中把child改成以下内容

.child
{
	width: 100px;
	height:100px;
	background-color: red;
	position : relative; /*相对于父元素*/
	top : 30px;
	left : 30px;
}

absolute

若设置为absolute

该元素会一直往他的父元素寻找，直到找到元素不为 static的数据，也就是浏览器的左上角：

这时候只要我们把container中的position设为fixed/relative或者别的值即可

.container
{
	border : 1px solid #66;
	width : 500px;
	height : 300px;
	margin : 100px;
	position: /*no static*/
}

fixed

fixed只针对*浏览器*窗口偏移

sticky

relative + fixed

刚开始进入浏览器窗口的时候，每个sticky元素都像relative一样在对应的位置

但是一旦浏览器窗口“不再看见这些元素的时候”（比如往下滑，这些元素本来应该消失），他们就会黏在浏览器的最上方，固定在那不动

浮动

改变浮动本身和布局流中跟随他的其他元素行为

元素浮动到左右侧，且被布局流移除
举个例子：Word里面图片的“文字环绕嵌入”

pic
{
	width: 50;
	height:100;
	float:left;
	margin: 0 10px;
}

清除浮动

有些情况下不想让某些特定元素围绕浮动的元素

此时将clear设为both即可

注意，清除浮动会把跟在这个元素后续的元素也清除

后续元素也会被清除