1. 布局必备基础知识
1.1 标签类型及特性
1.1.1 行内元素（内联元素）
- 常见的行内标签有：
a、span、strong、b、em、i等。
- 内联元素特点：
- 和其他元素都在一行上；
- 高及外边高，行距和内边距部分可改变；
- 宽度只与内容有关；
- 行内元素只能容纳文本或者其他行内元素。
1.1.2 行内块元素
- 常见的行内块元素有：
img、 input 、 button、 select、 textarea等。
- 行内块元素特点：
- 内部表现为块级元素,可设置宽高，支持盒模型。
- 外部表现为行内元素 不独占一行，从左到右排列。
1.1.3 块级元素
- 常见的块级元素有：
div 、 section 、 ul 、 ol 、 dl 、 table 、form等。
- 块级元素特点：
- 总是在新行上开始，占据一整行；
- 高度，行高以及外边距和内边距都可控制；
- 宽始终是与浏览器宽度一样，与内容无关；
- 它可以容纳内联元素和其他块元素。
1.1.4 标签类型转换
行内大多为描述性标记，块级大多为结构性标记。
通过设置display:inline/inline-block/block可以修改标签的类型。
1.2 盒模型
1.2.1 标准盒模型（w3c）
image.png
1.2.2 怪异盒模型（ie）
image.png
1.2.3 盒模型的转换
为了保证网页在各个浏览器中显示一致，通常设置doctype声明，规定浏览器都按照w3c标准盒模型去渲染。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页。
通过设置box-sizing:content-box/border-box可以转换盒模型。
1.3 定位（position）
1.3.1 普通流定位(static)
Position的默认值。没有定位，元素出现在正常的文档流中
（忽略 top, bottom, left, right 或者 z-index 声明）。
1.3.2 相对定位(relative)
生成相对定位的元素，相对于其正常位置进行定位。
元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
注意:
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。 因此，移动元素会导致它覆盖其它标准文档流的框。
1.3.3 绝对定位(absolute)
绝对定位的元素的位置相对于最近的已定位祖先元素，
如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
绝对定位的元素框从文档流完全删除，因此不占据空间。
1.3.4 固定定位(fixed)
固定定位的元素，相对于浏览器窗口进行定位。 将元素的内容固定在页面中的某个位置，元素从普通文档流中完全移除，不占用页面空间，当用户向下滑动页面元素框时并不随着移动
（固定在窗口的某处）。
相对定位是“相对于”元素在文档中的初始位置定位，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块进行定位。
1.4 浮动（float）
1.4.1 浮动的目的
最初时，浮动只能用于图像（某些浏览器还支持表的浮动），目的就是为了允许其他内容（如文本）“围绕”该图像,而后来的CSS允许浮动任何元素。
1.4.2 浮动的特点
浮动定位是将元素排除在普通标准文档流之外，元素将不占用空间，无法撑开父元素；
在没有定义具体宽度的情况下，使自身的宽度从100%变为自适应（浮动元素display:block，但是展现形式是display:inline-block）
浮动框可以向左或向右移动，直到它外边碰到包含框或者另一个浮动框； 浮动元素的外边缘不会超出其父元素的内边缘；
浮动的元素不会互相重叠，浮动元素也不会上下浮动（不类似z-index）。
1.4.3 清除浮动
由于浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，所以清除浮动很有必要。
1.5 Flex/Grid布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，亦可称其为“弹性盒模型”。
Flex布局与Grid布局的对比
-
CSS grids 适用于布局大画面。它们使页面的布局变得非常容易，甚至可以处理一些不规则和非对称的设计。2D 布局适合使用 CSS grids（行与列）。
-
Flexbox 非常适合对齐元素内的内容。你可以使用 Flex 来定位设计上一些较小的细节。Flexbox 适用于单一维度的布局（行或列）。
2. 布局类型及常见布局
2.1 布局类型
2.1.1 静态布局
传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分。
2.1.2 自适应布局
特点是分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素并不变(页面元素不随窗口大小的调整发生变化)。可以看成是不同屏幕下由多个静态布局组成的。(技术点：媒体查询)
2.1.3 流式布局
特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。(不固定宽高，使用百分比)
2.1.4 响应式布局
分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
2.2 常见布局方式
2.2.1 单列布局
2.2.2 多列布局
2.2.3 全屏布局
2.2.4 响应式布局
2.3 布局常用的技术
定位(绝对，相对)、浮动、flex布局、margin、table、@media媒体查询
3. 布局常见问题
3.1 水平垂直居中问题
3.2 清除浮动的问题
常用清除浮动方法
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
3.3 文本溢出隐藏
1. 单行文本溢出
.overflow_ellipse{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
2. 多行文本溢出
.overflow_ellipse{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 要显示的行数;
-webkit-box-orient: vertical ;
}
网友评论