《精通CSS》读书笔记4

发表于 | 分类于 ，

第7章 对表单和数据表格应用样式

复杂的表单布局

  • 复选框两列布局
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
<fieldset id="favoriteColor">
  <legend>Your Content Details</legend>
  <h2>Favorite Color:</h2>
  <div class="col">
    <div>
      <label>
        <input class="checkbox" id="red" name="red" type="checkbox" value="red">red</label>
    </div>
    <div>
      <label>
        <input class="checkbox" id="red" name="red" type="checkbox" value="red">red</label>
    </div>
    <div>
      <label>
        <input class="checkbox" id="red" name="red" type="checkbox" value="red">red</label>
    </div>
  </div>
  <div class="col">
    <div>
      <label>
        <input class="checkbox" id="orange" name="orange" type="checkbox" value="orange">orange</label>
    </div>
    <div>
      <label>
        <input class="checkbox" id="orange" name="orange" type="checkbox" value="orange">orange</label>
    </div>
    <div>
      <label>
        <input class="checkbox" id="orange" name="orange" type="checkbox" value="orange">orange</label>
    </div>
  </div>
</fieldset>
1
2
3
4
5
6
7
8
9
10
11
12
13
#favoriteColor{
  width:30em;
}
#favoriteColor h2{
  float:left;
  font-size: 1em;
  font-weight: normal;
  width:10em;
}
#favoriteColor .col{
  float:left;
  width:8em;
}

7-1

第8章 布局

两列的浮动布局

1
2
3
4
5
6
<div class="content">
    <div class="primary">
    </div>
    <div class="secondary">
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.content .primary{
  width:650px;
  margin-right:20px;
  float:right;
  height:500px;
  background: green;
}
.content .secondary{
  width:230px;
  float:left;
  background:red;
  height:100px;
}
.content{
  width:920px;
  margin:auto;
  height:800px;
  background: gray;
}

8-1

固定宽度、流式和弹性布局

​ 流式布局相对于浏览器宽度设置元素的宽度，弹性布局相对于字号设置元素的宽度

  • 固定宽度布局的缺点：
  1. 无论窗口的尺寸多大，它们的尺寸总是不变的，无法充分利用可用空间。
  2. 只适合于浏览器默认文本字号，将文本字号增加几级，边栏就会挤满空间并且行长太短。
  • 流式布局缺点：
  1. 窗口较小时，行变得很窄，很难阅读。——>添加以像素或em为单位的min-width，防止布局变得太窄。
  2. 如果设计横跨整个浏览器窗口，行变得很长，很难阅读。——>不要横跨浏览器，而只跨越宽度的一部分。
  • 弹性布局缺点：
  1. 和固定宽度布局一样不能充分利用空间
  2. 字号增加时整个布局会加大，比浏览器窗口宽，导致水平滚动条出现。

流式和弹性图像

  • 如果使用流式和弹性布局，宽度减小，图像可能会相对移动，且超过包含的元素。
  • 解决方式：
  1. 需要跨越大区域的图像，使用背景图像background
  2. 如果用作图像元素，将容器宽度设置为100%并且overflow:hidden。(敲代码尝试后无效)
  3. 设置max-width为图像尺寸

高度相等的列

  • 给每个框设置大的底内边距，然后数值相思的负外边距消除这个高度，列溢出容器元素的部分，就overflow:hidden
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="wrapper">
    <div class="box">
      <h1>Andy Budd</h1>
      <p>Andy Budd</p>
      <div class="bottom"></div>
    </div>

    <div class="box">
      <h1>Andy Budd</h1>
      <p>qw e r ty u i op a s  df g h j k l z xc v b nm</p>
      <div class="bottom"></div>
    </div>

    <div class="box">
      <h1>Andy Budd</h1>
      <p>1 2 3 45 6 7 8 9 0q w e rt y u i o as d f g h j k l z xc v b nm q w e r t y u io p a s d fg  hj k </p>
      <div class="bottom"></div>
    </div>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wrapper{
  width:100%;
  overflow: hidden; 
}

.box{
  width:250px;
  padding-left:20px;
  padding-right:20px;
  padding-top:20px;
  padding-bottom:520px;
  margin-bottom:-500px; /*给每个框设置大的底内边距，然后数值相思的负外边距消除这个高度*/
  margin-left:20px;
  float:left;
  display:inline;
  background:red;
}

8-2