CSS 尺寸/位置/布局/元素

CSS
字数统计: 1.2k   |   阅读时长≈ 6 分钟

复选框与文本对齐

1
2
<p><input type="checkbox" /><span>文本</span></p>
<p><input type="radio" /> <span>文本</span></p>

当字号大于 input 尺寸时， input 会与文字中间对其

但是字号过小的时候，input 与文字底部并不能对其

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 方案1 */
input {
  vertical-align: -3px;
}

/* 方案2 */
input {
  vertical-align: top;
  margin-top: 4px;
}

/* 方案3 */
input {
  vertical-align: middle;
  margin-top: -2px;
  margin-bottom: 1px;
}

多行文字垂直居中

1
2
3
4
5
<div class="box">
  <div class="child"
    >这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。</span
  >
</div>
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
/* 方案1 */

.box {
  width: 500px;
  height: 500px;
  display: flex;
  align-items: center;
}

/* 方案2 */

.box {
  width: 500px;
  height: 500px;
  display: flex;
}

.child {
  margin: auto 0;
}

/* 方案3 */

.box {
  width: 500px;
  height: 500px;
  line-height: 500px;
}

.child {
  vertical-align: middle;
  line-height: normal;
  display: inline-block;
}

/* 方案4 */

.box {
  width: 500px;
  height: 500px;
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

多行文本超出隐藏

1
2
3
4
5
.box {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

三列布局

  • 绝对定位 1
1
2
3
4
5
<div class="box">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
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
/* 绝对定位1 */

.left {
  position: absolute;
  width: 200px;
  left: 0;
  top: 0;
  height: 100%;
  background: goldenrod;
}

.right {
  position: absolute;
  width: 200px;
  right: 0;
  height: 100%;
  background: thistle;
}

.center {
  position: absolute;
  right: 200px;
  left: 200px;
  height: 100%;
  background: palegreen;
}

.box {
  position: relative;
  height: 100%;
}

/* 绝对定位2 */

.left {
  position: absolute;
  width: 200px;
  left: 0;
  top: 0;
  height: 100%;
  background: goldenrod;
}

.right {
  position: absolute;
  width: 200px;
  right: 0;
  top: 0;
  height: 100%;
  background: thistle;
}

.center {
  margin: 0 200px;
  height: 100%;
  background: palegreen;
}

.box {
  position: relative;
  height: 100%;
}
  • 浮动 + 负 margin
1
2
3
4
5
6
7
<div class="box">
  <div class="wrapper">
    <div class="center"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>
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
.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  height: 100%;
  background: goldenrod;
}

.center {
  margin: 0 200px;
  height: 100%;
  background: palegreen;
}

.wrapper {
  float: left;
  height: 100%;
  width: 100%;
}

.right {
  float: left;
  width: 200px;
  height: 100%;
  margin-left: -200px;
  background: thistle;
}

.box {
  position: relative;
  height: 100%;
}
1
2
3
4
5
6
7
8
<!-- 推荐，元素与视觉保持一致 -->
<div class="box">
  <div class="left"></div>
  <div class="wrapper">
    <div class="center"></div>
  </div>
  <div class="right"></div>
</div>
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
.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  height: 100%;
  background: goldenrod;
}

.center {
  margin: 0 200px;
  height: 100%;
  background: palegreen;
}

.wrapper {
  float: left;
  height: 100%;
  width: 100%;
}

.right {
  float: left;
  width: 200px;
  height: 100%;
  margin-left: -200px;
  background: thistle;
}

.box {
  position: relative;
  height: 100%;
}
  • flex
1
2
3
4
5
<div class="box">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
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
.left {
  width: 200px;
  height: 100%;
  background: goldenrod;
}

.center {
  flex: 1;
  height: 100%;
  background: palegreen;
}

.wrapper {
  float: left;
  height: 100%;
  width: 100%;
}

.right {
  width: 200px;
  height: 100%;
  background: thistle;
}

.box {
  display: flex;
  height: 100%;
}

尺寸百分比

  • 无定位元素： 相对于外层元素的内容(容纳)区域
  • 定位元素： 相对于最近的定位元素的 padding 区域
属性 百分比相对与
width 参考元素宽度
height 参考元素高度，需要指定参考元素高度
padding 参考元素宽度
border 参考元素宽度
margin 参考元素宽度

最大/最小 尺寸

可用于防止内部元素，超出容器尺寸

1
2
3
4
5
6
.box {
  width: 300px;
}
img {
  max-width: 100%;
}

表单

  • form 可以原生支持回车键提交表单， 会自动查找 form 中第一个有 type='submit' 的按钮， 并触发这个按钮的点击事件

  • 放在 label 中的 input 元素，即使没有使用 for 关联在一起，点击 label 中的任意元素，也会选中 input

    1
    2
    3
    4
    5
    <label>
      <input type="radio" />
      <p>name</p>
      ></label
    >

精灵图

spritesmith 用于合并图片，并生成生成样式

属性值计算过程

每一个元素的每一个属性都必须有值，属性值变为最终计算样式的过程就是属性值计算过程。

  • 确定声明值: 样式表中没有冲突的声明，作为最终样式

  • 层叠冲突: 对有冲突的声明使用层叠规则，确定 css 属性值

    • 比较重要性,作者样式表会覆盖浏览器默认样式
    • 比较特殊性,比较权重
    • 比较源次序，权重相同时，后写的样式覆盖先写的样式

  • 使用继承，对仍然没有值的属性，若可以继承，则继承父元素的值

  • 使用默认值，对仍然没有值的属性，使用默认值

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2015-2025 SunZhiqi

此时无声胜有声！

支付宝
微信