第六课《学习布局》-笔记

最新推荐文章于 2023-08-16 10:01:41 发布

weixin_30401605

最新推荐文章于 2023-08-16 10:01:41 发布

阅读量101

点赞数

原文链接：http://www.cnblogs.com/lixiang12/p/10386028.html

版权

一、文档流（flow）

元素的宽高：默认情况下，块级元素的宽度是其父元素宽度的100%，高度由其内容的高度决定，内联元素的宽度和高度均由其内容决定
正常的布局流：
1. 块级元素在视窗中垂直布局，每一个都将显示在上一个元素下面的新行上，被它们之间的外边距隔开
2. 内联元素在视窗中水平布局，相邻的元素会出现在同一行上，当父元素的宽度不足时，溢出的内容将下移到新行上继续水平布局
外边距折叠：如果两个相邻元素都有外边距，并且外边距接触，则实际外边距为较大的那一个

二、定位(position)

静态定位(static)：将元素放入它在文档流中的正常位置，是每个元素获取的默认值，此时设置top,right,bottom,left,z-index时无效
相对定位(relative)：现将元素放置在文档流中的原始位置，然后在不改变页面布局的前提下调整元素位置，元素原始位置占据的空间保留
绝对定位(absolute)：元素脱离正常文档流，不占据文档流空间，相对于最近的非static祖先元素调整元素位置，绝对定位元素可以设置外边距，且不会与其他边距合并
固定定位(fixed)：元素脱离正常文档流，不占据文档流空间，相对于视屏窗口调整元素位置
粘性定位(sticky)：元素在跨越特定阈值前为相对定位，在跨越特定阈值后固定定位，但该元素原始位置占据的空间保留，后续元素位置仍按固定定位前确定
定位上下文：元素进行定位时参考的对象，元素的默认定位上下文为<html>元素
z-index：网页的z轴参考系，默认状态下，定位元素出现在非定位元素的顶部，源顺序靠后的定位元素出现在顶部，z-index只接受无单位索引值，索引值较大的元素出现在顶部

三、弹性盒子（flexbox）

flex 模型：
1. 主轴（main axis）：是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列），该轴的开始和结束被称为 main srart 和 main end
2. 交叉轴（cross axis）：垂直于 flex 元素放置方向的轴，该轴的开始和结束被称为 cross start 和 cross end
3. 设置了 display：flex 的父元素被称为 flex 容器（flex container）
4. 在 flex 容器中表现为柔性的元素被称之为 flex 项（flex item）
flex 模型的流布局：
1. flex-direction 属性：定义了主轴的方向，取值：row（默认值）| row-reverse | column | column-reverse
2. flex-wrap 属性：定义flex 项显示为单行或者多行，以及换行后的堆叠方向，取值：nowrap（默认值）| wrap | wrap-reverse
3. flex-flow 缩写属性：flex-direction 和 flex-wrap 的缩写属性
flex 项的动态布局：
1. flex-grow 属性：定义 flex 项的拉伸因子，用于指定 flex 项之间的比例关系，取值：0（默认值）| 无单位数值
2. flex-shrink 属性：处理当 flex 项溢出时如何收缩以避免溢出，取值：1（默认值）| 无单位数值
3. flex-basis 属性：定义了 flex 项在主轴方向上的初始大小，取值：auto（默认值）| width值 | content
4. flex 缩写属性：flex-grow 、flex-shrink 和 flex-basis 的缩写属性
flex 项的水平和垂直对齐：
1. justify-content 属性：控制 flex 项在主轴上的位置，取值：flex-start（默认值）| flex-end | center | space-around | space-between 等
2. align-items 属性：控制 flex 项在交叉轴上的位置，取值：stretch（默认值）| center | flex-start | flex-end 等
flex 项排序，order 属性：改变 flex 项排列顺序，不影响源顺序（即dom树里元素的顺序）
1. order 默认值为0
2. order 值较大的 flex 项排序更靠后
3. 相同 order 值的 flex 项按源顺序显示

四、理解浮动（二）

float 的设计初衷：用于实现文字环绕效果
float 特性：
1. 破坏性：具有 float 属性的元素会脱离正常文档流，父元素会出现塌陷现象
2. 包裹性：具有 float 属性的块元素宽度会变为内容宽度，而不是撑满父元素
3. 清空格：具有 float 属性元素会紧紧的贴在一起
清除浮动（clearfix）:消除该元素上方浮动的元素对该元素及以下元素的影响（个人理解）
1. 实现方式之一：通过伪元素选择器，在父元素后添加一个具有 clear both 属性的空元素
2. css 代码：
```
.clearfix:after {
content: '';
display: table;
clear: both;
}
```

五、居中对齐

水平居中
1. 行内元素：父元素设置 text-align:center;
2. 定宽块元素：该元素设置 margin:0 auto;
垂直居中（父元素为盒容器且高度确定）
1. 行内元素（单行）：父元素 line-height 属性设置为其高度
2. 定高块元素：设置子元素的 margin-top或margin-bottom 为父子元素高度差的一半
3. 不定高块元素：父元素设置 display:table-cell; vertical-align:middle;
水平垂直居中
1. 行内元素：text-align:center + 父元素 line-height（单行）或 text-align:center + 父元素 display:table; vertical-align:middle
2. 块元素：设置绝对定位的偏移为0时，margin:auto;

六、两栏布局实现（左侧固定，右侧自适应）

利用calc( )方法动态设定自适应列的宽度
1. 双 inline-block 方案（注意：父元素需用 font-size：0 消除空格影响，行内框内部再还原字体大小；两个行内框需要 vertical-align:top 实现顶端对齐；calc()函数运算符号两端有空格）
2. 双浮动方案
利用块元素的宽度会填满父元素，并随着父元素的宽度自适应的特性
1. absolute 或 float + margin-left 方案
2. float + BFC 方案
flex方式
grid方式

七、三栏布局实现（左右两列固定宽度，中间列宽度自适应）

圣杯布局：
1. 中间列为主体列，需要优先渲染，因此在DOM结构中靠前
2. 容器元素添加左右内边距确定中间列位置
3. 左列使用 margin-left : -100%，再相对定位实现
4. 右列使用 margin-right或margin-right等于： -自身宽度，再相对定位实现最终布局（右列使用margin-right可以直接实现定位，使用margin-left同样可以实现，但需要加相对定位，多出两行代码）
双飞翼布局：
1. 中间列为主体列，需要优先渲染，因此在DOM结构中靠前
2. 给中间列添加包裹层并浮动，给中间列设置左右外边距确定中间列位置
3. 使用负边距确定左右列位置
绝对定位法：左右两列绝对定位，中间列用左右外边距撑开空间
自身浮动法：左列 float:left，右侧 float:right，中间列跟在后边，用两侧外边距撑开空间，要求中间列在DOM结构中最后出现

八、总结

这一节课终于上完了，前前后后加起来一共用了一周左右，每天大约3个小时。其实一开始只用了两天就完成了阅读材料的学习，但是学是学了，有没有掌握自己也不知道，刚好看到一位同行讲了一句：技能树不是看一遍就算点亮了，得能用起来才算得上点亮。我觉得有些道理，于是就把学习材料里将近三十几个DEMO自己写了一遍，一开始是复制代码，后来发现效果不好，于是就一个字符一个字符的手写，那样感触来的最真切，哪里有困惑就自己做调整，来来回回的试，最后发现这么做虽然会耗费不少的时间，但是很值得。看过一遍和写过一遍是两码事，写过一遍和写过几遍又是两码事。就像一开始理解圣杯布局和双飞翼布局时候有点乱，跟着作者的思路写了一遍就理解了，后来在写专题的时候又写了几遍，最后那些代码闭起眼睛直接就映在脑海里了。这节课学的知识应该算是到位了，以后学习的内容也需要达到这样的效果。

转载于:https://www.cnblogs.com/lixiang12/p/10386028.html