在我们写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大法
在调试一个盒子的时候，我们可以为其加上边框。更易于直观地看出盒子的位置以及样式。
.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;一般在制作导航栏时会用到固定定位，使该元素脱离文档流，可以相对于屏幕固定。
但是固定定位会导致元素样式收缩，可以用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调节上下间距。
- Age:
- 20
- Gender:
- Male
- Height:
- 180cm
.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]