传统布局总结

# 传统布局总结

# 布局方案

标准流：垂直布局
浮动：水平布局（利用标准流约束浮动元素位置）
定位（绝对定位、固定定位）：层叠布局

注意

般先设置盒子的大小，之后设置盒子的位置
一个元素浮动了，理论上其余的兄弟元素也要浮动，以防止引起问题（浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流（前面的标准流占一行，无论在浮动盒子的上面还是下面）
遇到 header 和 footer 需要和显示器等宽的，不需要设置 width，自动就是等宽的

# 常见布局技巧

# margin 负值的运用

盒子细线边框加粗问题

让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框（浏览器渲染时是分别渲染的，所以可以实现）

hover 时右侧边框被右边盒子覆盖掉问题

鼠标经过某个盒子的时候，提高当前盒子的层级即可。

如果父盒子没有有定位，则加相对定位（保留位置）；如果父盒子有定位，则加z-index

# 文字围绕浮动元素

父盒子中有左侧图片和右侧文字，此时可以利用 float 的文字环绕来解决，不用再定义 2 个盒子

# 行内块的巧妙运用

利用行内块元素中间有缝隙，且可以使用text-align来居中，可以指定 width、height

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>行内块的巧妙运用</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        text-align: center;
      }
      .box a {
        display: inline-block;
        width: 36px;
        height: 36px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 36px;
        text-decoration: none;
        color: #333;
        font-size: 14px;
      }
      .box .prev,
      .box .next {
        width: 85px;
      }
      .box .current,
      .box .elp {
        background-color: #fff;
        border: none;
      }
      .box input {
        height: 36px;
        width: 45px;
        border: 1px solid #ccc;
        outline: none;
      }
      .box button {
        width: 60px;
        height: 36px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <a href="#" class="prev">&lt;&lt;上一页</a>
      <a href="#" class="current">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">6</a>
      <a href="#" class="elp">...</a>
      <a href="#" class="next">&gt;&gt;下一页</a>
      到第
      <input type="text" />
      页
      <button>确定</button>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

效果如下：

# 传统布局总结及案例 🔥

# 1 CSS 初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容，我们需要对 CSS 初始化，重设浏览器的样式，也称为 CSS reset。以京东 CSS 初始化代码为例：

@charset "utf-8";

/* 把我们所有标签的内外边距清零 */
* {
  margin: 0;
  padding: 0;
  /* 指定CSS3盒子模型 */
  box-sizing: border-box;
}

/* 去掉li 的小圆点 */
ul,
ol,
li {
  list-style: none;
}

a,
input,
select,
textarea,
button {
  /* 去掉蓝色边框 */
  outline: none;
  /* 去掉默认的灰色边框，不一定使用 */
  border: none;
}

/* 去掉a的下划线 */
a {
  text-decoration: none;
  color: #333;
}

button {
  /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
  cursor: pointer;
}

img {
  /* 取消图片底侧有空白缝隙的问题；图片和文字一起布局时，需要修改非基线对齐 */
  vertical-align: middle;
  /* border 0 或 none 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
  border: none;
}

/* em 和 i 斜体的文字不倾斜 */
em,
i {
  font-style: normal;
}

/* 表格 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  /* CSS3 抗锯齿形 让文字显示的更加清晰 */
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
}

.hide,
.none {
  display: none;
}

/* ============= 浮动有关 start ============= */
.f-left {
  float: left;
}

.f-right {
  float: right;
}

/* 清除浮动 */
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: '.';
  height: 0;
}

.clearfix {
  *zoom: 1;
}
/* ============= 浮动有关 end ============= */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

# 2 CSS 属性书写顺序

布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写，关系到模式)
自身属性:width / height / margin / padding / border / background
文本属性:color / font / text-decoration / text-align / vertical-align / white- space / word-break
其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

# 3 页面整体布局思路

为了提高网页制作的效率，布局时通常有以下的布局流程:

必须确定页面的版心(可视区)，基本上宽度都和它一致。测量可得知。
分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成的。
制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
开始运用盒子模型的原理，通过 DIV+CSS 布局来控制网页的各个模块。

# 4 确定版心

这个页面的版心 width 是 1200 像素，每个版心都要水平居中对齐，可以定义版心为公共类:

.w {
  width: 1200px;
  margin: auto;
}

1
2
3
4

# 5 头部盒子

1 号是版心盒子 header 1200 * 42 的盒子水平居中对齐，上下给一个 margin 值就可以
版心盒子里面包含 2 号盒子 logo。div 布局好后放入 img 即可
版心盒子里面包含 3 号盒子 nav 导航栏，实际开发中，nav 一般采用 li + a 的做法。语义更清楚，且若直接使用 a 来堆砌，搜索引擎容易辨别为有堆砌关键字嫌疑，有降权风险
- 给 li 浮动，li 是块级元素，a 是内联元素
- 导航栏可以不给宽度，将来可继续添加文字；因为文字不一样多，给a 左右 padding 来撑开盒子即可
版心盒子里面包含 4 号盒子 search 搜索框。一个大 div 套 input 和 button

# 8 hot

利用 position

# 9 轮播图

利用 position

父盒子相对定位，子模块绝对定位

# bootstrap

# 入门

详细内容访问Bootstrap 中文网 (opens new window)

引入依赖
- css：bootstrap.css
- js：jquery.js、popper.js(用于弹窗、提示、下拉菜单。版本 3 没有这个)、bootstrap.js

响应式布局：一个网站可以兼容多个终端

<meta charset="UTF-8" />
<!--响应式 meta 标签;viewport宽度；初始缩放值；最小/最大缩放值；是否允许用户缩放-->
<!--还有minimum-scale；maximum-scale；user-scalable=true/false-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--文档兼容模式-->
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

1
2
3
4
5
6

viewport
- 移动设备上的就是设备的屏幕上能用来显示我们的网页的那一块区域
px
- css 中 1px 并不等于设备的 1px

步骤
1. 定义布局容器：container、.container-fluid
2. 定义行：row
3. 定义列：col-xs-*、col-sm-*、col-md-*、col-lg-*、hidden-**（可以让元素在某个屏幕大小设备不显示）

# 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个容器
- .container 类用于固定宽度（根据不同设备左右有固定留白，但 xs 没有留白）并支持响应式布局的容器
- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

# 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12 列

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。工作原理如下：
- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
- 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为“行（row）”的直接子元素。
- 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
- 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。==多列嵌套时，可以通过==padding:0==来取消内边距，使得元素占满 viewport==
- 负值的margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
- 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- 向上兼容且不向下兼容：栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，并且针对小屏幕设备覆盖栅格类（可能每个列占一行）。因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-*不存在，也影响大屏幕设备。

# 全局 CSS 样式、组件、插件

全局 CSS 样式

按钮： <button> (建议使用)、<a>、 <input> 。class="btn btn-default"
图片：img-responsive"、img-rounded(方)、img-circle(圆)、img-thumbnail(相框)
表格：table、table-bordered、table-hover
表单：

组件

导航条
分页：！！！

插件

轮播图

# 其他详细的看文档去吧！

编辑

上次更新: 2022/03/23, 17:55:39

← 定位 Flexible→