CSS小技巧（二）：布局

在我们写CSS代码的过程中，可以养成记录一些小技巧的习惯。

1.

一般特定的元素都有自己默认的样式，但是在我们的整体布局中，可能适得其反。
我们可以去掉其默认样式。

* {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

等等

2.

border大法

在调试一个盒子的时候，我们可以为其加上边框。更易于直观地看出盒子的位置以及样式。

<div class="bd"></div>

.bd {
  border: 1px solid red;
}

3.

一定要善用Chrome开发者工具检查网页代码。

可以在网页结构上直接作出暂时性的修改，非常的方便。还可以查看每个元素的样式。
关于这点我们在之后的博客进行详细说明。

4.

尽量少用width和height这两个属性。

在定义元素的高度时，我们知道一个元素的高度是由内容决定的，比如div高度由其内部文档流高度总和决定。

这样直接用width输入像素值，很容易造成内部溢出而显示错误或超出范围。
在定义元素高度时，如果直接用height输入像素也会因一些变化或其他css样式而引起显示问题。不到万不得已，尽量少使用或在可控范围内使用。

我们可以根据实际大小位置需要，用margin和padding控制元素的位置以及样式大小。

5.

如果要规定div的宽度，尽量使用max-width。可以在缩小浏览器窗口时等比例缩放。

max-width: 600px;

6.

固定定位

position: fixed;
top: 0;
left: 0;

一般在制作导航栏时会用到固定定位，使该元素脱离文档流，可以相对于屏幕固定。

<div class="parentNav">
  <div class="topNavBar">
  </div>
</div>

但是固定定位会导致元素样式收缩，可以用width: 100%;来解决。
但此时不能加左右的padding，否则总宽度会超过body的宽度。
解决办法是给一个父元素div 可以用来调整padding和margin。
div宽度无法超过body，而且会自适应。

.parentNav {
  padding: 0 6px;
}
.parentNav .topNavBar {
  position: fixed;
  top: 0;
  left: 0;
  padding: 24px 0;
  width: 100%;
}

7.

如何实现dl中的dt和dd左右布局？

将dt和dd一起设置通向浮动后，发现所有元素并排排在一起；虽然自动换行，但是是无序的。
我们为达到目的：让同一类dt和dd左右排布；不同类上下排布。

可以利用自动换行的原理，为dt和dd分别设置百分比宽度，总和达到100%即可。
同时用padding调节上下间距。

<section class="text">
  <dl>
    <dt>Age: </dt>
    <dd>20</dd>
    <dt>Gender: </dt>
    <dd>Male</dd>
    <dt>Height: </dt>
    <dd>180cm</dd>
  </dl>
</section>

.text dl dt {
  float: left;
  width: 30%;
  padding: 6px 0;
}
.text dl dd {
  float: left;
  width: 70%;
  padding: 6px 0;
}

持续更新中...




Written by：EdenSheng
Email：[email protected]